コロナに負けるな!ステイホームでブログを書きます!

【Simplicity】グローバルメニューを上部に固定化するカスタマイズ【備忘録】

特別理由はなく、思い立ってカスタマイズしたことを、記録します(笑)。

Simplicityのテーマでは、元々はヘッダーの下にメニューバーが固定されていて、下にスクロールすると上に消えて行きます。

これに対して、メニューバーがついてくるタイプのブログをよく目にしていて、どうやったらそうなるかなーって思っていたらドンピシャ分かりやすい解説が載っているところを見つけたので書かれている通りやりました。

3箇所の記述をカスタマイズ

したことは3つ。

「header.php」、「style.css」、そして、「mobile.css」をカスタマイズしました。

とっても簡単です。

header.php

まずはheader.phpから下記の記述を移動させます。

現行のバージョンでは、</header>の真下にあるはずですが、<!– header –>のすぐ下に移動させます。

カット&ペーストですね。

style.css

続いて、スタイルシートに下記を足します。場所はどこでもオッケー。

簡単簡単。

mobile.css

ラストはmobile.css内に下記をぶち込めば完了。

場所はどこでもオッケー。

ポイント

非常にシンプルな作業ですが、ポイントがあって、カスタマイズ経験ある方にはいうまでもないですが、カスタマイズ前にバックアップを取ることと、header.phpは丸ごとコピペで子テーマである「Simplicity child2」に複製し、そちらの中身をいじること。

そうしないと、バージョンアップ時におかしくなる可能性があるからですね。

必ず子テーマに「header.php」を複製の上、そちらをカスタマイズ!

そこさえちゃんとすれば、10分もかからず作業は完了するはずです!

場合によってはこのカスタマイズは意味のないブログもあると思いますが、逆に、ずっと上部にメニューを表示させるメリットがあるデザイン(メニュー構成)の場合もあるのでSimplicityは好きだけど、メニューが追いかけてこないのがーって思っていた人は是非やってみて下さい!

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました