副業で稼ぐ

WordPressテーマ「Lion Media」で、ヘッダーを常に最上部に固定する方法

Lion Media子テーマ

前回の記事でも少し触れましたが、Lion Mediaテーマでヘッダーを常に固定させる方法です。

lionmedia動画

仕組みとしては超単純。

CSSでヘッダーにposition:fixed;を記載しているだけです。

詳しい方は、目次からCSSの部分へどうぞ。

なんでヘッダーを最上部に固定させたほうがいいの?

固定

世はスマホ全盛期。一般的なサイトの7割がスマホからの流入と言われています。(ウチは違いますが)

スマホから見た時に、縦に長いサイトはメニューが一番上部にあったら戻るのが大変です。

指でめっちゃスクロールしないといけないわけですから。

そんな手間をしたくない人がそこで離脱してしまいます。これは非常にもったいない。

 

そこで、常に上部にメニューがあれば記事の途中からでも行きたいページに行くことができます。

これがヘッダーを最上部に固定させたほうがいい理由です。

必ず子テーマに追記しましょう

Lion Mediaはありがたいことに子テーマを配布してくれています。

子テーマのダウンロードはこちら

子テーマは、編集用のファイルのこと。テーマのアップデートがあっても、子テーマは改変されません。

オリジナルのカスタマイズを記述するのにぴったりです。

僕はカエレバやヨメレバなどのデザイン変更を子テーマのstyle.cssに記述しています。

子テーマ

今回のヘッダー固定するCSSも、子テーマのstyle.cssに記述しましょう。

これで、アップデートをしても消えることはありません。

CSS

デザインスキン設定でデフォルトのままか、ライトを使っているかによってコードが変わります。

よくわからん、という方は両方記載しましょう。

記載する場所は「外観>テーマの編集>lion media child>スタイルシート(style.css)」の下記ユーザーカスタマイズエリア以下に。

デフォルトのダークを使用している方はこちら

/*PCグローバルメニュー固定*/
.l-extra{
 position: fixed;
top: 70px;
 z-index: 1000;
 width: 100%;
}

.l-header{
 position: fixed;
 z-index: 1000;
 top: 0;
 width: 100%;
 }
 
.key {
    width: 100%;
    padding-top: 100px;
}

/*SPグローバルメニュー固定*/
@media only screen and (max-width: 767px){
.l-extra{
 position: fixed;
 top: 50px;
 z-index: 1000;
 width: 100%;
}

.l-header{
 position: fixed;
     top: 0;
 z-index: 1000;
 width: 100%;
 }
 }

ライトを使用している方はこちら

/*PCグローバルメニュー固定*/
.t-light .l-extra{
 position: fixed;
top: 70px;
 z-index: 1000;
 width: 100%;
}

.l-header{
 position: fixed;
 z-index: 1000;
 top: 0;
 width: 100%;
 }
 
.key {
    width: 100%;
    padding-top: 100px;
}

/*SPグローバルメニュー固定*/
@media only screen and (max-width: 767px){
.t-light .l-extra{
 position: fixed;
 top: 50px;
 z-index: 1000;
 width: 100%;
}

.l-header{
 position: fixed;
     top: 0;
 z-index: 1000;
 width: 100%;
 }
 }

デフォルト・ライト共通の調整CSS

/*カテゴリー説明部分高さ調整*/
.categoryDescription{
margin-top:99px;    
}
@media only screen and (max-width: 767px){
.categoryDescription{
margin-top:50px;    
}
}
/*各記事タイトル高さ調整*/
.singleTitle{
margin-top: 100px;
}
@media only screen and (max-width: 767px){
.singleTitle{
margin-top:50px;    
}
}
.siteTitle__sub {
    color: white;
    font-size: 0.4rem;
    font-weight: 100;
}

解説

まず、position:fixedで一番上のタイトルが入ったメニューと、その下の検索バーがあるところを固定します。

position:fixedするとdiv要素の高さがなくなるので、メインコンテンツ部分のmargin-topを調整して表示範囲を調整する、という具合です。

スマホはメディアクエリで、ウィンドウ幅767px以下の時にのみ対応させています。

本日のまとめ

ワードプレステーマLion Mediaをお使いの方向けに、ヘッダーを固定するCSSをご紹介しました。

クラス名が変わるだけで他のテーマでも考え方は全て同じです。

スマホでは特に回遊率が変わってくると思います。

目指せ離脱率0%!

無理か(笑)

カテゴリ名に関する戦略とカスタマイズ方法はこちら。

デザインもブログも、大事なのはおもてなし

見た人は何を求めているのか、何をしたら喜んでもらえるのか。ですね。

コンテンツに集中してもらうために、記事ページをバイラルメディア風にするカスタマイズもおすすめ。

それではまた。

ヤマダ

この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。
ABOUT ME
ヤマダカイト
都内メーカーでweb・グラフィックデザイナーとして働きながら、リンカイ-デザインという屋号でデザインしたりブログ書いています。デザインを使って何ができるのか、を考えるのが得意です。 将来は複業家として東京×長崎の二拠点生活をします。 詳しいプロフィールはこちら

POSTED COMMENT

  1. 山のお兄さん より:

    残念ながら出来ずでした・・・
    なんででしょう・・・

    • kaito68 より:

      ご覧いただきましてありがとうございます。
      もしよろしければ、ご状況を教えていただければ幸いです。

      • なかなか上手くいかないものですね・・・
        一つずつ数値を変えて、キャッシュクリアしてはチェックしていますが、、、
        もしよろしければ御指南いただけると幸いです。

        • kaito68 より:

          ブログ拝見させていただきました。
          現在ご使用されているテーマはおそらくsimplicityかと思われますが、これからLION MEDIAに変更されるご予定でしょうか。
          もしよろしければ現在のご状況と、どのようにされる予定なのかをお教えいただければ、お力になれるかもしれません。
          よろしくお願いいたします。

          • 山のお兄さん より:

            お返事遅くなりました。
            これはすでにLION MEDIAなんです。
            記事をアップしつつ、少しずつ手を入れていこうかなというタイミングで、まだ具体的な予定などはこれから考えるところでした。
            ひとまずヘッダー固定がうまくいっていないので、そこからですね・・・

          • kaito68 より:

            お返事ありがとうございます。
            ご質問者様の個人的な内容も含まれていたため、直接メールさせていただきました。
            よろしくお願いいたします。

  2. 山のお兄さん より:

    その後できておりました。
    ありがとうございました!

    • kaito68 より:

      良かったです!
      キャッシュが残っている場合などは、⌘+shift+Rで再読込すると反映されるかと思います。
      お試しください。
      今後ともリンカイデザインを、よろしくお願いいたします(^o^)

  3. K より:

    ヘッダーを固定すると、ページ上部が見切れてしまうのですがどこがおかしいのでしょうか?

    • kaito68 より:

      おそらく、
      .singleTitle {
      /* margin-top: 100px; */
      }
      がCSSで読み込まれていないせいかと思います。
      一度ご確認ください!

  4. ぼっちバイカー より:

    LionMediaテーマ関連で参考になる情報をありがとうございます。
    一点だけもし可能であれば教えていただきたいのですが、色がついた部分だけを固定し、2段目(検索やカテゴリ部分)はスクロールで流れるようにしたく、”extra”の部分をいじっているのですがうまく行きません。もしすぐに解決できそうであればご教示いただけると大変助かります!!

    • kaito68 より:

      ぼっちバイカーさん、ご覧いただきありがとうございます!
      上記の件、
      /*PCグローバルメニュー固定*/
      .t-light .l-extra{
      position: fixed;
      }
      の position: fixed;をCSSから削除すればできるかと思います。
      お試しくださいませ!

      • ぼっちバイカー より:

        返信が遅れ申し訳ありません。まさか返信いただけるとは思わず、感謝いたします!ありがとうございました。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です