WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER3」のナビゲーションメニューをカスタマイズ

      2015/06/01

STINGER3

出典:http://stinger3.com/

当ブログは、検索エンジン最適化(SEO)に強いと言われているWordPressテーマ「STINGER3」を使用しています。

今回は、その「STINGER3」のナビゲーションメニューが見やすいように、少しかっこよくスタイルシートを設定したいと思います。

なお、今回のバージョンは以下です。

  • WordPress 3.9.1
  • STINGER3_ver20140327

スポンサード リンク

ナビゲーションメニューのカスタマイズ

まずは、デフォルトのナビゲーションメニューを確認する。

デフォルトでは、このように表示される。

STINGER3 メニュー

スタイルシートの「style.css」ファイルで、ナビゲーションメニューの箇所は以下。

今回は、以下のように変更した。

変更・追加した箇所は、マーカーの行です。

この変更でやっていることは、各項目の幅を「width」で指定し、「margin-left」、「margin-right」に「auto」を指定し、中央揃えにしている。

各項目の幅は、表示させたい項目数に応じて微調整をする。

また、背景色、文字色を変更した。

結果、シンプルですがこんな感じです。

STINGER3 メニュー

以上です。

参考サイト

STINGER3のメニューをカスタマイズする | 株式会社シスアナコム
横並びリストを中央寄せにする – CSSテクニック – acky info

 - STINGER3