今回は、ヘッダーメニューのカスタマイズについてまとめています。
初心者でも簡単にCocoonをカスタマイズすることができるマニュアルは ⇒ こちら ⇐
私のブログでは、WordPressのCocoonのテーマを使用しています。ヘッダーメニューは以下のようなデザインにしています。（青色の部分）
このようにページの上部に表示され、ブログ内の記事に案内しやすくするものが、ヘッダーメニューです。
今回は、私のCocoonヘッダーメニューを簡単に再現できるよう解説しています。是非、参考にしてみてください。
ヘッダーメニューの編集
今回は編集の手順に沿って紹介していきます。
１．メニューを作成する
２．デザインを整える
１．メニューを作成する
ヘッダーメニューを選択
まずはヘッダーメニューの中身について作成していきます。
１．WordPressメニューの「外観」→「メニュー」を選択します。
２．メニュー名に『ヘッダーメニュー』と入力し、メニュー位置の「ヘッダーメニュー」を選択し、「メニューを作成」をクリックします。
３．「メニュー項目を追加」からメニューに並べたいコンテンツを複数選んで、「メニューを追加」をクリックすると、右側に反映されます。
・固定ページ
・投稿
・カスタムリンク
・カテゴリー
・タグ
今回は、ホーム①とホーム②に設定してみました。
５．表示名の変更が終わったら、「メニューを保存」をクリックします。
６．ブログでは、このように表示されます。
サブメニュー（副項目）を選択
Cocoonのデザインでは、ヘッダーメニューの下層に、副項目としてサブメニューを追加することができるので、項目を整理することができます。
サブメニューに変更する場合は、選択したコンテンツを1段下げた位置に並べます。画像のように「ホーム①」の下に「ホーム サブ①」と「ホーム サブ②」を追加してみました。
実際にメニューを見てみると、画像のように「メニュー①」にカーソルを合わせると、サブメニューが表示されるようになります。
以上で、メニューの作成は完了になります。
２．デザインを整える
Cocoon設定を編集することで、ヘッダーメニューのデザインを整えていくことができます。
Cocoon設定で色と幅を変える
「Cocoon設定」→「ヘッダー」タブの内容を編集します。
ページ下部に「グローバルナビメニュー色/幅」という項目でデザインを変更することができます。
→グルーバルナビ色
→グローバルナビ文字色
・グローバルナビメニュー幅
→メニュー幅をテキストに合わせる
→サブメニュー幅 ※文字数に合わせて変更します
デザインの確認
ブログで、自分が求めているデザインに変更されていたらOKになります。記事を書いた後や、リライト後にヘッダーメニューの変更も忘れずに実施しましょう。
モバイル表示板のヘッダーメニューの設定について
今回は、通常のヘッダーメニューのカスタマイズについてまとめましたが、今後モバイル表示版ヘッダーメニューの設定についても紹介していきたいと思います。
その他のカスタマイズについては、初心者でも簡単にCocoonをカスタマイズすることができるマニュアルを参考にしてみてください ⇒ マニュアルはこちら ⇐
コメント