【Cocoon】ヘッダーのカスタマイズ方法｜おすすめのメニュー設定も初心者向けに解説

「ヘッダーをカスタマイズする方法は？」

「モバイルでもヘッダーメニューを設置したい」

「画像サイズや表示されない場合の対処法を教えて」

この記事では、そんな方に向けて、Cocoonでヘッダーのカスタマイズ方法を解説します。

この記事を読めば、ヘッダーのカスタマイズ方法はもちろん、

• モバイルヘッダーメニューの作り方
• ロゴや検索窓の設置
• 画像サイズや表示されない場合の対処法

が理解できるようになります。

私自身、CSSを使わないとヘッダーを自由に設定できないと思っていましたが、本記事の方法で好きなように設定できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

ヘッダーの前提知識と完成イメージ

ヘッダーとは、サイト上部の場所のことです。

下の画像は、当ブログのヘッダーになります。

ヘッダーを設定することで、

• 記事をカテゴリー別を整理できる
• ページの回遊率が向上する
• ブログの雰囲気がおしゃれになる

などの役割を果たします。

Cocoonヘッダーをカスタマイズする方法

Cocoonでヘッダーをカスタマイズする方法は、下記の通りです。

ヘッダーでカスタマイズできる項目は、下記7つあります。

それぞれ詳しく解説します。

レイアウトを決める

「ヘッダーレイアウト」では、

• センターロゴ（デフォルト）
• センターロゴ（トップメニュー）
• センターロゴ（スリムメニュー）
• センターロゴ（スリムトップメニュー）
• トップメニュー
• トップメニュー（右寄せ）
• トップメニュー小
• トップメニュー小（右寄せ）

の8つから選べます。

下の画像は、8つあるヘッダーレイアウトの見え方です。

ヘッダーを固定する

PCとスマホでヘッダーを固定するかどうか選べます。

PCの場合は、「ヘッダーを固定する」に✔

スマホの場合は、Cocoon設定⇒モバイルの順にクリックし、

「モバイルボタンの固定表示」に✔すると、ヘッダーを固定できます。

ヘッダーの高さを決める

ヘッダーの高さを

• PCの場合：0～800px
• モバイルの場合：0～600px

に指定できます。

PCの場合は、ヘッダーレイアウトがセンターロゴのときだけ、ヘッダーの高さが適応されます。

ヘッダーロゴを設定する

ヘッダーロゴの

• 画像
• サイズ

を設定できます。

ヘッダーレイアウトがセンターロゴのときだけ、ロゴサイズを変更できます。

キャッチフレーズを配置する

「キャッチフレーズの配置」では、

• 表示しない
• ヘッダートップ（デフォルト）
• ヘッダーボトム

の3つの中から指定できます。

ヘッダーレイアウトがセンターロゴのときだけ、キャッチフレーズを表示できます。

キャッチフレーズの設定方法

背景画像を設定する

「ヘッダー背景画像」では、

• 背景画像の挿入
• 背景画像の固定
• 背景画像をすべて表示

できます。

ヘッダーレイアウトがセンターロゴのときだけ、背景画像を表示できます。

色を設定する

下記、2ヵ所で色を設定できます。

• ヘッダーの背景/文字色
• ロゴの背景/文字色

設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。

カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。

グローバルナビメニューを設定する

グローバルナビメニューの

• 背景/文字色
• トップメニュー幅(100~300px)
• サブメニュー幅(100~500px)

を決めれます。

おすすめは、「メニュー幅をテキストに合わせる」に✔を入れることです。

メニュー幅をテキストに合わせないと、ヘッダーメニューに表記されている項目が1行で収まらず、2行になってしまい、見栄えが悪くなります。

ですので、「メニュー幅をテキストに合わせる」に✔を入れましょう。

Cocoonヘッダーメニューを設定する方法

Cocoonでヘッダーメニューを設定する方法は、下記の通りです。

ヘッダーメニューで設置すべき1つの項目

ヘッダーには、下記1つの項目を設置するのが一般的です。

カテゴリーページ以外だと、

• プロフィール
• お問い合わせページ

もおすすめです。

Cocoonヘッダーモバイルボタンを表示する方法

Cocoonでヘッダーモバイルボタンを表示する方法は、下記の通りです。

次に、ヘッダーモバイルボタンに表示される項目を設定していきます。

モバイルでヘッダーメニューを設定する方法

モバイルのヘッダーメニューで設置すべき3つの項目

モバイルのヘッダーメニューには、下記3つの項目を設置するのが一般的です。

ヘッダーモバイルに電話番号・ロゴを設置する方法

モバイルのヘッダーメニューに、電話番号・ロゴを設置するには、カスタムリンクで設定します。

電話番号やロゴ以外でも、下記テキストをカスタムリンクに入力すると作れます。

リンク文字列	URL
電話番号	tel:〇〇〇
サイトロゴ	#logo
メニューバー	#menu
検索窓	#search

Cocoonヘッダーでよくある質問

Cocoonのヘッダー設定でよくある質問

です。

ヘッダー画像のサイズは？

Cocoonでヘッダー画像のおすすめサイズは、幅1920pxです。※高さは自由。

Stat Counterが発表しているデータをみると、日本で使われているPCの画面サイズのシェア率が高いのは

• 幅1920×高さ1080px

です。(2023年9月時点の情報)

もし、ヘッダー画像を幅1920pxより小さくすると、幅1920pxのパソコン画面で見た場合、ヘッダー画像が引きのばされて画質が悪くなります。

ですので、日本で使われているPCのシェア率が高く、キレイな画質で見ることができる幅1920pxになるようヘッダー画像をリサイズしましょう。

画像をリサイズする方法は、デザインツール「Canva」を使えばかんたんにできますので、下の記事を参考にしてください。

ヘッダー画像が表示されない場合の対処法は？

Cocoonでヘッダー画像が表示されない場合の対処法は、下記2つあります。

それぞれ詳しく解説します。

ヘッダーレイアウト設定を確認する

ヘッダー画像が表示されない場合、ヘッダーレイアウト設定が

• トップメニュー

になっているからです。

ですので、ヘッダーレイアウト設定を

• センターロゴ

にすれば、ヘッダー画像が表示されます。

ヘッダーレイアウトは先ほど紹介したCocoon設定から変更できます。

アピールエリアを設定する

通常、ヘッダー画像を

• PCでは表示できるが、
• スマホでは表示できません。

ただ、代わりにアピールエリアを設定することで、ヘッダー下に画像を表示させれます。

Cocoonでアピールエリアを設定する方法は、下の記事を参考にしてください。

まとめ：ヘッダーを設定しブログの雰囲気をオシャレにしよう

今回は、Cocoonでヘッダーのカスタマイズ方法を紹介しました。

ヘッダーとは反対のフッターのカスタマイズ方法を知りたいという人は、下の記事も見てください。

また以下の記事では、その他カスタマイズ方法も紹介しています。