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

この記事は 2 分くらいで読めます
 

こんにちは。
豆太です。

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

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

  • 親テーマとして、WordPress公式テーマのTwenty Twelveを使っています。ここでは子テーマのstyle.cssにコードを追記します。(他テーマにも応用できます。)
  • WordPressのメニューには、ダッシュボード画面から「副項目」と呼ばれるサブカテゴリーを設定することが出来ます。このCSSのみでは階層化には対応していません
  • 筆者は全くのプログラミング初心者です。見よう見真似でここまでいじってみました。下記のCSSコードの中にも、勉強中で理解しきれていない部分もあります。一緒に勉強していきましょう!

スポンサーリンク

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

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

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

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

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

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

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

困ったときの親テーマ

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

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

こうなりました!ぜひ真似してみて下さい!!

スポンサーリンク

.コメントをどうぞ