Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

wordpress

wordpressのメニューをカスタマイズする方法「コピペ可能」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはwordpressのメニューを

カスタマイズしたいと思ってませんか?

 

この記事ではメニューをカスタマイズし

画像を表示させる方法、またメニュー全体を

cssでカスタマイズする方法を書いてます。

 

 

なのでこの記事を読めばあなたは、

メニューに画像をつけたり色や幅を変えたり

といったカスタマイズができるでしょう。

 

ということでwordpressのメニューを、

カスタマイズしたいならば、

このままおスクロールし読みください。

 

スポンサードサーチ

wordpressのメニューをカスタマイズし画像をつける方法

 

メニューに画像をつけるには、

cssの擬似要素で画像をつけれます。

 

ちなみにコードですが、

以下をstyle.cssに書けばokです。

 

 

.menu-item > a::before {

content:url(“ここに画像ファイル名.拡張子”);

margin-right: px; ←画像とメニューの間を調整したい場合入力

}

 

(imageフォルダに画像を入れてる場合は、

image/画像ファイル名.拡張子にしましょう。)

 

 

理由ですがメニューは自作してない場合、

自動でタグが吐き出されまして、

imgタグなどを挿入できません。

 

ですがcssの擬似要素を使うと、

タグを擬似的に入れることができ、

メニューに画像を表示させることができます。

 

 

具体的には以下のような感じです。

wordpressのメニューをカスタマイズし画像を表示

 

一応記述例があったほうがわかりやすいと

思うので、上記を例に出すと、

以下のように書いてます。

 

.menu-item > a::before {

content:url(“squirl.png”);

}

 

上記で画像が表示されてます。

 

 

なのであなたが表示したい画像ファイル名を

入れて、それをテンプレートのstyle.cssに

書いて保存すればOKです。

 

ちなみにcssを書くには、

管理画面>外観>テーマの編集>style.css

で変更可能です。

 

*cssをいじるときは、元々のstyle.cssの

記述をコピーしてパソコンに保存しとくことを

お勧めします。

 

メニューごとに別の画像を表示したい場合

 

また上記のcssを書くと、

全てのメニューに同じ画像が表示されます。

 

それぞれのメニューに別々の画像を

つけたい場合は、

 

外観>メニューの画面の上にある、

表示オプションでcssクラスにチェックをつけ、

 

wordpressのメニューのカスタマイズ用にクラスをつける

 

以下の画像のcss class(オプション)のとこに、

独自のクラス名をつけましょう。

 

wordpressのメニューのカスタマイズ用にクラスをつける

 

であとは、そのクラスに対して、

擬似要素で画像を表示させれば、

別々の画像を表示できます。

 

 

スポンサードサーチ

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のメニューの追加方法や、

階層にするなど、そちらの情報を知りたい場合は、

以下の記事にまとめてるので、ご覧ください。

 

wordpressのメニューに関する情報をまとめました

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-wordpress


スポンサードサーチ

関連記事

no image

wordpressの画像のurlを取得する方法

どうも、チャーさんです。 あなたはwordpressの画像のurlを取得する方法を、 探していますか?   この記事では、wordpressの画像のurlを取得し、 表示する方法を書いていま …

no image

wordpress popular postsでまだデータがありませんが解決し人気記事が表示された方法

どうも、チャーさんです。   あなたはwordpress popular postsが、 動作せず困っていませんか?   ちゃんとアクセスはあるのに、 まだデータがありません。と表 …

no image

wordpressで右クリックを禁止する方法「簡単です」

どうも、チャーさんです。   あなたはブログ上での、 右クリックを禁止したいと 思っていませんか?   せっかく書いた記事をコピペされたくない、 そう思っていませんか? &nbsp …

no image

wordpressのエディターを前のに戻す方法

どうも、チャーさんです。   あなたは、ワードプレスをインストールしたら、 投稿のエディター画面が今まで使ってたのと 違うやつになっていて、困っていませんか?   この記事では、そ …

no image

wordpressで一覧へ戻るを記事に表示させる方法

どうも、チャーさんです。   あなたはwordpressで記事に 一覧へ戻るを表示させたいが、 urlを直接かく方法以外を探していませんか?   この記事では、phpとwordpr …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

ワードプレスの管理バーを非表示にする手順

どうも、チャーさんです。   あなたは、ワードプレスの管理バーを、 非表示にする方法を探していませんか?   ワードプレスの上の黒いバー(管理バー)が、 重なって困る。。と思ってい …

no image

wordpressの記事ページをカスタマイズする方法

どうも、チャーさんです。   あなたはwordpressの記事ページ、 (投稿で書いて公開したら出てくるページ) をカスタマイズしたいと思ってますか?   この記事では、wordp …

no image

ドロップダウンメニューが動かない問題を解決した方法「wordpress」

  どうも、チャーさんです。   あなたはwordpressのドロップダウンメニューが、 動かないと悩んでいませんか?   この記事では、ドロップダウンメニューが、 ある …

no image

wordpressのメニューに関する情報をまとめました

どうも、チャーさんです。   この記事ではwordpressのメニューに関する情報 例えばメニュー追加方法や、階層化、カスタマイズなど、 必要な情報を網羅してまとめてみました。   …

no image

wordpressのメニューを階層にしたいなら読んでください。

どうも、チャーさんです。   この記事ではwordpressのメニューを、 階層化する方法、   また、階層化できない場合の対策 (サイトに階層メニューが表示されない) を書いてい …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

wordpressで現在表示ページのメニューにcurrentクラスをつける方法

どうも、チャーさんです。   あなたはwordpressのメニューにcurrentという、 クラス名を現在表示してるページのメニューにだけ、 つける方法を探していませんか?   こ …

no image

wordpressのショートコードの作成方法と使い方

どうも、チャーさんです。 あなたはショートコード(wordpressの)ってなんだ? と思ってませんか?   この記事では、wordpressの ショートコードとは何か、そして ショートコー …

no image

wordpressにメニューを追加する方法「解説画像つき」

どうも、チャーさんです。 あなたはwordpressのメニューを追加する 方法を探していますか?   この記事ではwordpressのメニューを追加する 方法を書いてますので、あなたがこの記 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。