【STINGER7】メニュー幅や高さのカスタマイズ方法

stinger7-2

先日、ブログテーマを「STINGER7」へ変更したgoziです!

レイアウトがかなり崩れているので見づらいかと思いますが、カスタマイズを行ないながら実況を中継していこうと思います。

スポンサーリンク

メニューの幅や高さをカスタマイズする方法

「外観」→「メニュー」でメニューを設定することができますが、メニュー項目が多いとどうしても2列になったりします。

menu1 2

当ブログのメニューの項目は9つと多めのため、初期設定の場合だと2列のメニュー表示になりますが、幅を狭く統一することによって、1列にすることが可能です。

幅をカスタマイズ

今回は、stinger7childのstyle.cssに下記コードを書きます。

/*media Queries PCサイズ—-*/ /*ナビゲーション関連——*/ は書かなくても問題はありませんが、わかり易くするために書いています。

@media only screen and (min-width: 781px) {} が必要になります。
(サイズ分岐が781pxの場合)

menu2 2

メニューが9つだと115pxでほぼ均一になります。
メニューの項目数によって、widthを変更して下さい。

高さをカスタマイズ

1列になったらなったで、なんか高さが低いような…と思うことがあるかも知れません。
安心して下さい!高さを履いてw…もとい、高さも変更できます。

こちらも、先程と同じようにstinger7childのstyle.cssに下記コードを書きます。

先程のコードにheightを追加したのみです。

menu4 2

高さは広がりましたが、なんか下が空き過ぎている感じがしますので、少し文字側を調整します。

文字側の高さを調整

先程のコードに、リンクの高さを調整するコードを追加したのが下記のコードです。

上記コードで表示されるメニューは以下のようになります。

menu3 2

個人的にはこんな感じが好みです。

あとがき

今回は、親テーマstinger7のstyle.cssを書き換えればてっとり早いのですが、子テーマを利用してカスタマイズしました。

親テーマstinger7のstyle.cssには、

とあり、上記コードにないもの(padding-top)や、上記コードを変更したいもの(width、height)だけを子テーマのスタイルシートに入れてカスタマイズしてみました。(書かない部分は親テーマのスタイルシートが適用されます。)

こんな感じにちょこちょこっと、子テーマのスタイルシート等を利用して今後もカスタマイズしていきたいと思います。