stinger グローバルナビゲーションメニューカスタマイズ方法

2014年7月19日

wordPressのテーマ stingerにはデフォルトでも十分なグローバルメニューがついてきますが、気持ち、ちょっと文字が小さいので、大きく変更する方法のご紹介です。

デザインの変更なので、修正するのは”style.css”ファイルだけとなります。
初心者の方は、敷居が高いと感じるかもしれませんが、少しだけコードを子テーマの”style.css”の中に記述すればいいだけなので、まずは習うより、慣れろで実践してみましょう。

変更（追加）するのは、#navi-in と#navi-in li の２つだけです。

CSS #navi-in の変更

header.phpの中を確認すると、120行あたりに

[code]<div id =”navi-in”>[/code]

の記述が見つかりますが、これが有名なCSSのid名の記述方法です。

CSSでは、セレクタという概念でその要素が付けられた名前のみをCSSスタイルを適用させる事が出来ます。

大きくその要素を分類すると、クラスセレクタ、idセレクタの２つです。それぞれ、記述方法にルールがあるので、CSSコードを読み解く時の参考にして下さい。

◆要素名.クラス名

例

[code]<div class=”kuzu”>..</div>[/code]

◆要素名#id名

例

[code]<div id=”navi-in”>..</div>[/code]

何が違うかというと、id表記のものは、１ページに一度しか使用しない場合に使います。難しく考えると１歩も先に進めなくなってしまいますので、最初のうちは、クラスを使うと覚えておいてもそんなに問題はありませんよ。
でも、今回の”navi-in”は、id名で記述されていますで、id表記でCSSを変更していきましょう。

[css]<br />#navi-in{
height: 50px;
border-top: 1px #FFFFFF solid;
border-bottom: 1px #FFFFFF solid;
box-shadow: 0 0 2px #999, 0 0 2px #FFF,0px 0px 18px 2px #FFFFFF inset;
}<br />[/css]

上下の幅を広くし、上下に白線を入れて締まりがよくなるように変更し、更にグラデーションをCSSのみの記述で対応する事が出来ます。