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

この記事は約350秒で読めます。

シェアしてねっ!

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

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

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

グローバルナビメニューの位置をスクロールでヘッダー最上部に固定—Simplicity2をカスタマイズ中— | みてみた
グローバルナビメニューの位置をスクロールでヘッダー最上部に固定する方法。jQuery必要なしで簡単に。前回に引き続き、ヘッダー廻りのカスタマイズの備忘録でございま...

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

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

TwitterでLeo Miyanagaを

シェアしてねっ!

PR
気軽にコメントください!
書いてる人
シアトル生まれ、大阪育ち。第一言語は大阪弁。現在は日米行ったり来たり。EXSでは、留学や国際交流プログラムの企画を軸にキャリア支援、ライフプランニング事業を展開。フォトグラファー&心理家としても活動中。大阪に写真ギャラリーあり。主に風景と人物を撮っています。撮影依頼気軽にどうぞ!
PR
トップへ戻る