【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は好きだけど、メニューが追いかけてこないのがーって思っていた人は是非やってみて下さい!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!