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

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

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

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

  1. ヘッダーの画像設定
  2. ヘッダーロゴの画像設定
  3. キャッチフレーズの表示・非表示と配置位置の設定
  4. グローバルナビのメニュー設定

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

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

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

WordPress管理メニュー

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

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

Cocoonの設定画面

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

ヘッダー画像の設定

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

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

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

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

ヘッダー背景画像選択画面

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

画像選択画面

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

ヘッダー背景画像の選択

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

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

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

ヘッダー背景画像の高さを調節

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

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

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

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

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

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

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

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

ロゴ文字色の変更

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

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

ロゴ文字色の変更

ロゴ画像の設定

ヘッダーロゴに画像を設定することも可能です。

ヘッダーロゴ項目から選択をクリックしてロゴ画像を選びます。

jpg、jpeg、png形式の画像推奨です。

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

ヘッダーロゴ画像の設定

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

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

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

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

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

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

キャッチフレーズの入力

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

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

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

キャッチフレーズの文字の大きさを修正

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

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

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

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

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

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

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

メニュー作成画面

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

メニューに追加する画面

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

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

メニューの位置を選択

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

グローバルナビメニュー

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

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

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

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

Cocoonのヘッダー画面

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

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

以上、WordPressのテーマ「Cocoon」におけるヘッダー部分のカスタマイズ設定手順について解説してきました。

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

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

関連記事

ここではWordPressテーマ「Cocoon」でランキングを作る手順を解説しています。 Cocoonは、ランキングの構築が可能な無料のWordPressテーマです。 ランキングの構築機能が予め搭載[…]

WordPressテーマ Cocoonでランキングのページを作成する手順
関連記事

WordPressで作られたブログやサイトは、WordPressテーマをインストールするだけで簡単にサイトのデザインやレイアウトを変えることができます。 ここでは、おすすめの無料のWordPressテーマ[…]

Cocoonをインストールする手順
関連記事

WordPressテーマを選ぶ上でSEOの強さを重視している人は多いと思います。 しかし、残念ながらWordPressテーマを変えたからといってGoogleの検索結果の順位が上がるという魔法のようなWor[…]

SEOに強いWordPressテーマ

最強WordPressテーマ「THE THOR」


当サイトで使っているWordPressテーマ「THE THOR」は、プラグイン不要でSEO対策が可能なWordPressテーマです。1つ購入すれば自分の管理するサイト全てで使えます。国内NO1のテーマを目指して作られ、今後も進化し続けます。

THE・THOR(ザ・トール)|テーマ&サポートプラン