スクロールしてもヘッダーを固定表示する方法(LION MEDIA)(未完)

スクロールしてもヘッダーを固定表示する方法(LION MEDIA)(未完)

LION MEDIA使い始めてようやく細かい設定確認してますけどワードプレスの無料テーマで歴代最強かも
これだけ管理画面からカスタマイズできる高機能なテーマが無料なのはありがたすぎる

とはいえCSSレベルではちょこちょこ変更してます。

今回変更したいなと思ったのはヘッダー部分の固定表示。
画面をスクロールするとトップページへの動線が無くなりますからね。
ブラウザバックでもいいけど回遊性を上げたいのでちゃんと対応します。
ちなみにフロート的な追従型じゃないです。
スタイルシートでガチっと固定します。

まずはpositionプロパティで値をfixedにすれば固定できるんですけどね。
どの要素にあてるとか他のデザインの微調整とか確認するために
Chromeの検証ツールとFireFoxの開発者ツールでセコセコ調査してました。
どっちも標準機能なので右クリックかF12ボタンで起動します。

そして辿り着いたのが
「賢人に頼る」
ということ

こちらのサイトの内容を参考にさせていただきました。
丸々コピーしたので参考というか引用というか・・・

こちらのヤマダカイトさんがおっしゃるように子テーマのCSSに記述しましょう。
LION MEDIAのデザインにダークとライトがあることも今知りましたが当サイトは特に変更した記憶が無いのでデフォルトのダークなんでしょう。

そのまんま拝借しました。
ライトをご利用のかたは引用元のサイトを参照してください。

/*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%;
}
}

これで完成

LIONMEDIAヘッダー固定表示
LIONMEDIAヘッダー固定表示

と思ったらGoogleの広告(AdSense)で上書きされるのか・・・

なるほど、ここまで見越してLIONMEDIAさんはヘッダー固定表示にしてないのかもね。

LIONMEDIAヘッダー固定表示にしたけど広告で上書き
LIONMEDIAヘッダー固定表示にしたけど広告で上書き

フッターのほうの「Back to Top」を固定にするか・・・
いや、AdSenseが下部に表示されたら同じことか。
んー、こりゃ解決方法無いわ。

引き続き検討!

WordPressカテゴリの最新記事