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

STINGERWordPress
この記事は約3分で読めます。

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

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

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

  • WordPress 3.9.1
  • STINGER3_ver20140327

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

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

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

STINGER3 メニュー

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

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

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

/*---------------------
ナビゲーション
-----------------------*/

#navi-in {
	background-color: #666666;
}
#navi-in li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 10px;
	padding-bottom: 10px;
}
#navi-in li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
#navi-in li a {
	float: left;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	width: 121px;
	margin-left: auto;
	margin-right: auto;
}
.menu-navigation-container {
	overflow: hidden;
}
#navi-in li a:hover {
	text-decoration: underline;
}

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

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

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

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

STINGER3 メニュー

以上です。

参考サイト

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

WordPress
えふめん

大阪在住、30代。
業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。

えふめんをフォローする
\よかったらシェアしてね/
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました