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

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

次のサイドバーメニューの「Sponsor」項目を画像に置き換えてみましょう。
Menu item in wordpress
これを行うには、まずそのメニューの要素を調べる必要があります。 Google Chromeの場合は、右クリックしてコンテキストメニューから「要素チェック」を選択して、そのアイテムの要素を確認できます。
element inspector in 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、画像ファイルのパスは、適切に修正してください。 だから、どのようにされたかましょうか?
Sample menu in wordpress
図のように、テキストが上、指定した画像に変えました。 そして、マウスを上げれば、リンクも正常に動作します。

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

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

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

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

6のコメント

  1. メニュー構成が複数のときは、どうでしょうか
    main menu -> ul id="menu-main-menu-1"
    sticky menu -> ul id="menu-abc_a"
    このようになっており、知らせるシンデに avada custom cssに#li id入力してアップロードした
    適用されますが、スクロールすると、元のテキストメニューに戻りました...ㅜㅜ

      1. 回答ありがとうございます^^私のメニューオプションをいろいろだチェックヘノァソならなかったものでした〜stiky menuまあこんなのだチェックを解除し、main menuのみチェックして
        avada - custom cssでお知らせいただいたようにcss適用したところになりました! ありがとうございます。

コメントを残す

*メールアドレスは公開されません。