WordPress

【WordPress】「ヘッダメニュー」を作る方法(項目、配色の設定方法)





WordPress はテーマに沿って使い勝手の良いメニューを作成できます。

「メニュー」とは、ページ上部にあるカテゴリメニューのような種類分けです。



実は、「右に付けたり」、「下に付けたり」と色々な位置にお好みに合わせつけることができますが、普通は「上」につけるかと思います。


WordPress でメニューを作る方法


WordPress でメニューを作る方法です。


Step.1 [メニュー] カスタマイズ画面を表示する



WordPress の管理画面から、[外観] → [メニュー] をクリックします。


Step.2 [HOME] メニューを作る



[HOME] メニューとは、「トップページへのリンク」です。(必須じゃないので特に無くてもいいです)

常に「トップページに戻るボタン」を画面上の 目につくところに配置しておくことは直帰率の改善に有効です。



[カスタムリンク] を作成します。


  • URL にトップページの URL を指定します
  • リンク文字列を入力します( 例:"HOME" )

[メニューに追加] をクリックして、メニューを追加します。


Step.3 [カテゴリ] をメニューに追加する



[カテゴリ] をメニューにします。


  • [すべて表示] から、メニューに入れたいカテゴリをチェックします
  • [メニューに追加] をクリックして、メニューを追加します

Step.4 順番を調整する



右側のメニューをドラッグして上下を入れ替えます。


[メニューを保存] をクリックして完成です!


メニューの配色を変える方法


メニューの配色(背景色など)を変える方法です。


■ メニューの配色の基本設定



WordPress の管理画面から、[外観] → [カスタマイズ] → [ [+] メニューのカラー設定] → [PC ヘッダーメニュー] をクリックします。

背景色、ボーダー色などを設定します。


■ マウスホバー(マウスが項目上にあるとき)の背景色を変える方法


マウスホバー時の背景色は CSS に追記して変更します。



WordPress の管理画面から [外観] → [カスタマイズ] → [追加CSS] をクリックします。

追加CSS 画面にて、次のコードを追記します。


header .smanone ul.menu li a:hover{
    background-color: #111111;
}


[#111111] は任意のカラーコードに変更してください。


保存して完成です!


その他のメニュー設定


■ PC のヘッダーメニューの横幅を100%にする


WordPress の管理画面から、[外観] → [カスタマイズ] → [ [+] メニューのカラー設定] → [PC ヘッダーメニュー] をクリックします。

[メニューの横幅を100%にする] をチェックします。


まとめ


WordPress で作成したサイトでは「メニュー」を作ることが多いです。メニューを作る方法です。



  • WordPress の管理画面から、[外観] → [メニュー] で作成します
  • 特定のリンクに遷移する(例:HOME に戻る)、「カテゴリ」リンクなどを設置できます
  • メニューの背景色は WordPress 管理画面上から設定します
  • マウスホバー時の背景色は CSS を追記します


Enjoy!メニューがメニュしてメニュめにゅにゅ♪








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ