Cocoonでヘッダーをカスタマイズする手順

Cocoonでヘッダーをカスタマイズ

WordPressテーマをインストールすると最初にカスタマイズしたくなるのはホームページの顔とも言えるヘッダー部分という人も多いと思います。

ここでは、WordPressテーマ「Cocoon」で、ヘッダー部分における以下の項目をカスタマイズ設定する手順について解説します。

  1. ヘッダーの画像設定
  2. ヘッダーロゴ(文字または画像)の設定
  3. キャッチフレーズの表示・非表示と配置位置の設定
  4. グローバルナビメニュー(ヘッダーメニュー)設定
  5. ヘッダーレイアウトの設定

⇒ Cocoonの公式サイト

Cocoonでヘッダーをカスタマイズ

Cocoonで設定全般を行う場合は、WordPress管理メニューの、

Cocoon設定」から「Cocoon設定」に遷移します。

WordPress管理メニュー

Cocoonの設定全般は、基本的に全てこの画面から行います。

ヘッダー関連の設定は、「Cocoon設定」の「ヘッダー」タブをクリックします。

Cocoonの設定画面

Cocoon設定のヘッダー設定画面

ヘッダー画像の設定

ヘッダーは文字だけの表示も可能です。画像を設定するかどうかは任意です。

ここでは、ヘッダーの背景とヘッダーロゴを画像で設定する手順を解説します。

ヘッダーの背景画像を設定

まず、ヘッダーの背景画像を設定するには、

ヘッダー背景画像」項目の右側にある「選択」をクリックします。

Cocoonのヘッダー背景画像の選択ボタン

「画像を選択してください」画面が表示されますので、「メディアライブラリ」に背景にしたい画像がある場合はそこから画像を選択し、目ぼしい背景画像がなければ、「ファイルをアップロード」タブをクリックしてパソコンからアップロードします。

画像一覧から選択を選択する画面

ヘッダー背景画像の選択が完了したら、画面右下の「画像の選択」ボタンをクリックします。

ヘッダー背景画像を選択

設定が終わったら画面上部または画面下部にある「変更をまとめて保存」をクリックします。

するとプレビュー画面が下図のように表示されます。

Cocoonのヘッダープレビュー画面

ヘッダー背景画像のサイズ(高さ)を調節

プレビューで確認した背景画像のサイズ(高さ)を調整したい場合は、「高さ」「高さ(モバイル)」に数値を入れて調整します。

例えば、「高さ」に「400」pxを入れて「変更をまとめて保存」をクリックすると下図のように変わります。デフォルトよりこちらがしっくりきますのでこれでOKとします。

同様にスマホの背景画像サイズも調整します。

背景画像サイズ変更後のプレビュー画面

これで、ヘッダーの背景画像の設定が完了です。

ヘッダーロゴ(文字または画像)の設定

ヘッダーロゴとは、「Cocoonでヘッダーをカスタマイズ」と表示されている部分です。

ヘッダーの背景に画像を設定した場合、画像とロゴ文字の配色によっては、ロゴ文字が見づらくなる場合があります。

その場合は、ロゴ文字の色を変えたり、ロゴに画像を設定することができます。

ロゴ文字色の変更

ロゴ文字色を変更したい場合は、「ヘッダー色(ロゴ部)」の「ロゴ文字色」から好みの色を選択して「変更をまとめて保存」をクリックします。

プレビューで確認しながら調整します。

ロゴ文字色の変更

ロゴ画像の設定

ヘッダーの文字サイズは設定画面で変更できません

CSSで変更することは可能ですが、ヘッダーロゴに画像を設定することで対応が可能です。

ヘッダーロゴを画像に変更することで文字サイズを変えたり、立体感を持たせたり、おしゃれにすることもできます。

ヘッダーロゴを画像にするには「ヘッダーロゴ」の「選択」でロゴ画像を選びます。

画像は、jpg、jpeg、png形式が推奨されています。

ヘッダーロゴ設定でロゴ画像の設定

例えば、png形式で「Cocoonでヘッダーをカスタマイズ」という文字の画像を白色で作成して、ヘッダーロゴとして設定すると下図のように表示されます。

ヘッダーロゴ画像の設定

ヘッダーロゴの画像表示サイズは、「ヘッダーロゴサイズ」の箇所で変えることができます。

ヘッダーロゴサイズの変更画面

ロゴは文字でもおしゃれな模様でも構いません。

好みのロゴがセットできたら完了です。

キャッチフレーズの表示・非表示と配置位置の設定

キャッチフレーズとは、WordPress管理画面の「設定」-「一般設定」で入力する「サイトの簡単な説明文」のことです。

入力するかどうかは任意ですが、入力したら、トップページに表示することもできます。

キャッチフレーズの入力

キャッチフレーズの表示・非表示と配置(表示)位置の指定

Cocoonでは、このキャッチフレーズを表示するか否か、表示する場合は、ヘッダーロゴの上(ヘッダートップ)か下(ヘッダーボトム)かを指定することができます。

キャッチフレーズの配置設定

キャッチフレーズの表示画面

キャッチフレーズの文字のサイズを修正

キャッチフレーズの表示は見ての通り、小さくて分かりづらく感じます。

しかし、キャッチフレーズの文字のサイズは、設定画面で変更することはできません。

この場合は、CSSに文字サイズを指定することで変更が可能です。

例えば、PC(画像のサイズが768pxより大きい画面)では、24pxで、スマホやモバイル端末(画像のサイズが768px以下の画面)では、18pxで表示したいといった場合は、子テーマのstyle.cssに以下のコードを追加します。

.tagline {
font-size: 24px;
}
@media screen and (max-width: 768px){
.tagline {
font-size: 18px;
}
}

グローバルナビのメニュー(ヘッダーメニュー)設定

グローバルナビメニュー(ヘッダーメニュー)の作成

グローバルメニューとはヘッダー部分に表示されるメニューのことです。

ヘッダーメニューろも言われます。

グローバルナビメニューの作成は、WordPress管理画面の「外観」-「メニュー」で行います。

メニュー構造で任意のメニュー名を入力し「メニューを作成」ボタンをクリックします。

メニュー作成画面

例えば、固定ページに作成しているホームページをグローバルメニューとして登録したい場合は、その項目を選択し、「メニューに追加」をクリックします。

メニューに追加する画面

グローバルナビメニュー(ヘッダーメニュー)の設定

よければ、「メニュー設定」の「メニューの位置」で「ヘッダーメニュー」を選択し、「メニューを保存」をクリックします。必要に応じてモバイルやフッターも選択します。

メニューの位置を選択

するとヘッダー画像の下、赤枠の箇所にグローバルナビメニューが表示されます。

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

グローバルナビメニュー(ヘッダーメニュー)の色と幅の調整

次に、グローバルナビ全体の背景色やグローバルナビの文字色、また、グローバルナビメニューの幅を設定します。

ここでは、グローバルナビ全体の背景色を朱色にし、メニューの幅をテキストに合わせる(メニュー幅を均一にせずにテキスト幅で設定)にします。

グローバルナビメニューの色と幅の設定

上記の設定でヘッダー画面は以下のようになります。

Cocoonのヘッダー画面

ヘッダーレイアウトの設定

ヘッダーレイアウトは、ヘッダーロゴやグローバルナビメニューの表示場所を設定します。

Cocoonには、以下の8種類のヘッダーレイアウトが用意されています。

  1. センターロゴ(デフォルト)
  2. センターロゴ(トップメニュー)
  3. センターロゴ(スリムメニュー)
  4. センターロゴ(スリムトップメニュー)
  5. トップメニュー
  6. トップメニュー(右寄せ)
  7. トップメニュー小
  8. トップメニュー小(右寄せ)

下図の通り、

①のセンターロゴ(デフォルト)はメニューがヘッダーロゴの下に表示され、

②のセンターロゴ(トップメニュー)は、メニューがヘッダーロゴの上に表示されます。

センターロゴ(デフォルト)とセンターロゴ(トップメニュー)

③センターロゴ(スリムメニュー)と④センターロゴ(スリムトップメニュー)は、それぞれ、①と②のメニュー部分がスリム(小さく)になります。

⑤トップメニューは、ヘッダーロゴが左に表示され、メニューが右に表示されるレイアウトになり、⑥トップメニュー(右寄せ)は、メニューが右寄せで表示されます。

⑦のトップメニュー小と⑧のトップメニュー小(右寄せ)は、それぞれ、⑤5と⑥のメニュー部分がスリム(小さく)になります。

トップメニューとトップメニュー(右寄せ)

いずれもプレビューで表示されますので、好みのレイアウトを選択します。

尚、ヘッダーレイアウトがスキン制御で設定できない場合は、スキンの設定項目を変更することで設定できるようになることがあります。

これで、Cocoonのヘッダーのカスタマイズの一通りの説明は終了です。

Cocoonでヘッダーをカスタマイズする手順のまとめ

以上、WordPressのテーマ「Cocoon」における

  • ヘッダーの画像設定
  • ヘッダーロゴ(文字または画像)の設定
  • キャッチフレーズの表示・非表示と配置位置の設定
  • グローバルナビメニュー(ヘッダーメニュー)設定
  • ヘッダーレイアウトの設定

について、カスタマイズする手順について解説してきました。

Cocoonは無料のWordPressテーマですが、ヘッダー部分一つだけをとってものこれだけ細かくカスタマイズ設定することができます。

設定を変える都度、正確に変化するプレビュー画面も便利です。

Cocoonは、SEO対策や高速表示にも力を入れており、無料版のWordPressテーマの中では、個人的にも最もおすすめできるテーマの一つです。

実際に当サイトでもブログにおすすめのWordPressテーマ、SEOに強いWordPressテーマとしても紹介しています。

また、WordPressテーマ「Cocoon」の評判や口コミ、Cocoonをインストールする手順、Cocoonでランキングページを作成する手順などは以下のページで詳しく解説していますので、必要に応じて参考にして頂ければと思います。