特別理由はなく、思い立ってカスタマイズしたことを、記録します(笑)。
Simplicityのテーマでは、元々はヘッダーの下にメニューバーが固定されていて、下にスクロールすると上に消えて行きます。
これに対して、メニューバーがついてくるタイプのブログをよく目にしていて、どうやったらそうなるかなーって思っていたらドンピシャ分かりやすい解説が載っているところを見つけたので書かれている通りやりました。
3箇所の記述をカスタマイズ
したことは3つ。
「header.php」、「style.css」、そして、「mobile.css」をカスタマイズしました。
とっても簡単です。
header.php
まずはheader.phpから下記の記述を移動させます。
<?php if (is_navi_visible())://ナビゲーションが表示のとき get_template_part('navi');//グローバルナビのためのテンプレート endif; ?>
現行のバージョンでは、</header>の真下にあるはずですが、<!– header –>のすぐ下に移動させます。
カット&ペーストですね。
style.css
続いて、スタイルシートに下記を足します。場所はどこでもオッケー。
#navi { width:100%; position: fixed; z-index: 10; } #site-title { margin-top: 50px; }
簡単簡単。
mobile.css
ラストはmobile.css内に下記をぶち込めば完了。
#site-title { margin-top: 20px; }
場所はどこでもオッケー。
ポイント
非常にシンプルな作業ですが、ポイントがあって、カスタマイズ経験ある方にはいうまでもないですが、カスタマイズ前にバックアップを取ることと、header.phpは丸ごとコピペで子テーマである「Simplicity child2」に複製し、そちらの中身をいじること。
そうしないと、バージョンアップ時におかしくなる可能性があるからですね。
そこさえちゃんとすれば、10分もかからず作業は完了するはずです!
場合によってはこのカスタマイズは意味のないブログもあると思いますが、逆に、ずっと上部にメニューを表示させるメリットがあるデザイン(メニュー構成)の場合もあるのでSimplicityは好きだけど、メニューが追いかけてこないのがーって思っていた人は是非やってみて下さい!