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

ここあです。

 

最近は、WordPressテーマSTORKの

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

 

ただ1つ困っているのは

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

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

 

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

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

余談はさておき…

 

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

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

 

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

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

 

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

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

 

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

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

 

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

2種類ご用意しました。

 

1つは私と同じ…

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

 

もう1つは…

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

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

 

ただし…

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

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

 

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

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

 

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

STORKのテーマアップデートv1.2.3〜による固定ヘッダーが透ける時の対処法を追記しました。

 

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

ヘッダーとは…

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

 

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

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

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

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

 

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

 

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

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

 

つまり、単純に…

 

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

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

ということです。

 

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

サイトの訪問者に…

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

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

 

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

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

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

 

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

ダッシュボードメニュー

 

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

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

dropshadow

 

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

STORK固定ヘッダーパターン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(ロゴ画像あり/ヘッダー画像なし)

STORK固定ヘッダーパターン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を追加してみてください。


.bgfull .header #inner-header {
background-color:#fff;
}

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

2019年2月1日追記

 

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はカズタマイズできる部分はあると思うので

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

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

 

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

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG