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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

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

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

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

目次

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

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

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

PC画面
スマホ画面で見た当ブログのヘッダー
スマホ画面

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

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

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

かめコンパス

ブログを開設したら真っ先に行う設定だね

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

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

STEP

WardPress管理画面で、Cocoon設定ヘッダーの順にクリックする

「Cocoon設定」、「ヘッダー」がある場所
STEP

表示されたページでヘッダーをカスタマイズする

表示されたページでヘッダーをカスタマイズする様子

設定する項目が変更できない場合は、スキン制御されているのが原因です。

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

カスタマイズし終えたら、変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

ヘッダーのカスタマイズ完了!

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

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

レイアウトを決める

「ヘッダーレイアウト」がある場所

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

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

の8つから選べます。

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

センターロゴ(デフォルト)の表示
センターロゴ(デフォルト)
センターロゴ(トップメニュー)の表示
センターロゴ(トップメニュー)
センターロゴ(スリムメニュー)の表示
センターロゴ(スリムメニュー)
センターロゴ(スリムトップメニュー)の表示
センターロゴ(スリムトップメニュー)
トップメニューの表示
トップメニュー
トップメニュー(右寄せ)の表示
トップメニュー(右寄せ)
トップメニュー小の表示
トップメニュー小
トップメニュー小(右寄せ)の表示
トップメニュー小(右寄せ)
かめコンパス

当ブログはトップメニュー(右寄せ)だよ

ヘッダーを固定する

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

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

「ヘッダーを固定する」がある場所

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

「Cocoon設定」、「モバイル」がある場所

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

「モバイルボタンの固定表示」がある場所

ヘッダーの高さを決める

ヘッダーの高さを設定する場所

ヘッダーの高さを

  • PCの場合:0~800px
  • モバイルの場合:0~600px

に指定できます。

ヘッダーの高さの説明

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

ヘッダーロゴを設定する

ヘッダーロゴの画像とサイズを設定する場所

ヘッダーロゴの

  • 画像
  • サイズ

を設定できます。

ヘッダーの高さと幅の説明

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

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

「キャッチフレーズの配置」がある場所

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

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

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

「キャッチフレーズの配置」を表示しないに設定した場合の見え方
表示しない
「キャッチフレーズの配置」をヘッダートップ(デフォルト)に設定した場合の見え方
ヘッダートップ(デフォルト)
「キャッチフレーズの配置」をヘッダーボトムに設定した場合の見え方
ヘッダーボトム

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

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

STEP

WordPress管理画面で、設定一般の順にクリックする

「設定」、「一般」がある場所
STEP

「キャッチフレーズ」に文字を入力する

「キャッチフレーズ」がある場所

キャッチフレーズの設定完了!

背景画像を設定する

「ヘッダー背景画像」がある場所

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

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

できます。

ヘッダーの背景画像をすべて表示しない場合の見え方
背景画像の全てを表示しない
ヘッダーの背景画像をすべて表示した場合の見え方
背景画像の全てを表示する

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

色を設定する

ヘッダーとロゴの背景/文字色を変更する場所

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

  • ヘッダーの背景/文字色
  • ロゴの背景/文字色
ヘッダー全体背景色を変更した様子
ヘッダー全体背景色を変更
ヘッダー全体文字色を変更した様子
ヘッダー全体文字色を変更
ロゴエリア背景色を変更した様子
ロゴエリア背景色を変更
ロゴ文字色を変更した様子
ロゴ文字色を変更

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

カラーコードを入力する場所

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

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

グローバルナビメニューの設定を行う場所

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

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

を決めれます。

グローバルナビメニューの背景/文字色がデフォルトの場合の見え方
デフォルト
グローバルナビメニューの背景色を変更した様子
背景色を変更
グローバルナビメニューの文字色を変更した様子
文字色を変更
グローバルナビメニューのトップメニュー幅とサブメニュー幅の説明

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

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

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

かめコンパス

メニュー幅をテキストに合わせたら、サブメニュー幅だけ設定しよう

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

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

STEP

WardPress管理画面を開き、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP

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

「新しいメニューを作成しましょう」がある場所
STEP
  1. メニュー名を入力
  2. メニュー設定の「ヘッダーメニュー」に✔
  3. メニューを作成をクリックする
かめコンパス

メニュー名は分かりやすいように「ヘッダー」でOKだよ

「メニュー名」、「ヘッダーメニュー」、「メニューを作成」がある場所
STEP
  1. ヘッダーに表示したい項目に✔
  2. メニューに追加をクリック
  3. 追加した項目を並び替える
  4. メニューを保存をクリックする
かめコンパス

一般的にヘッダーでは固定・カテゴリーページを表示させるよ

「メニューに追加」、「メニューを保存」がある場所

ヘッダーメニューの設定完了!

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

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

  • カテゴリーページ
かめコンパス

ユーザーが興味のあるページを見つけやすいよう設置するのがポイント!

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

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

もおすすめです。

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

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

STEP

WordPress管理画面で、Cocoon設定モバイルの順にクリックする

「Cocoon設定」、「モバイル」がある場所
STEP

「モバイルメニュー」から「ヘッダーモバイルボタン」か「ヘッダー・モバイルボタン」を選ぶ

「ヘッダーモバイルボタン」、「ヘッダー・モバイルボタン」がある場所
STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

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

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

STEP

WordPress管理画面で、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP

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

「新しいメニューを作成しましょう」がある場所
STEP
  1. メニュー名を入力
  2. メニュー設定の「ヘッダーモバイルボタン」に✔
  3. メニューを作成をクリックする
「メニュー名」、「ヘッダーモバイルボタン」、「メニューを作成」がある場所
STEP
  1. ヘッダーモバイルに表示したい項目に✔
  2. メニューに追加をクリック
  3. 追加した項目を並び替える
  4. メニューを保存をクリックする
「メニューに追加」、「メニューを保存」がある場所

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

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

  • メニューバー
  • 検索窓
  • ロゴ
かめコンパス

真ん中にロゴ、左右にメニューバーと検索窓を設置しようね!

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

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

STEP

WordPress管理画面で、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP
  1. 「編集するメニューを選択」をプルダウン
  2. 先ほど作ったヘッダーモバイルボタンをクリック
  3. 選択をクリックする
かめコンパス

先ほど作ったヘッダーモバイルボタン=メニュー名が表示されるよ

作ったヘッダーモバイルボタンを選んでいる様子
STEP
  1. 「カスタムリンク」をプルダウン
  2. ヘッダーに表示したいコマンドを入力
  3. ブログ上の表記名を入力
  4. メニューを追加をクリックする
「カスタムリンク」にURLとリンク文字列を入力している様子と、「メニューを追加」がある場所

\ヘッダーモバイルに表示させたい項目を選ぶ/

  • URL:tel:〇〇〇(ハイフンなし)
  • リンク文字列:電話番号

を入力します。

STEP

メニューに追加されたカスタムリンクを並び替えて、メニューを保存をクリックする

「メニューを保存」がある場所

ヘッダーモバイルに電話番号・ロゴを設置完了!

電話番号のアイコンをつける方法
  1. 電話番号のカスタムリンクをプルダウン
  2. CSS class (オプション)に「fa fa-phone」と入力
CSS class (オプション)に「fa fa-phone」と入力している様子

電話番号のアイコンをつけれた!

CSS class (オプション)がない場合は、

  1. ページ上にある「表示オプション」をプルダウン
  2. CSSクラスに✔を入れる
「CSSクラス」を表示する場所

これでCSS class (オプション)が表示されます。

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

リンク文字列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でヘッダーのカスタマイズ方法を紹介しました。

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでヘッダーカスタマイズ方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次