WordPressでメニュー項目をハイライト表示すると、訪問者の注意を重要なページや特別オファーに向けることができます。これにより、ナビゲーションとユーザーエンゲージメントを向上させることができます。
新機能、セール、または重要なアップデートを強調したい場合でも、特定のメニュー項目を目立たせることで、サイトの効果を高めることができます。
例えば、多くのパートナーブランドのメインナビゲーションメニューで価格ページをハイライトし、ユーザーの注意を引いています。このアプローチにより、より多くの訪問者が製品価格を検討するようになり、コンバージョンが増加しました。
この記事では、CSS コードを使用して WordPress のメニュー項目を簡単に強調表示する方法を説明します。
WordPressでメニュー項目をハイライトする理由
ナビゲーションメニューは、サイトの重要なセクションへのリンクのリストです。通常、WordPressウェブサイトの各ページのヘッダーに横長のバーとして表示されます。
ナビゲーションメニューでメニュー項目をハイライト表示することで、最も目立つ行動喚起（CTA）にユーザーの注意を簡単に向けさせることができます。
例えば、ユーザーに価格ページやWordPressブログの特定の投稿を訪問してもらいたい場合、ナビゲーションメニューでその項目をハイライト表示できます。これにより、そのページのトラフィックが増加し、売上が向上する可能性があります。
それでは、WordPressでCSSを使用してメニュー項目をハイライト表示する方法を見てみましょう。
方法1：フルサイトエディターを使用してメニュー項目をハイライトする
ブロックが有効なテーマを使用している場合、古いテーマカスタマイザーの代わりにフルサイトエディターが使用されます。現在のメニュー項目を簡単に強調表示することもできます。
まず、WordPress管理ダッシュボードから「外観 » エディター」ページに移動します。これにより、フルサイトエディターに移動します。
ここで、ハイライトしたいメニュー項目をダブルクリックし、上部にある「設定」アイコンをクリックします。これにより、その特定のメニュー項目の設定がブロックパネルにすぐに開きます。
次に、「詳細設定」タブまでスクロールダウンし、横にある矢印アイコンをクリックして展開します。
これにより、「追加の CSS クラス」フィールドが開きます。ここに highlighted-menu と入力する必要があります。
次に、ページ上部の「保存」ボタンをクリックして変更を保存します。
その後、ハイライト効果のためにテーマに少量のCSSを追加する必要があります。テーマカスタマイザーが見つからない問題を修正するか、コードスニペットプラグインを使用してCSSコードを追加できます。
WPCodeを使用してCSSスニペットを追加する方法
WordPressにCSSを追加するには、市場で最高のWordPressコードスニペットプラグインであり、カスタムコードの追加を安全かつ簡単に行えるWPCodeの使用をお勧めします。
まず、WPCode プラグインをインストールして有効化する必要があります。詳細な手順については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意： WPCode には無料版もあります。しかし、プレミアムプランを取得することで、コードスニペットのクラウドライブラリ、スマート条件付きロジックなどをアンロックすることもできます。
有効化したら、WordPress管理パネルから「コードスニペット » + スニペットを追加」ページに移動します。
ここで、「カスタムコードを追加（新規スニペット）」オプションにマウスカーソルを合わせ、「+カスタムスニペットを追加」ボタンをクリックします。
次に、表示されるオプションのリストからコードの種類として「CSSスニペット」を選択する必要があります。
次に「カスタムスニペットを作成」ページに移動します。ここで、スニペットの名前を選択することから始められます。
次に、次のCSSコードを「コードプレビュー」ボックスにコピーして貼り付けます。
/* Highlighted menu */ .highlighted-menu { background: #d3d3d3; border-radius: 35px; padding: 0px 20px; line-height: 50px; } このようになります：
それが終わったら、「挿入」セクションまでスクロールしてください。
ここでは、「自動挿入」モードを選択するだけで、コードがウェブサイト全体で自動的に実行されるようになります。
次に、ページの上部に戻り、スイッチを「非アクティブ」から「アクティブ」に切り替えます。
次に、「スニペットを保存」ボタンをクリックして設定を保存します。
これで、フルサイトエディターを使用してWordPressでメニュー項目を正常にハイライト表示できました。
CSS コードを追加すると、メニュー項目はこのようになります。
ブロックテーマを使用してテーマカスタマイザーにアクセスする方法
テーマカスタマイザーとFSEテーマを使用したい場合は、以下のURLをブラウザにコピーして貼り付けるだけです。「example.com」を自分のサイトのドメイン名に置き換えてください。
https://example.com/wp-admin/customize.php これにより、ブロックテーマのテーマカスタマイザーが開きます。ここで「追加CSS」タブを展開する必要があります。
ここから、CSSスニペットを「追加CSS」ボックスにコピー＆ペーストします。
/* Highlighted menu */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; } その後、上部にある「公開」ボタンをクリックするだけで設定が保存されます。
方法2：テーマカスタマイザーを使用してメニュー項目を強調表示する
古いWordPressテーマを使用している場合、通常はテーマカスタマイザーがデフォルトで有効になっています。テーマカスタマイザーでメニュー項目をハイライトするのは非常に簡単なプロセスです。
まず、WordPressダッシュボードで外観 » カスタマイズに移動して、テーマカスタマイザーを起動します。開いたら、左側のサイドバーにある「メニュー」タブをクリックします。
ここから、右上にある歯車アイコンをクリックして、高度なプロパティを表示します。
次に、「CSSクラス」ボックスにチェックを入れます。
その後、「メニュー」セクションまでスクロールダウンします。
WordPressメニューが複数ある場合は、ハイライトしたいメニュー項目が含まれるメニューをクリックするだけです。
これにより、強調表示したいメニュー項目を選択できる新しいタブが開きます。例のように「お問い合わせ」でも、価格ページやオンラインストアへのリンクでも構いません。
選択したメニュー項目をクリックして設定を展開します。ここで、「CSSクラス」フィールドをクリックします。
フィールドに'highlighted-menu'と入力するだけです。このCSSクラスを複数のメニュー項目に追加すると、すべてがハイライト表示されます。
次に、テーマカスタマイザーの「追加CSS」タブに移動します。
その後、次のCSSコードをコピーして貼り付けます。
/* Highlighted menu */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; } おめでとうございます！メニュー項目を正常にハイライトしました。
注意：お使いのテーマには、テーマカスタマイザーに「追加CSS」フィールドがない場合があります。ない場合は、テーマ設定を確認してカスタムCSSを追加する方法を見つけてください。見つからない場合は、開発者に連絡するか、WPCodeを使用して追加することを検討してください。
最後に、設定を保存するために、上部にある「公開」ボタンをクリックすることを忘れないでください。
メニュー項目のハイライトをカスタマイズする
メニュー項目をハイライトしたので、CSSコードを調整して、好みの方法でメニュー項目をカスタマイズできます。
例えば、メニュー項目の背景色を変更することができます。
次に、貼り付けたばかりのCSSスニペットで次のコードを探します。
background: #FFB6C1 見つけたら、ピンクのカラーコード番号を好きな色の16進数コードに置き換えるだけです。
background: #7FFFD4; 上記はアクアマリンの16進数コードです。
WordPressサイトにカスタムCSSを簡単に追加する方法」というタイトルのガイドで、ハイライトされたメニュー項目をカスタマイズする方法について、他のアイデアを確認できます。
選択に満足したら、テーマカスタマイザーの「公開」ボタンをクリックするか、WPCode の「スニペットを保存」をクリックして変更を保存してください。
この記事がWordPressでメニューアイコンをハイライトする方法を学ぶのに役立ったことを願っています。また、WordPressナビゲーションメニューのスタイル設定方法に関する初心者向けガイドや、WordPressナビゲーションメニューに画像アイコンを追加する方法に関するチュートリアルも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
重要なページに注目を集めるために、同様の手法を使用してきました。もう一つ付け加えるとしたら、ハイライトされたメニュー項目にわずかなホバーエフェクトを適用したり、ハイライトされた項目にわずかなパルスを加えたりするためにCSSアニメーションの使用を検討することです。これにより、やりすぎずにエンゲージメントを高めることができます。
ところで、素晴らしい投稿です！
イジー・ヴァネック
CSSコードをありがとうございます。検索がずっと楽になりました。WPCodeで完璧に動作します。