【コピペだけ!】STORK(ストーク)で固定ヘッダーを作る方法!

【コピペだけ!】STORK(ストーク)で固定ヘッダーを作る方法!

 

ここあです。

 

最近は、WordPressテーマSTORKの

カスタマイズ方法を中心に記事を書いています。

 

ただ1つ困っているのは

アイキャッチ画像を統一しているんですが

違う色を考えるのが大変になってきたということ…

 

ということで、アイキャッチ画像を作り替えることにしました。

「どうでもええわ!」というツッコミが今…(笑)

余談はさておき…

 

さて今回は、訪問者の回遊率を高めるべく

STORKのヘッダーを固定させる方法をご紹介します。

 

以前から少しテストはしていたたものの

微調整が難しく記事を書くのに至りませんでした。

 

ですが、ようやくコードの調整も一通り終わり

日の目を見る運びとなりました。

 

ストークの固定ヘッダーの設定方法としては…

デフォルト設定が違う人もいると思うので

 

パターンに合わせて固定ヘッダーの設定方法を

2種類ご用意しました。

 

1つは私と同じ…

  • ロゴ画像はなし
  • ヘッダー背景画像を反映している

 

もう1つは…

  • ロゴ画像あり
  • ヘッダー背景画像はなし

というユーザーのためのカスタマイズ法です。

 

ただし…

固定ヘッダーの設定はPC版しかありませんので

あらかじめご了承くださいね。

 

「それでもいい」という方はぜひ試してみてください。

固定ヘッダーの設定方法は…

CSSコードをコピーするだけなので超簡単です!

 

そもそも固定ヘッダーとは?

ヘッダーとは…

一番上のロゴ画像やグローバルメニューのある部分。

 

わたしのサイトで言えば…

サイトタイトルが入っている水色の部分です。

通常は、そこのヘッダー部分が

画面スクロールと共に消えてします。

 

しかし、私のサイトを見てもらうと分かるように…

 

水色のヘッダー部分は画面スクロールしても

常に固定されていますよね。これが固定ヘッダーです。

 

つまり、単純に…

 

通常はスクロールしたら消えてしまう

ブログタイトルやグローバルメニューを固定化してしまおう

ということです。

 

常にブログタイトルやグローバルメニューを表示しておけば

サイトの訪問者に…

  • サイト名を覚えてもらったり
  • グローバルメニューから他の記事を見てもらったり

と、ユーザビリティも上がり、メリットも大きいです。

 

STORK(ストーク)に固定ヘッダーを導入する方法

固定ヘッダー用のCSSコードは

以下の場所にコピペしてください。

 

ダッシュボードメニューから外観 → CSS編集をクリック

ダッシュボードメニュー

 

 

追加CSSを開いてください。

CSSコードは以下画像の位置に記述します。

dropshadow

 

 

固定ヘッダーパターン1(ロゴ画像なし/ヘッダー背景画像あり)

STORK固定ヘッダーパターン1

 

まずは私と同じ

  • ロゴ画像はなし
  • ヘッダー背景画像あり

の設定をしている人の固定ヘッダーです。

 

以下のCSSコードをコピペすれば

固定ヘッダーにすることができます。

/* ヘッダーを固定 */
@media only screen and (min-width: 767px){
#inner-header {
position: fixed;
width: 100%;
box-shadow:
0 2px 5px rgba(0,0,0,0.7);
}

/* トップページのコンテンツを調整 */
.home #content {
margin-top: 60px;
}

/* パンくずリストを調整 */
#breadcrumb {
margin-top: 125px;
}

/* ヘッダー画像を調整 */
#custom_header{
position: relative;
top: 110px;
}

/* スライダーを調整 */
#top_carousel{
margin-top: 150px;
}

/* コンテンツを調整 */
#content{
margin: 20px 0 0!important;
}
}

CSSコードを貼り付けるだけなので簡単ですね^^

 

固定ヘッダーパターン2(ロゴ画像あり/ヘッダー画像なし)

STORK固定ヘッダーパターン2

 

パターン2は…

  • ロゴ画像あり
  • ヘッダー背景画像なし

の設定をしている人のための固定ヘッダーです。

 

CSSコードは以下をコピペしましょう。

/* ヘッダーを固定(PC) */
@media only screen and (min-width: 767px){
#inner-header {
position: fixed;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

/* ヘッダー画像を調整 */
#custom_header{
position: relative;
top: 110px;
}

/* トップページのコンテンツを調整 */
.home #content {
margin-top: 60px;
}

/* ロゴ画像のサイズを調整 */
#logo .h1.img img {
max-height: 320px;
width: auto;
}

/* パンくずリストを調整 */
#breadcrumb {
margin-top: 350px;
}

/* スライダーを調整 */
#top_carousel{
margin-top: 370px;
}

/* コンテンツを調整 */
#content{
margin: 20px 0 0!important;
}
}

 

トップページをどう設定しているかで

CSSの調整の仕方が変わります。

 

あなたが設定しているトップページに合う

CSSコードを貼り付けるようにしてくださいね。

 

STORK(ストーク)の固定ヘッダーを調整する方法

CSSコードを追加したら微調整が必要になると思います。

パターン1、パターン2でそれぞれ調整方法も

記載しておきますのでお好みで調整してください。

 

固定ヘッダーパターン1の調整方法

固定ヘッダーパターン1の調整方法

 

まずは、パターン1の調整方法を説明します。

 

私と同じくロゴタイトルの位置を

グローバルメニューの上にレイアウトしている場合は

あまり調整が必要ないかもしれませんが

 

上記画像のように

グローバルメニューの左ににタイトルをレイアウトしている場合は

ヘッダーとヘッダー画像の間に白い空白ができてしまいます。

 

1)ヘッダーの幅を調整する方法

最上部のヘッダーが少し天地が狭いと思った場合は

以下のコードの部分に

元のCSS

/* ヘッダーを固定 */
@media only screen and (min-width: 1166px){
#inner-header {
position: fixed;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

height: 65px;を足して…

 

変更後のCSS

/* ヘッダーを固定 */
@media only screen and (min-width: 1166px){
#inner-header {
position: fixed;
width: 100%;
height: 65px;

box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

このheight: 65px;の数値(65px)を調整し

ヘッダーの高さをまず決めてください。

 

ヘッダーが画面上部にピッタリくっつかないという場合は上記コードの中に「top: 0px;」とコードを追加してください。テーマのアップデートでヘッダー部分が画面上部からズレる可能性がありますので、ヘッダー部分が離れた場合も同様にtop: 0;と追加してください。

 

2)ヘッダー画像の位置を調整する方法

ヘッダーの高さが決まったら

次はヘッダー画像の位置を調整します。

ヘッダー画像の位置調整は以下のCSSコードで可能です。
※以下のコードは既にコピペしてあるので追加は不要です。

 

ヘッダー画像の位置を調整するCSS

/* ヘッダー画像を調整 */
#custom_header{
position: relative;
top: 110px;
}

上記コードのtop: 110px;の数値(110px)を変更することで

ヘッダー画像の位置が動きます。

ヘッダーにぴったりくっつくように数値を調整しましょう。

 

 

3)スライダーの位置を調整する方法

ヘッダー画像の位置が決まったら

スライダーの位置も調整します。

 

スライダーの位置を調整するCSS

/* スライダーを調整 */
#top_carousel{
margin-top: 150px;
}

このコードのmargin-top: 150px;の数値(150px)を変更すれば

スライダーの位置が変わります。

あなたが良いと思うバランスの位置まで調整しましょう。

 

 

固定ヘッダーパターン2の調整方法

固定ヘッダーパターン2の調整方法

 

 

続いて、パターン2の調整方法です。

上から順番に調整していきましょう。

 

1)ヘッダーロゴ画像を調整する方法

私のコードをコピーすると

いきなりヘッダーロゴがでかくなったと思います。

というのもヘッダー画像をMAXサイズにするコードがあるからです。

 

なので、まずはヘッダーロゴ画像の大きさを調整しましょう。

 

ヘッダーロゴ画像のサイズを調整するCSS

/* ロゴ画像のサイズを調整 */
#logo .h1.img img {
max-height: 320px;
width: auto;
}

上記コードでロゴ画像を最大サイズで表示させているので

max-height: 320px;の数値(320px)を320以下に設定すれば

ロゴ画像を小さくすることができます。※縦横費は変わりません。

 

2)ヘッダーの幅を調整する方法

ヘッダーの背景部分(高さの幅)も調整します。

以下のコードの部分に

 

元のCSS

/* ヘッダーを固定 */
@media only screen and (min-width: 767px){
#inner-header {
position: fixed;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

height: 340px;を足して…

 

変更後のCSS

/* ヘッダーを固定 */
@media only screen and (min-width: 767px){
#inner-header {
position: fixed;
width: 100%;
height: 340px;

box-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

このheight: 340px;の数値(340px)を調整し

ヘッダーの幅(高さ)を決めてください。

 

3)スライダーの位置を調整する方法

ヘッダーの幅(高さ)が決まったら

最後はスライダーの位置を調整します。

 

スライダーの位置を調整するCSS

/* スライダーを調整 */
#top_carousel{
margin-top: 370px;
}

 

上記コードのmargin-top: 370px;の数値(370px)を変更すれば

スライダーの位置が変わります。

あなたが良いと思う位置まで調整してください。

 

コンテンツの位置を調整する(パターン1,2共通)

とりあえず、トップページの調整はできたかと思います。

しかし、調整はもう少しだけあります。

今度はトップページではなくコンテンツページです。

 

どういうことかと言うと…

 

設定によっては、コンテンツページの

パンくずリストがヘッダーに重なったり

隠れてしまっている場合があります。

 

↓ 例えばこんな感じに…

パンくずリストが重なった状態

 

 

これではせっかくのパンくずリストも台無し。

訪問者のユーザビリティも悪くなってしまいます。

なので、しっかりと調整しましょう。

 

調整するCSSコードは以下の部分。

パンくずリストを調整するCSS

/* パンくずリストを調整 */
#breadcrumb {
margin-top: 125px;
}

 

上記コードはパターン1のもの。

パターン2はmargin-top: 125px;margin-top: 350px;

125pxが350pxになっていると思います。

 

ですが、調整方法は同じです。

このmargin-top: 125px;の数値(125pxまたは350px)

変更することでパンくずリストの位置が変わります。

 

数値を調整し、パンくずリストがヘッダーから

ちゃんと離れて見える位置にしてくださいね。

 

以上、トップページとコンテンツページの調整が全てできたら

設定を保存してください。

 

最初にもお伝えしましたが

今回、固定ヘッダーになるのはPC版のみなので

スマホやタブレットは気にしなくて大丈夫です。

 

ストークの固定ヘッダーも簡単に設定できる!

ストークの固定ヘッダーも簡単に設定できる!

 

今回はWordPressテーマSTORK(ストーク)

ヘッダー部分を固定ヘッダーに変更するCSSコードを

ご紹介しました。

 

いかがでしたでしょうか?

ちゃんと設定できましたか?

 

私も実際に試してみたのですが

固定ヘッダーを取り入れるだけで

随分と印象が変わりますよね。

 

他のブロガーとの差別化もバッチリでき

しかもナビゲーションが追従してくるので

ユーザビリティも上がりとてもいいです。

 

まだまだSTORKはカズタマイズできる部分はあると思うので

これからもできるだけ皆さんのお役に立てるように

増やしていきたいと思います^^

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

 

【コピペだけ!】STORK(ストーク)で固定ヘッダーを作る方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。