【画像】サイトの印象ガラリと変えるヘッダーのカスタマイズ!Cocoon初心者向け

wordpress_Cocoon_ヘッダー_設定_カスタマイズ Cocoon

この記事はプロモーションを含みます。
Amazon_歳末セール

ブログ管理人のひろくまです

こちらのブログはワードプレスを使用しています。

テーマはCocoon(コクーン)です。

この記事ではCocoonの設定でヘッダーの変更を画像付で説明をします。

こんな方に見てほしい!

こんな方に見て欲しい
  • ブログ初心者
  • Cocoonの設定がわからない
  • ヘッダーを知りたい
  • ヘッダーのカスタマイスしたい
  • サイト印象を変えたい

こんなかたには最適です。

この記事はCocoonの設定を使ってヘッダーの「画像」「レイアウト」の説明をします。

手っ取り早く「画像」だけ入れたいんだ!ってかたはこちらからスキップしてください。

スキップする ⇒ ヘッダー背景画像の設定

まだCocoonのテーマを入れていないかたはこちらで紹介してます。

この記事ではブログをはじめて2か月経過中のまだまだ初心者ブロガーですが、これからブログをはじめる初心者にコレははじめにやったほうがよいよというものをいくつか紹介しています。

ヘッダーとは何?

ヘッダーとはブログのトップページのこちらの部分です。

Cocoonヘッダー設定_ヘッダー_メニューの説明

赤枠内が「ヘッダー部」(黒の部分の文字は「キャッチフレーズ」)

青枠内が「グローバルメニュー」です。

合わせてヘッダーとなります。

オレンジ色になっているのはCocoonのスキンの変更で色・デザインなど変更されています。

 

ワードプレス_Cocoonのスキン設定でお洒落にカスタマイズ【初心者向け】

 

実際デフォルト(初期設定)の状態はこんな感じ

Cocoonヘッダー設定_ヘッダー_メニュー_デフォルト画面

 

ひろくま
ひろくま

うーん…なんともいえないシンプルさ加減です

ヘッダーの色や画像を変更したりするとブログサイトの印象がガラリと変わります

ご自身のサイトのテーマにあわせてヘッダーのカラーをご自身の色にチェンジしてみてください。

 

グローバルメニュー(メニューバー)を作っていない方はこちらの記事を参考に作ってみてください。

ヘッダーの変更手順

00Cocoonヘッダー設定_Cocoon設定

まずはワードプレスの左の管理画面より

「Cocoon 設定」を選択しましょう。

ヘッダーの選択

Cocoonヘッダー設定_ヘッダー_ヘッダーを選択する

「ヘッダー」をクリックします

 

cocoonのヘッダー設定メニュー

ヘッダーの設定には12の設定項目がありますので説明します。

色の付いている箇所はそれぞれのやり方のリンクへジャンプできます

こちらのcocoonヘッダーメニュー設定のページは各ページに貼ってありますので活用してみてください。

今回は説明するのは

今回の説明するところ
  • 「ヘッダーレイアウト」
  • 「ヘッダー背景画像」

の説明です。

 ヘッダーレイアウト

Cocoonヘッダー設定_ヘッダーレイアウト

こちらでは8種類のヘッダーのロゴ・メニューのレイアウトの変更ができます。

クリックすると以下の項目が表示されます。

 

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

こんな名前見てもピンとこないですよね・・・

こちらのヘッダーレイアウト変更後を画像付でわかりやすく説明します。

センターロゴ(デフォルト)

まずは上から順にセンターロゴ(デフォルト)から説明

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

センターロゴ(デフォルト)は初期の状態です。

Cocoonヘッダー設定_センターロゴ(デフォルト)

  1. 上段:キャッチフレーズ(黒い部分)
  2. 中段:ロゴ
  3. 下段:メニューバー

ひろくま
ひろくま

デフォルトでもよく見えます

せつやくま
せつやくま

スキンの恩恵もデカイ

センターロゴ(トップメニュー)

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

Cocoonヘッダー設定_センターロゴ(トップメニュー)

  1. 上段:メニューバー
  2. 中段:キャッチフレーズ
  3. 下段:ロゴ

メニューバーがトップに移動しました。

センターロゴ(スリムメニュー)

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

Cocoonヘッダー設定_センターロゴ(スリムメニュー)

  1. 上段:キャッチフレーズ
  2. 中段:ロゴ
  3. 下段:メニューバー

配置はデフォルトと同じで下段のメニューバーが若干スリムになる仕様です。

センターロゴ(スリムトップメニュー)

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

Cocoonヘッダー設定_センターロゴ(スリムトップメニュー)

  1. 序段:メニューバー
  2. 中段:キャッチフレーズ
  3. 下段:ロゴ

メニューバーがトップに配置されスリムになった仕様です。

トップメニュー

トップメニューを選択するとスリムになります。

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

 

Cocoonヘッダー設定_センターロゴ(トップメニュー)

背景画像が消えてロゴとメニューだけになりスリムバージョンです。

ロゴは左の隅っこに追いやられているイメージですね・・・

  1. 左寄せ:ロゴ
  2. 中央:メニューバー
  3. キャッチフレーズ:なし

トップメニューを選択するとロゴ部が左寄せになりメニュバーが中央に設置されます。

キャッチフレーズはなしの仕様です。

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

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

 

Cocoonヘッダー設定_センターロゴ(トップメニュー右寄せ)

 

  1. 左寄せ:ロゴ
  2. 右寄せ:メニューバー
  3. キャッチフレーズ:なし

ロゴは先ほどの設定と同じ配置でメニューは右寄せになりました。

トップメニュー小

トップメニュー小を選択するとさらに幅が狭くなります。

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

 

Cocoonヘッダー設定_センターロゴ(トップメニュー小)

 

  1. 左寄せ:ロゴ
  2. 中央:メニューバー
  3. キャッチフレーズ:なし

メニューバーが更にスリムに。ロゴは左寄せのままでメニューの配置は真ん中に。

ひろくま
ひろくま

個人的にちょっと狭すぎです

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

トップメニュー小(右寄せ)も幅が狭い仕様です。

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

 

Cocoonヘッダー設定_センターロゴ(トップメニュー小右寄せ)

 

  1. 左寄せ:ロゴ
  2. 右寄せ:メニューバー
  3. キャッチフレーズ:なし

先ほどの設定の右寄せバージョンです。

変更をまとめて保存する

 

Cocoonヘッダー設定_変更をまとめて保存

好きなヘッダーのレイアウトが決まったら

「変更をまとめて保存」をクリックしましょう。

 

ヘッダーのレイアウトの設定は完了です

 

ヘッダー背景画像の設定

 

Cocoonヘッダー設定_ヘッダーの背景画像の選択

表示させたい画像を選択しましょう。

下の「ヘッダー背景画像の固定」にチェックを入れるとページをスクロールした時に背景画像が固定されたままになります。

動画などでないと説明できないので割愛します。お試しにチェックを入れてプレビューで見るとどうなるか確認してみてください。

 

Cocoonヘッダー設定_ヘッダーの背景画像の選択2

例として「パソコンの画像」を選択しました。

早速プレビューで確認しましょう。

Cocoonヘッダー設定_ヘッダーの背景画像の選択プレビュー

 

ひろくま
ひろくま

はいパソコンが写ってません(笑)

せつやくま
せつやくま

画像が大きいと1部しか表示されないよ!

あまり大きな画像だと一部分しか表示されませんので注意しましょう。

 

個人的推奨サイズ

1240px×100~250pxあたりの画像サイズに編集して

画像を選択するとよい感じに表示されます

ベストヘッダーサイズは色々調べた結果1240pxの幅が拡大されても画質が落ちないとのことです

ヘッダーロゴの幅も同じです。

まとめ:サイトの印象ガラリと変えるヘッダーカスタマイズ!

  1. ヘッダーとは何?
  2. ヘッダーの変更手順
    1. ヘッダーの選択
  3.  ヘッダーレイアウト
    1. センターロゴ(デフォルト)
    2. センターロゴ(トップメニュー)
    3. センターロゴ(スリムメニュー)
    4. センターロゴ(スリムトップメニュー)
    5. トップメニュー
    6. トップメニュー(右寄せ)
    7. トップメニュー小
    8. トップメニュー小(右寄せ)
    9. 変更をまとめて保存する
  4. ヘッダー背景画像の設定
  5. まとめ:サイトの印象ガラリと変えるヘッダーカスタマイズ!

ヘッダーのレイアウトの設定だけでも8種類あるので悩むところですがセンターロゴ(デフォルト)で背景画像を変更するだけでも見栄えは良くなります。

ヘッダーのレイアウト変更したらパソコンだけではなくモバイル画面などのプレビューも確認しましょう。

色々試してみてお気に入りのヘッダーのカスタマイズしましょう。