WordPressテキストメニュー項目を画像に変更する（CSSを使用）

この記事では、少し面白い（？）トピックを取り上げてみようとします。 テキストにされたメニュー項目を画像に変える方法をCSSで実装する方法を説明します。

次のサイドバーメニューの「Sponsor」項目を画像に置き換えてみましょう。

これを行うには、まずそのメニューの要素を調べる必要があります。 Google Chromeの場合は、右クリックしてコンテキストメニューから「要素チェック」を選択して、そのアイテムの要素を確認できます。

この例では、要素が＃menu-item-74ですね。 さて、次のようなCSSコードをCSSスタイルシートに追加します。 （WordPressから CSSスタイルシートにコードを追加する方法は、こちらを参照してしてください。）

#menu-item-74 a {
display:block;
height:29px;
width:119px;
padding:0px;
margin-left:6px;
outline:none;
text-indent:-9999px;
background-image:url('http://www.abc.com/path_of_the image/icon1.jpg'); background-position:0 0;
}

上記の高さ、幅、padding、margin、画像ファイルのパスは、適切に修正してください。 だから、どのようにされたかましょうか？

図のように、テキストが上、指定した画像に変えました。 そして、マウスを上げれば、リンクも正常に動作します。

マウスを上げれば絵が変わることも可能です。 以下のようなコードを追加します。

#menu-item-74 a:hover {
background-image:url('http://www.abc.com/path_of_the image/icon2.jpg''); background-position:0 0;
}

以上でプラグインを使用せずに、簡単なCSSを使用してテキストにされたメニュー項目を図に変える方法を説明しました。 次に、CSSを使用して メニュー項目の前にアイコンを追加する方法とプラグインを使用してアイコンを追加する方法を説明します。