【Cocoon】おしゃれなトップ画面に！アピールエリアの設定方法

前回はヘッダーメニューのカスタマイズ方法を解説しました。

【Cocoon】おしゃれなヘッダーメニューにカスタマイズする方法

Cocoonのヘッダーメニューをおしゃれにカスタマイズする方法を、設定からCSSまで詳しく解説していきます！無料テーマでもおしゃれなブログデザインにしたい方におすすめです。

むさ

今回はブログの雰囲気を決める、アピールエリアのカスタマイズ方法について紹介させていただきます。

さび

当ブログ『ムササビやねん』のアピールエリア設定、CSSをもとにカスタマイズ手順を紹介させていただきます！

Cocoonカスタマイズ第2弾として、Cocoonのアピールエリアのカスタマイズについてご紹介させていただきます。

▼この記事はこんな方におすすめ

アピールエリアを設定して、おしゃれなトップページを作りましょう！

Contents

1 アピールエリアの完成イメージ
2 アピールエリアの設定方法
3 CSSで装飾をカスタマイズ
4 まとめ

アピールエリアの完成イメージ

むさ

今見ていただいてる、当ブログのアピールエリアが完成イメージです！

▼特徴

アピールエリアの設定方法

▼注意！！！

まずはじめにアピールエリア設定からです。
アピールエリア設定は①サイドバーのCocoon設定→②アピールエリアで設定できます。

アピールエリアの表示

アピールエリアを表示するページを設定します。

当ブログの設定は『投稿・固定ページ以外で表示』です。

むさ

記事の邪魔にならないように、トップページ・カテゴリ別記事一覧・タグ別記事一覧・検索結果一覧のみに表示するよう設定しました！

高さ

PCでのアピールエリアの高さ(px)を指定します。

当ブログの設定は『なし（デフォルト）』です。

むさ

画面の幅に合わせて高さを動的に変更するため、高さの設定はCSSで設定しています！

エリア画像

アピールエリアに表示する画像を設定します。

さび

当ブログのアピールエリアはCanvaで作成しました。
無料で使用できる素材もおしゃれなものがたくさん！

むさ

Canvaで作成する際に背景色を、Cocoon設定 > 全体のサイト背景色と同じ色に設定しています！色を揃えて統一感を意識しました！

Canvaでのサイズの設定は『幅2520 (px) × 高さ400 (px)』で作成しました。

アピールエリア背景画像の固定はONにすると、下にスクロールした際に画像がその場所にとどまるようになります。

当ブログの設定は『OFF（チェックなし）』です。

エリア背景色

アピールエリアの背景色を設定します。

当ブログの設定は『#f7f7f5』です。

さび

当サイトは高速化を図るため、画像の読み込みを遅らせています。

画像が表示されるまでの背景色になるので設定しています。

テキストエリア表示

以下に紹介する『タイトル』『メッセージ』『ボタン』を表示するか設定します。

当ブログの設定は『OFF（チェックなし）』です。

むさ

テキストエリア表示をOFFにする場合、これより下の設定は全てデフォルトのままで大丈夫です！

タイトル

アピールエリアに表示されるメッセージのタイトルを設定します。

当ブログの設定は『なし（デフォルト）』です。

メッセージ

アピールエリアに表示されるメッセージのメッセージ部分を設定します。

当ブログの設定は『なし（デフォルト）』です。

ボタンメッセージ

アピールエリアに表示されるボタンの文字を設定します。

当ブログの設定は『なし（デフォルト）』です。

ボタンリンク先

アピールエリアに表示されるボタンのリンク先を設定します。

当ブログの設定は『なし（デフォルト）』です。

ボタンリンクの開き方

アピールエリアに表示されるボタンのリンクの開き方を設定します。

当ブログの設定は『同じタブで開く（_self）』です。

ボタン色

アピールエリアに表示されるボタンの色を設定します。

当ブログの設定は『なし（デフォルト）』です。

さび

Cocoon設定はここまで！

CSSで装飾をカスタマイズ

続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。

▼注意！！！

むさ

当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください。

/* ①アピールエリア */
#appeal {
	height: calc(100vw * calc(200 / 1260));
}

/* ②アピールエリアのアニメーション設定 */
.home #appeal {
	animation : appeal-fadein 0.8s ease-in;
}

/* ③アピールエリアのアニメーション詳細 */
@keyframes appeal-fadein{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

このコードをコピーして、スタイルシート(style.css)に貼り付けてください。
皆様のブログに合わせて微調整する方法を解説します！