ブログのヘッダーロゴの下にメニューを追加する 【テーマ:Cocoon】

ブログ
スポンサーリンク

下の画像のようなヘッダーロゴの下のメニューを見たことがあると思います。

ヘッダーロゴ下のメニュー

これは「グローバルナビ」とか「グローバルメニュー」とか「グローバルナビメニュ―」と呼ばれるものです。

この記事では「グローバルメニュー」と呼ぶことにします。

この記事ではCocoonブログにグローバルメニューを追加する方法を説明しています。

スポンサーリンク

新しいメニューを作成する

WordPress管理画面の左カラムから「外観」→「メニュー」をクリックします。

外観→メニュー

「新しいメニューを作成しましょう」をクリック。 

「新しいメニューを作成しましょう」をクリック

見出し「メニュー構造」の下のメニュー名を入力します。何でもいいです。この記事では「Gメニュー」としています。

その下の「メニューの位置」で「ヘッダーメニュー」にチェックを入れます。

「メニューを作成」をクリックします。  

メニュー名、メニューの位置を選択して「メニューを作成」をクリック。
スポンサーリンク

メニュー項目を追加 

以下の作業で追加した項目(カテゴリ名など)がグローバルメニューに表示されます。 

グローバルメニューに追加した項目

まず「ホーム」(ブログトップ画面)を追加してみます。

見出し「メニュー項目を追加」下の固定ページタブ(が開かれていると思います)の「すべて表示」タブをクリックすると「ホーム」とあるのでチェックします。 

「ホーム」をチェックする

「メニューに追加」をクリックします。右の「メニュー構造」に今追加した「ホーム」が表示されるようになります。 

ホームを追加する

いくつかのカテゴリを追加してみます。

「カテゴリー」をクリックして開き「ソフト使用法」「プログラミング」「読書」「ブログ」の4つにチェックを入れました。 

4つのカテゴリーをチェックする。

「メニューに追加」をクリックすると「メニュー構造」に今チェックしたカテゴリが追加されます。  

4つのカテゴリーを追加する。

「メニューを保存」をクリックするとグローバルメニューがブログに追加されます。

「メニューを保存」するとグローバルメニューが追加される。

ヘッダーロゴ「長良川ノート」の下の「ホーム」「ソフト使用法」などが今追加したグローバルメニューです。 

グローバルメニューが追加された。

グローバルメニューを追加した段階ではグローバルメニューの背景色や文字の色などが設定されてないので上の画像のようにそっけなく表示されています。

スポンサーリンク

グローバルメニューの背景色と文字色を設定する

グローバルメニューの背景色などの設定は「Cocoon設定」→「ヘッダー」タブから行います。 

Cocoon → ヘッダータブ

画面の一番下までスクロールすると「グローバルナビメニュ―色」と見出しがあります。

グローバルメニューの背景色は「グローバルナビ色」を設定します。 

グローバルメニューの背景色は「グローバルナビ色」を設定

「色を選択」をクリックすると以下の画像のように表示されるので赤色の四角形などをクリックして選択します。 

グローバルメニューの背景色を選択

背景色にしたいカラーコード(#と6桁の16進数の文字列。例:#f5f8fa)が決まっている方は「色を選択」の右側にカラーコードを入力しても背景色の設定ができます。 

背景色をカラーコードでも選択できる。

グローバルメニューの文字の色も「グローバルナビ文字色」を上と同様の手順で設定することで変更できます。

グローバルメニューの文字色の選択

グローバルメニューの背景色と文字色を設定したので画面の一番下にある「変更をまとめて保存」をクリックします。 

グローバルメニューの背景色と文字色を設定したので「変更をまとめて保存」

ブログを見ると今の設定が反映されてグローバルメニューの背景色と文字色が変更されています。 

グローバルメニューの背景色と文字色の設定が反映された。
スポンサーリンク

まとめ

この記事ではCocoonブログにグローバルメニューを追加する方法とグローバルメニューの背景色、文字色を変更する方法を説明しました。

この記事は以上です。