スポンサーリンク

【Cocoonカスタマイズ】ヘッダー下(アピールエリア)に画像配置でインパクトのあるトップページ

Cocoon

Cocoonのヘッダー下(アピールエリア)に画像を配置する方法を解説します。

ヘッダー下に大きめの画像を配置するとインパクトのあるトップページができます。

画像を配置する方法
①アピールエリアを利用する
②ウィジェットを利用する

この2つの方法について解説します。

ヘッダー下にスライドショーを設置する方法はこちらの記事をご覧ください。
トップページにスライドショーを設置する方法(Meta Slider使用)

完成のイメージ

Ccoonのオフィシャルサイトです。
ヘッダー周りはこのような配置になっています。

cocoonヘッダー下画像

Cocoonインストール直後はこのような感じ(グローバルメニューは分かりやすくするため青色にしています。)

cocoonヘッダー下画像

メニュー下に画像を配置するとこのような感じになります。
(メニューは「センターロゴ(デフォルト)」です。)
※メニューの設定は「Cocoon設定」>「ヘッダー」>「ヘッダーレイアウト」

cocoonヘッダー下画像

メニューを「センターロゴ(トップメニュー)」にしました。
グローバルメニューが一番上に配置されています。

cocoonヘッダー下画像

ヘッダー下に画像を配置する方法

ヘッダー下に画像を配置する方法は以下の2通りです。
①②どちらの方法も「トップページのみ」など、配置場所を選ぶことができます。

  1. アピールエリアを利用する
    通常は画像やテキスト、ボタン、リンクなどを配置して使います。
    今回は画像のみで使います。
  2. ウィジェットを利用する
    ウィジェット(コンテンツ上部)を使います。

アピールエリア

アピールエリアに画像を配置する手順です。

画像の用意

トップページの全幅をカバーできる画像を用意します。

PCでPage Ruler Redux(Chromの拡張機能)を使って、画面の端から端を測ってみると、1349pxありました。

それ以上の大きさの画像(1400×522px)を用意しました。

小さな画像だと全幅に拡大され、粗くなってしまうので大きめの画像を用意しましょう。

サイト幅の設定

まず、「Cocoon設定」>「全体」を開きます。

cocoonヘッダー下画像

真ん中当たりにある「サイトの均一化」「サイト幅を揃える」のチェックを外します。

これは、ヘッダー下の画像は全幅で表示するので、コンテンツ幅(メインカラムとサイドバー)外側の領域も使うためです。

cocoonヘッダー下画像

参考までに「サイト幅を揃える」にチェックを入れ、サイト全体の幅をコンテンツ幅に揃えた例です。

cocoonヘッダー下画像

アピールエリアの設定

「Cocoon設定」> 「アピールエリア」を開きます。

cocoonヘッダー下画像

「アピールエリアの表示」「フロントページのみで表示」

「高さ」」⇒ 空欄

「エリア画像」⇒ 画像を設定します。

cocoonヘッダー下画像

その他の項目は空欄にします。

cocoonヘッダー下画像

CSSで余白を調整

トップページヘッダー下に画像が表示されました。

左右は全幅で表示されましたが、画像の下が切れて高さが小さくなっています。

cocoonヘッダー下画像

このままでもいい感じですが、以下のCSSを子テーマに追加して調整します。
画像の幅と高さの比率を保つようにしています。

#appeal {
    height: calc(100vw * calc(503 / 1400));
}

スマホではこのように表示されました。

画像サイズの比率もPCと同じく保たれています。

cocoonヘッダー下画像

ウィジェットを使う

ウィジェットを使って画像を配置する手順です。
ここでは、アピールエリアの解説と同じサイズの画像を使います。

サイト幅の設定

アピールエリアの場合と同様、「Cocoon設定」>「全体」>「サイト幅の均一化」
「サイト幅を揃える」のチェックを外します。

cocoonヘッダー下画像

ウィジェットに画像を追加

ウィジェットの「画像」「コンテンツ上部」に挿入します。

cocoonヘッダー下画像

画像を追加します。

cocoonヘッダー下画像

「ウィジェットの表示」で画像の表示場所を選びます。

今回はトップページのみで表示させます。

「チェック・入力したページで表示」で、「トップページのみ」にチェック。

cocoonヘッダー下画像

CSSで余白を調整

トップページヘッダー下に画像が配置されました。

しかし、画像の周りに余白があります。(見やすくするために背景を黄色にしてあります。)

余白を消すために以下のコードを子テーマのCSSに追加します。

/*コンテンツ上部の画像 全幅にする*/
#content-top-in {
    width: 100%;
}
/*メニューとコンテンツ上部の画像の余白調整*/
#content-top{
	margin-top:0px;
}

余白がなくなり、左右いっぱいに表示されました。

cocoonヘッダー下画像

スマホではこのように表示されました。

cocoonヘッダー下画像

まとめ

Cocoonのオリジナル機能のアピールエリアは、今回のようにヘッダー画像として活用できるほか、特定のページへの誘導や、商品等の訴求など様々な目的に利用できます。

また、ウィジェットの活用方法も多様なので、上手く活用すると、ブログ運営がより楽しくなると思います。

タイトルとURLをコピーしました