ブログ・アフィリエイトで稼ぐ

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でもデザインや日々のことをつぶやいています。
今すぐ副業・複業を始めるなら
福業?副業?

副業・複業を始めるのに必要な、モノ・コト・考え方について書きました。

本で言う目次みたいなイメージのリンク集です。興味のある事柄については、リンクから詳しい記事を見ることができます。

デザイナーに特化した副業についての記事ですので、その他の方にとってはあまり有益ではないかもしれませんが(苦笑)

ブログでマネタイズする方法も書いておりますので、ぜひご覧ください!

デザイナー副業・複業のまとめ記事を今すぐ見る!