【コピペだけ！】STORK（ストーク）で固定ヘッダーを作る方法！

ここあです。

最近は、WordPressテーマSTORKの

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

ただ1つ困っているのは

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

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

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

「どうでもええわ！」というツッコミが今…（笑）

余談はさておき…

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

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

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

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

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

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

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

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

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

2種類ご用意しました。

1つは私と同じ…

もう1つは…

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

ただし…

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

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

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

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

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

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

ヘッダーとは…

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

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

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

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

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

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

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

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

つまり、単純に…

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

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

ということです。

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

サイトの訪問者に…

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

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

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

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

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

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

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

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

まずは私と同じ

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

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

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

固定ヘッダーの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);
}
.bgfull .header #inner-header {
background-color:#fff;
}
.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（ロゴ画像あり/ヘッダー画像なし）

パターン2は…

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

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

固定ヘッダーの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);
}
.bgfull .header #inner-header {
background-color:#fff;
}
#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（ストーク）の固定ヘッダーが透けるときの対処法

STORKのテーマアップデート（v1.2.3〜） により

固定ヘッダーの背景が透ける場合があります。

これまでは問題なく表示されていたのに

アップデートしたとたん「何じゃコレ？」となった方は

外観 → カスタマイズ → 追加CSSに以下のCSSコード

「固定ヘッダーの背景色を設定」するCSSを追加してみてください。

上記カラーコードは固定ヘッダーの背景色を白にする

background-color:#fff;となっておりますので

ここのカラーコードをあなたのお好みの色に変更してください。

それで固定ヘッダーの背景が透けるというのは解消できるハズです。

※私はこれで解決しました。

バージョンアップをしたことで固定ヘッダーの背景が透け

さすがの私も焦りましたので、急遽、解決策を追記しました。

これから新たにCSSを追加される方には上記コードは

すでに反映済みなので問題なく表示されると思います。

CSSを追加することで、あなたのサイトも無事

正常に表示されることをお祈りしています（>人<）

2019年2月1日追記

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

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

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

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

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

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

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

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

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

上記画像のように

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

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

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

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

以下のコードの部分に

height: 65px;を足して…

このheight: 65px;の数値（65px）を調整し

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下のコードの部分に

height: 340px;を足して…

このheight: 340px;の数値（340px）を調整し

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↓ 例えばこんな感じに…

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

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

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

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

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

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

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

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

このmargin-top: 125px;の数値（125pxまたは350px）を

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

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

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

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

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

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

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

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

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

今回はWordPressテーマSTORK（ストーク）の

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

ご紹介しました。

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

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

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

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

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

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

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

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

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

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

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

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