wordpress

WordPress

【WordPress】STINGER Plusのメニューバーをカスタマイズしてみた

更新日:

本ブログは、WordPressで作成していて、テーマは「STINGER Plus」を使用しています。

※現在は「AFFINGER4」となり有料化され、無料ダウンロードは出来ないようです。

今回メニューバーの見た目に少々気になる点があったため、簡単なカスタマイズを行ってみました。

STINGER Plus メニューバーカスタマイズ前

メニューバーの各項目が左寄せになっているため、「お問い合わせ」の右側にスペースが出来てしまっていることが気になり、調整することにしてみました。

 

STINGER Plus メニューバーカスタマイズ後

最初は左寄せを止めてセンタリングして・・・などとあれこれ考えてみたのですが、結局一番手間のかからない簡単な方法を取ることにしました。

単純に、各項目の幅を広く取るように設定を変えただけです。

カスタマイズ前と比較すると、偏りがなく均一に配置されるようになりました。

 

STINGER Plus メニューバーカスタマイズ方法

対象ファイル

/wp-content/themes/stingerplus/style.css

 

私はサーバーに置いてあるファイルをテキストエディタで編集して直接触っていますが、

WordPressの管理画面から編集する場合は、外観→テーマの編集→スタイルシート(style.css)を選択します。

 

カスタマイズ方法

▼before

style.cssの末尾に追記します。

1行目と2行目の間に、記述(コピペ)していきます。

 

▼after

3〜6行目をコピーし、ペーストします。

3行目はコメントですので、/* から */ の間は、自分が後から見た時に分かりやすいよう、自由にコメントを記述しておくと良いでしょう。

4行目はメニューバー内の各項目に対しての設定を示しています。

5行目で、実際に各項目の幅を指定しています。デフォルトではwidth:160px;に設定されていましたが、今回項目5つがぴったり収まるサイズのwidth:208px;に調整しました。

CSSは上から順に読み込まれるので、デフォルトの160pxの記述より後ろに208pxの記述を追記することで、208pxが上書きされて適用されることになります。

デフォルトの数値を直接修正することも可能ですが、元のソースには手を加えたくなかったため、末尾に追記しています。

保存してもスタイルが反映されない場合には、ブラウザのキャッシュをクリアしてから再読込してみてくださいね。

広告

広告

-WordPress
-

Copyright© おうちIT , 2017 All Rights Reserved Powered by AFFINGER4.