ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2016年7月23日| 6のコメント

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

次のようなサイドバーのメニューから、「Sponsor」の項目を画像に変えてみましょう。
Menu item in wordpress
そのためには、まずそのメニューの要素を調べる必要があります。 Googleのクロムの場合は、マウスの右ボタンを押して、コンテキストメニューから「条件の確認」を選択し、その項目の要素を確認することができます。
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入力してアップロードした
    適用なったりするスクロールを下げる元のテキストメニューに出てくるんですよ...ㅜㅜ

    応答
    • こんにちは?

      Avada( https://www.thewordcracker.com/go/avada )は、メガメニューをサポートしています。 その機能を使用すると、サムネイルを使用することができます。

      https://www.thewordcracker.com/wp-content/uploads/2016/11/avada-mega-menu.png

      応答
      • メガメニューオプションが最初からアントヨㅜㅜ https://uploads.disquscdn.com/images/d963f52e3b9662236c906861967032bde30c27a0a6f9c8004122724a256460b8.jpg

      • メガメニューオプションは、最初のレベルのメニュー項目のみ表示されます。

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

WordPress Naver カフェを訪れる

ありがとうございます!