WordPressのメニューバーをCSSでカスタマイズ

この記事では、WordPressのナビゲーションメニューのCSSカスタマイズ方法を公開します！ナビゲーションバー？メニューバー？いろいろ言い方はありますが、つまりここです↓↓

CSSをコピペする前に下記項目に目を通しておくことをおすすめします！

親テーマとして、WordPress公式テーマのTwenty Twelveを使っています。ここでは子テーマのstyle.cssにコードを追記します。（他テーマにも応用できます。）

WordPressのメニューには、ダッシュボード画面から「副項目」と呼ばれるサブカテゴリーを設定することが出来ます。このCSSのみでは階層化には対応していません。

筆者は全くのプログラミング初心者です。見よう見真似でここまでいじってみました。下記のCSSコードの中にも、勉強中で理解しきれていない部分もあります。一緒に勉強していきましょう！

Contents

とりあえずCSSそのまま公開
苦労したこと＝visitedが効かない
困ったときの親テーマ

とりあえずCSSそのまま公開

簡単な補足説明を付け加えました。「とりあえずコピペ　→　不具合がある場合修正」という流れをおすすめします。そうすることで、CSSの理解が自然と深まっていくはずです！

/*ul、つまり順不同のリストですよー*/
.main-navigation ul {
margin: 0; /*余白はゼロ*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

/*liつまり各項目のスタイル決めまーす*/
.main-navigation li a { /*li=リスト項目、a=リンクの意味*/
color: #fff;  /*文字の色*/
font-weight:bold; /*太字*/
line-height: 25px; /*行の高さ*/
font-size: 16px; /*文字の大きさ*/
padding: 4px 10px; /*文字周りの余白*/
text-align: center; /*文字は中央揃え*/
display: block; /*文字周辺の余白含めたblock全体にリンクが付与される*/
background-color: #00c300; /*blockの背景色*/
border-left: 2px solid #fff ; /*blockの左端に線引く*/
border-right: 2px solid #fff ; /*blockの右端に線引く*/
} 

/*リンクの上にカーソルが乗ってるときのスタイル決めまーす*/
.main-navigation li a:hover,
.main-navigation li a:focus {
color: #e6e6e6; /*文字の色*/
opacity: 0.85; /*全体の透明度85%*/
}

/*メニューバーから選択した項目を表示している間のスタイル決めまーす*/
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #fff; /*文字の色*/
background-color: #55acee; /*背景色*/
}

/*メニューを均等に並べる（ここはまだ勉強中！）*/
@media screen and (min-width: 960px) {
.main-navigation ul.nav-menu {
display: table !important;
table-layout: fixed;
text-align: center;
width: 100%;
}
.main-navigation li {
display: table-cell;
vertical-align: middle;
}
}

苦労したこと＝visitedが効かない

メニューバーから選択したページ（例えばカテゴリーの一覧など）が表示されているときのスタイルを変更しようとして

a:visited

という擬似クラスを導入しようと試みました。ところが、全く反映されないのです。。

「visited 反映されない」「visited 効かない」

でググってみたところ、link, visited, hover, activeの順にすることが重要という記事が多数ヒットしました。が、確認修正してもなお、全く反映されないのです。。

困ったときの親テーマ

ググっても分からないときに、僕がいつも見に行くところがあります。それは、親テーマのコードです。そもそも、子テーマを使ったカスタマイズは、親テーマに追加もしくは上書きをしているだけなので、該当箇所のスタイルを指示するコードが親テーマの中に必ずあるんです。それらしき記述を探しました。・・・ありました！

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #fff; /*文字の色*/
background-color: #55acee; /*背景色*/
}

この部分を子テーマにコピペしてcolorとbackgroundを変えてみたところ上手くいきました。そもそもvisitedを使う場面じゃなかったんですね。