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

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

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

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

⇒ Cocoonの公式サイト

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

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

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

WordPress管理メニュー

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

Cocoonの設定画面

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

ヘッダー画像を設定

ヘッダーは文字だけの表示も可能ですが、

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

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

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

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

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

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

Cocoonのメディアライブラリ

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

ヘッダー背景画像を選択

問題なければ画面上部または画面下部にある「変更をまとめて保存」をクリックします。

尚、Cocoonは、「本番に反映させる前にプレビューで確認する」ことができません。「変更をまとめて保存」をクリックすると、プレビューが変わるのと同時に本番のサイトも変更されてしまいます。

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

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

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

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

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

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

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

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

ヘッダーロゴ(文字または画像)を挿入

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

デフォルトでは、「設定」の「一般設定」で設定した「サイトのタイトル」が表示されます。

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

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

ロゴ文字色の変更

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

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

ロゴ文字色の変更

ロゴ文字を画像にする

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

CSSで変更することも可能ですが、それができない、したくない場合は、ヘッダーロゴを画像にすることで対応が可能です。

そうすることで文字サイズを変えたり、立体感を持たせたり、おしゃれにすることもできます。

ヘッダーロゴを画像にするには「ヘッダーロゴ」の「選択」でロゴ画像(jpg、jpeg、png形式を推奨)を選びます。

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

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

ヘッダーロゴのプレビュー

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

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

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

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

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

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

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

キャッチフレーズの入力

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

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

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

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

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

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

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

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

例えば、

  • PC(画面のサイズが768pxより大きい)では、24pxで
  • スマホやモバイル端末(画面のサイズが768px以下)では、18pxで

表示したいといった場合は、子テーマのstyle.cssに以下のコードを追加します。

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

そのままコピペで構いません。

子テーマのstyle.cssは、「外観」の「テーマエディター」で変更できます。

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

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

グローバルメニューとはヘッダー背景画像の下に表示されるヘッダーメニューのことです。

作成は、WordPress管理画面の「外観」の「メニュー」で行います。

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

メニュー作成画面

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

メニューに項目を追加

グローバルナビメニュー(ヘッダーメニュー)の表示位置を設定

よければ、「メニュー設定」の「メニューの位置」で「ヘッダーメニュー」を選択し、「メニューを保存」をクリックします。

必要に応じてモバイルやフッターも選択します。

メニューの位置を選択

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

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

テスト環境で適当に作りながら記事を書いているので見栄えがよくなくてすみません。

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

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

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

グローバルナビメニューの色と幅の調整

そうするとヘッダー画面は以下のようになります。

Cocoonのグローバルメニューのプレビュー

それっぽくなってきました。

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

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

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

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

下図の通り、グローバルメニューは、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

尚、デザインやSEO面をもっと強化したい場合は、有料のWordPressテーマをおすすめします。

ちなみにこのサイトでは、THE THORという有料のWordPressテーマを使用しています。

また、WordPressテーマ「Cocoon」の評判や口コミ、Cocoonをインストールする手順、Cocoonでランキングページを作成する手順などは以下のページで詳しく解説しています。

必要に応じて参考にして頂ければと思います。