どうも、チャーさんです。
あなたはwordpressのメニューを
カスタマイズしたいと思ってませんか？
この記事ではメニューをカスタマイズし
画像を表示させる方法、またメニュー全体を
cssでカスタマイズする方法を書いてます。
なのでこの記事を読めばあなたは、
メニューに画像をつけたり色や幅を変えたり
といったカスタマイズができるでしょう。
ということでwordpressのメニューを、
カスタマイズしたいならば、
このままおスクロールし読みください。
スポンサードサーチ
wordpressのメニューをカスタマイズし画像をつける方法
メニューに画像をつけるには、
cssの擬似要素で画像をつけれます。
ちなみにコードですが、
以下をstyle.cssに書けばokです。
.menu-item > a::before {
content:url(“ここに画像ファイル名.拡張子”);
margin-right: px; ←画像とメニューの間を調整したい場合入力
}
(imageフォルダに画像を入れてる場合は、
image/画像ファイル名.拡張子にしましょう。)
理由ですがメニューは自作してない場合、
自動でタグが吐き出されまして、
imgタグなどを挿入できません。
ですがcssの擬似要素を使うと、
タグを擬似的に入れることができ、
メニューに画像を表示させることができます。
具体的には以下のような感じです。
一応記述例があったほうがわかりやすいと
思うので、上記を例に出すと、
以下のように書いてます。
.menu-item > a::before {
content:url(“squirl.png”);
}
上記で画像が表示されてます。
なのであなたが表示したい画像ファイル名を
入れて、それをテンプレートのstyle.cssに
書いて保存すればOKです。
ちなみにcssを書くには、
管理画面>外観>テーマの編集>style.css
で変更可能です。
*cssをいじるときは、元々のstyle.cssの
記述をコピーしてパソコンに保存しとくことを
お勧めします。
メニューごとに別の画像を表示したい場合
また上記のcssを書くと、
全てのメニューに同じ画像が表示されます。
それぞれのメニューに別々の画像を
つけたい場合は、
外観＞メニューの画面の上にある、
表示オプションでcssクラスにチェックをつけ、
以下の画像のcss class(オプション)のとこに、
独自のクラス名をつけましょう。
であとは、そのクラスに対して、
擬似要素で画像を表示させれば、
別々の画像を表示できます。
スポンサードサーチ
wordpressのメニューをcssでカスタマイズするには
でメニューに画像をつけるだけでなく、
色や幅など変えるなどのカスタマイズをしたいなら、
以下のcssをstyle.cssに書き込みましょう。
.menu-item {
background: ; ←ここでメニューの背景色の指定
margin: px; ←ここでメニューの外側のスペースを調整
width: px; ←ここでメニューの幅を指定
height: px; ←ここでメニューの高さを指定
}
.menu-item > a {
color: ; ←ここでメニューの文字色を変更
}
それぞれの項目の : と ; の間に
あなたが指定したい値を入れればokです。
例えば背景色を青色にしたいなら、
background:blue;など。
で、理由ですが、
wordpressのメニューはテンプレートを
使っていれば、だいたいメニュー用の関数で出力してます。
(wp_nav_menu()というやつ)
でこちらですがソースコードが自動で出力され、
liタグにmenu-itemというクラス名がついてます。
なので、上で紹介したcssを記述すれば、
だいたいのケースで機能します。
いやいや、でも自作してる場合とか無理でしょ？
とあなたは思ったかもしれませんがその通りです。
wordpressのメニューを
自作していたり、クラス名が違う場合は、
上で紹介したcssでは機能しません。
そんなときは、ちょっと一手間ですが、
デベロッパーツールを使い、
メニューのhtml構造とクラス名を調べ、
それに対してcssを書いていきましょう。
スポンサードサーチ
まとめ
それではまとめです。
wordpressのメニューのカスタマイズで画像を
表示するには擬似要素を使いましょう。
そして、メニューの色や幅などカスタマイズ
したいならば、
.menu-item {
background: ; ←ここでメニューの背景色の指定
margin: px; ←ここでメニューの外側のスペースを調整
width: px; ←ここでメニューの幅を指定
height: px; ←ここでメニューの高さを指定
}
.menu-item > a {
color: ; ←ここでメニューの文字色を変更
}
上記のcssそれぞれに好きな値をいれて
style.cssに追加しましょう。
またそもそもwordpressのメニューの追加方法や、
階層にするなど、そちらの情報を知りたい場合は、
以下の記事にまとめてるので、ご覧ください。
それでは、読んでもらってありがとうございました。
チャーさん
