ヘッダーナビゲーションメニューにボタンを追加する

ヘッダーナビゲーションメニューはWordPressであり、多くの場合、使用されていないWebサイトの不動産です。 ほとんどのWebマネージャーはナビゲーションのみに使用しますが、検索バーやプロモーションコンテンツを追加することもできます。 ただし、これを効果的に行うには、ヘッダーナビゲーションメニューにボタンを追加することを検討する必要があります。 この記事では、そうすることが有益である理由と、それを適切に行う方法について詳しく説明します。

ヘッダーナビゲーションメニューにボタンを追加する利点

ヘッダーナビゲーションメニューにボタンがあるのは些細なことのように思えるかもしれません。 結局のところ、標準のハイパーリンクとボタンの間に大きな違いはないようです。 実際には、プレーンテキストの代わりにボタンを使用すると、驚くべき結果が得られる可能性があります。 これは主に、人間の注意がどのように機能するか、およびボタンがどれほど注目に値するかによるものです。

ヘッダーナビゲーションメニューを通常どのように体験するか

ヘッダーナビゲーションメニューは通常、人々が気付く2番目のものです。 Webサイトを適切に設計し、ナビゲーションメニューを適切に追加した場合は、投稿のタイトルを最初に視聴者の目を引く必要があります。 しかし、その後、何が利用できるかを確認するために、彼らの視線は自然にナビゲーションメニューに向かうはずです。 彼らが現在のページにとどまることに決めたら、そうしてください。 ただし、Webサイトに他の関心のあるポイントがある場合は、ヘッダーナビゲーションメニューに明確に表示される必要があります。

結局のところ、あなたの目標はあなたのウェブサイトにできるだけ長く人々を保つことであるべきです。 また、わかりやすいメニューを用意しておくと非常に役立ちます。 では、これらすべてのボタンはどこにあるのでしょうか。

ボタンを追加する利点

ボタンを追加する主なアイデアは、重要なことを強調することです。 ヘッダーメニューには興味深いリンクが含まれていますが、すべてが同じ重要性を持っているわけではありません。 いくつかは、読書に役立つシンプルなナビゲーションツールです。 また、他のコンテンツはより直接的なプロモーションコンテンツであり、読者をコンバージョンに導くのに役立ちます。 後者のコンテンツに関しては、ボタンを選択する必要があります。 自分に合った方法で変更できるので、自然に目立ち、注目を集めます。 したがって、顧客がWebサイトをたどる過程を理解していれば、ボタンを使用して簡単にボタンを使用して、ソーシャルメディアに描画したり、コンバージョンを成功させたりすることができます。

カスタマイズのヒント

ボタンをカスタマイズして適切な効果を得るには、少し注意が必要です。 一方では、Webページの外観を台無しにするので、あまり目立たせたくないでしょう。 しかし、彼らが注目を集めないので、あなたはそれらがあまり混ざり合うことも望まないでしょう。 ですから、あなたが見つける必要があるのは、口で言うほど簡単ではない中間点です。 私たちのアドバイスは、ヘッダーナビゲーションメニューのボタンをうまく使用しているWebサイトを探し、それらがどのように色を利用しているかを確認することです。 ボタンの形、輪郭、フォント、色を変更できることを忘れないでください。 したがって、この多様性をカスタマイズに使用して、有利に活用してください。 理想的には、あなたはあなたのウェブサイトの全体的な美学によく合うスタイルを見つけるでしょう。 注目を集めながら。

ヘッダーナビゲーションメニューにボタンを追加する方法

幸い、WordPressヘッダーナビゲーションメニューにボタンを追加するのは驚くほど簡単です。 まず、ナビゲーションメニューに移動し、ボタンに変換するリンクを追加する必要があります。 これは、 [外観]->[メニュー]ページで実行できます。 それが終わったら、上部にある[画面オプション]ボタンをクリックします。 そうすることで、いくつかのオプションを含むフライダウンメニューが表示されます。 この場合、 「CSSクラス」オプションをチェックするだけで済みます。

これを実行したら、下にスクロールして、ボタンに変換するメニュー項目を展開します。 そこで、アイテム設定に新しいCSSクラスオプションが表示されます。 その中に、クラス名を入力できます。 理論的には、適切と思われる方法でクラスに名前を付けることができます。 ただし、この記事では、理解しやすいようにクラス名に「menu-button」を付けます。 名前を入力したら、[メニューを保存]ボタンをクリックすることを忘れないでください。

CSSコードの追加

カスタムCSSクラスを追加した後、CSSコードの追加に進むことができます。 ここで、 [外観]-> [カスタマイズ]に移動して、WordPressテーマカスタマイザーを起動する必要があります。 そうすることにより、あなたはあなたのウェブサイトのプレビューとテーマ設定のリストを得るでしょう。 あなたがする必要があるのは、[追加のCSS]タブをクリックして展開することです。 ここに、カスタムCSSコードを追加できるボックスが表示されます。 手始めに、次のコードを貼り付けることをお勧めします。

.menu-button {
背景色：＃eb5e28;
border：1px;
border-radius：3px;
-webkit-box-shadow：1px 1px 0px 0px＃2f2f2f;
-moz-box-shadow：1px 1px 0px 0px＃2f2f2f;
ボックスシャドウ：1px 1px 0px 0px＃2f2f2f;
}
.menu-button a、.menu-button a：hover、.menu-button a：active {
color：#fff！important;
}

CSSコードを追加すると、テーマカスタマイザーがそれをWebサイトのプレビューに適用します。 これにより、行った変更を確認できます。 そして心配しないでください、変更は永続的ではありません。 必要に応じて、CSSを試して、何ができるかを確認してください。 変更を保存するには、[公開]ボタンをクリックします。

これで、ヘッダーナビゲーションメニューにボタンを追加できました。

最終的な考え

すべてを考慮すると、ボタンはヘッダーメニューへの優れたアドオンになる可能性があります。 しかし、あなたが正しいデザインを見つけることが最も重要です。 実際、人々がボタンの追加を避ける主な理由の1つは、ボタンをWebサイトのデザインに合わせることができないことです。 行き詰まった場合は、プロのグラフィックデザイナーに相談して、彼らの意見を尊重することを強くお勧めします。 ご覧のとおり、デザインを理解したら、ボタンを追加するのにそれほど時間はかかりません。