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

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

次のようなサイドバーのメニューから、「Sponsor」の項目を画像に変えてみましょう。

そのためには、まずそのメニューの要素を調べる必要があります。 Googleのクロムの場合は、マウスの右ボタンを押して、コンテキストメニューから「条件の確認」を選択し、その項目の要素を確認することができます。

この例では、要素が＃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を使用して メニュー項目の前にアイコンを追加する方法とプラグインを使用してアイコンを追加する方法を説明します。