Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重要なパーツ。第一印象を決める部分だからこそ、デザインを工夫すれば訪問者の関心をグッと引き寄せることができます。
この記事では、記事では、無料テーマCocoonを使った アピールエリアのカスタマイズ方法 を解説します。有料テーマ「SWELL」風のデザインを参考に、アピールエリアをフルスクリーン化し、ダイナミックで印象的なファーストビューを作る手順をご紹介。さらに、背景アニメーションやスクロール矢印などちょっとした動きを加える工夫も取り上げます。
記事前半では基本設定を解説し、実装に必要なCSSコードは有料公開中です。Cocoonを使いつつ、見栄えの良いトップページを演出したい方はぜひ参考にしてください。
さらに、トップページ全体を「サイト型」に整える方法も関連記事で紹介していますので、あわせてチェックしてみてください。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計500件（月間約20件）のご購入実績
（2025年9月現在） - カスタマイズを丁寧にサポート
Cocoonアピールエリアの特徴とカスタマイズ概要
Cocoonの「アピールエリア」はデフォルトでも十分に使えますが、工夫次第でより印象的に仕上げることができます。ここでは、アピールエリアの基本的な特徴と有料テーマ「SWELL」風にカスタマイズする際のポイントをご紹介します。
アピールエリアの魅力とは？
ヘッダー直下に配置され、大きなビジュアルで訪問者の目を引きます。
キャッチコピーやボタンを管理画面から簡単に編集でき、リンク先を設定すれば導線としても活用可能。
HTMLが使えるため、改行や装飾、ロゴ挿入など自由にカスタマイズできます。
SWELL風にカスタマイズするポイント
画面の高さ全体をアピールエリアに割り当て、ダイナミックなファーストビューを実現。訪問者の視線を一気に集めます。
アピールエリア下部に「矢印アイコン＋アニメーション」を配置し、次のコンテンツへスムーズに案内。
ページ読み込み時に動きのあるファーストビューで印象を強めます。ズームイン（拡大）とズームアウト（縮小）の2種類を準備。
このように、Cocoonのアピールエリアは標準機能を活かしながら、CSSや少しの工夫を加えることで「サイトの顔」として大きく印象を変えることができます。
実装イメージと完成デモ
以下は、カスタマイズを適用した Cocoonアピールエリア の完成イメージです。実際の動きはデモページでご確認いただけます。
最適な画像サイズ・形式の選び方
Cocoonのアピールエリアに適した画像サイズや形式を押さえておくと、見た目と表示速度の両方を最適化できます。
推奨サイズ
- 横幅：1920pxを推奨
→ 画面幅に応じて画像が拡大・縮小されるため、フルHD以上の横幅が目安です。
→ 高解像度ディスプレイや大画面モニターでも粗さが目立ちません。
高さは自由ですが、横長（4:3）または(16:9)の比率が使いやすいです。
推奨画像形式
- JPEG … 写真やグラデーションが多い画像に向いています。
- WebP … JPEGより容量を小さくでき、表示速度を改善できます。
無料ツールやプラグイン（例：EWWW Image Optimizer、ShortPixel）を活用して、圧縮＋WebP変換を行うのがおすすめ。
カスタマイズの際の注意点
- 通知エリアの設定はオフにする
フルスクリーンデザインを維持するため、Cocoon設定で通知エリアを無効にしてください。 - スキンによる影響
今回のカスタマイズは「スキンなし」で検証済みです。別のスキンを使用している場合は、見た目や余白が異なる可能性があります。
Cocoon管理画面での初期設定（ヘッダー・ロゴ・アピール項目）
ここからは、CocoonアピールエリアをSWELL風にフルスクリーン表示にする具体的な手順を解説します。
ヘッダーとロゴの設定
ロゴデザイン
- カラフルな背景画像を使う場合は、白や黒などの単色ロゴが相性良〇。
- 背景が大きく表示されるため、サイト名ロゴはシンプルにするのがおすすめです。
PCの表示設定
- ラベルヘッダーレイアウトの選択
「Cocoon設定」→「ヘッダー」に進む
- ラベル「ヘッダーレイアウト」でトップメニューを選択
- トップメニューには3種類ありますが、どれでもOK
- 選択すると、サイト名（またはロゴ）＋グローバルメニューが横一列に並びます
- ラベルヘッダー固定オプションは無効化
- 固定表示はCSSで設定します
モバイルの表示設定
モバイル表示は自由度が高く、用途に応じて選べます。
補足：下のプレビューは「ヘッダーモバイルボタン」のみ表示の例です。
アピールエリア項目設定
続いてCocoonアピールエリアの設定を行い、フルスクリーンで印象的なファーストビューを作ります。
設定画面の開き方
- WordPress管理画面から「Cocoon設定」を開く
- 上部タブで「アピールエリア」をクリック
設定する主な項目
- ラベルアピールエリアの表示
- 「フロントページのみ」を選択
トップページにだけ表示される設定で、不要なページに表示されません
- 「フロントページのみ」を選択
- ラベルエリア画像
- 表示したい背景画像を選択またはアップロード
- 推奨サイズ：横幅1920px程度
- 任意で「アピールエリア背景画像の固定」にチェックを入れると、スクロールしても背景画像が固定された動きになります
- ラベルテキストエリア表示
- 画像のみ表示する場合はチェックを外す
- 表示する場合は以下を設定
タイトル 任意のタイトル。太字で表示されます（例：「Welcome to my blog」） メッセージ 任意のメッセージ。サイトをアピールする文章を入力可能。HTMLが使えるので、リンクや装飾も自由に追加できます ボタン 任意で設置可能。CTA（Call To Action）として活用すると効果的です
アピールエリアに矢印を追加（スクロール誘導）
アピールエリア下部に矢印を表示させ、訪問者のスクロール誘導を強調できます。
See the Pen スクロール｜矢印 by Turicco (@Turicco) on CodePen.
HTMLの設定
アピールエリアのメッセージエリアに以下を追加してください。
<div class="scroll-wrap">
<div class="scroll-arrow">
<span class="scroll-icon"></span>
</div>
<div class="scroll-text">Scroll</div>
</div>
- メッセージエリアにはHTMLが入力できるので、サイトロゴや検索ボックスなども配置です。工夫次第で使い方はいろいろ。
- 入力エリアが狭いためWordPressのパターン機能を活用すると便利です。
- ブロックをパターン登録 → ショートコードで呼び出し → 簡単再利用◎
設定完了
- すべての変更を確認後、「変更をまとめて保存」 をクリック
- 設定完了です
ここまでで、Cocoonアピールエリアをフルスクリーン化する基本設定をご紹介しました。より印象的なデザインに仕上げる方法は、有料公開で詳しく解説しています。
CSSでフルスクリーン化する実装方法
ここでは、Cocoonのアピールエリアをフルスクリーン表示にするためのCSS設定手順をご紹介します。矢印のデザインやアニメーションも設定することで、スクロール誘導を強化できます。
- CSSコードを子テーマに追加
- 「ファイルを更新」をクリックして保存
- トップページを確認し、正常に動作していれば完了
- 読み込み時の拡大・縮小アニメーション → CSS追加
- スクロール矢印のデザイン変更 → HTML・CSS入れ替え
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
- 子テーマ（Cocoon Child）が選択されていること を確認します。
- ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
600円（税込）
Comment 記事の感想を書き込んでいただけると幸いです
はじめまして！はっちゃんさんのturicco.comのトップデザインが完璧すぎて感動したのでこちらの記事を購入させていただきました
やりたいことはほぼ出来たので大満足です( ´∀｀)
私はサイト制作は初めてでコードのことはさっぱりわかってないのですが独学でどうにか作りたいと悪戦苦闘しています。
ご質問なのですがturicco.comのようにトップ画像をアニメーションにする場合、アピールエリアではなく固定ページで作成する必要があるのでしょうか？
別記事のアニメーション作成の内容とこちらのアピールエリアの記事で行けると思ったのですが、アニメーション作成記事内で書いていただいたHTMLや CSSのコードをアピールエリアの画像に反映させるやり方が理解できていません。
ただ、本記事を元に作成したやり方でスクロール矢印や検索フォームなどはとてもバランスが良く、あとは画像をスライドできれば。。。と言う状況で、逆に固定ページにて作り直すとなると今度はスライドの上にテキストや検索フォームを置くやり方を再調査しなければなので、可能ならアピールエリアの画像をアニメーション化したいと思っています。
ご教示頂けないでしょうか
> TOSHIさん
はじめまして。
記事を見てくださりありがとうございます。
アピールエリアで複数画像を切り替えたいという認識で合っていますか？
Cocoonのアピールエリアは
< div id="appeal" class="appeal">< div class="appeal-in wrap">
< div class="appeal-content">…< /div >
< /div >
< /div >
という1枚の背景（.appeal）を前提とした設計で画像は1枚しか指定できません。
複数画像を使いたい場合は「応用」になります。
方法として以下の３通りです。
①アピールエリアのメッセージ欄にHTML（画像）を入れる
コンテンツ等を入れる場合はHTMLで追加する必要があります
②疑似要素を活用する
疑似要素::beforeと::afterを使えば2枚までなら交互に画像を表示することはできそうです。
/* ———————————
アピールエリア背景スライダー
——————————— */
.appeal {
position: relative;
overflow: hidden;
}
/* 背景レイヤー共通設定 */
.appeal::before,
.appeal::after {
content: “”;
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
animation: appealSlide 4s infinite;
z-index: 0;
}
/* 背景画像ごとにレイヤー追加 */
.appeal::before {
background-image: url(‘https://画像①.jpg’);
animation-delay: 0s;
}
.appeal::after {
background-image: url(‘https://画像②.jpg’);
animation-delay: 2s;
}
/* フェード切り替えアニメーション */
@keyframes appealSlide {
0%, 75%, 100% { opacity: 0; }
25%, 50% { opacity: 1; }
}
/* 背景より上にコンテンツを表示 */
.appeal-in {
position: relative;
z-index: 1;
}
アニメーションの切り替えタイミング等は以下の記事を参考に記載しています。
③やはり固定ページを使っての作成が一番実用的だと思います。（このサイトも固定ページを使っています）
いずれの方法も標準機能ではないため、自分でHTMLとCSSの追加が必要です。
早速のお返事ありがとうございます。
とてもわかりやすく教えていただけて助かりました！！
思っていた方向性ではあったので、どうにか理解が出来る回答で安心しました笑
固定ページにてアニメーション画像の挿入は理解できそうなので、あとはそこに検索フォームやテキストを乗せる仕組みがわかればどうにかなりそうです( ´∀｀)
今はまだコピペでコードを貼り付けているだけで何も理解してないので、まずはコードの意味の理解を深める必要がありそうです
一度自分で消化してみますので、どうにもならなくなったらまたご相談させてくださいm(_ _)m
画像の中にテキスト等を入れる際は上下中央寄せも必要かと思います。
慣れないと大変ですけど頑張ってくださいね。
早速のご返信ありがとうございます！
追加していただいたCSSで追尾されなくなりました。
ありがとうございました＾＾
お世話になります。
とてもためになる記事をありがとうございます＾＾
ひとつ質問させていただきたいのですが、画面を下にスクロールした時にロゴとヘッダーメニューが追尾してきます。
追尾しても背景が透明で読みづらいので、追尾時のみの背景色を設定する方法、もしくは追尾させない方法を教えていただけますでしょうか。
よろしくお願いいたします。
あいこ さん
記事を見ていただきありがとうございます。
このカスタマイズはヘッダー（ロゴとヘッダーナビ）を固定することで、少ないCSS記述でのフルスクリーンを実現しています。
.header-containerのposition: fixed;/*固定*/の行を削除すれば固定は解除されますが、アピールエリアの起点がヘッダー下となります。（画像参照）
対応として、CSSを記事の最後に追加しましたのでお試しください。
ヘッダーを固定しない別の方法になります。
よろしくお願いします。
初めまして。
yukimiと申します。
Cocoonのカスタマイズがとても分かりやすく、TOPページを参考にさせていただきました。（以前はブログ形式だったのですが、サイト形式にしたく探しているとこちらのサイトにたどり着きました。）
一つお尋ねしたいのですが、はっちゃんさんのTOPページのアピールエリアにて検索ウィンドウがあるかと思いますが、そちらの方法はどこか記事で掲載されているのでしょうか。
その方法を掲載されているページを教えていただけますと助かります。
私もサイトを運用している上で、TOPページで検索できるようにしたくコメントをさせていただきました。
yuumikiさん、初めまして。
ブログを参考にしていただきコメントありがとうございます。
アピールエリア内の検索フォームについては下記記事で公開しています。
Cocoonアピールエリアに検索窓（フォーム）を設置する方法／ショートコード利用
はっちゃんさん
ご丁寧に対応いただき、ありがとうございました。
解決しました！
今後も参考にさせていただき、サイト作りに励んでいこうと思います。
はっちゃんさん
初心者のため、簡単なカスタマイズにつまづいていました。教えていただき、ありがとうございます！無事、反映できました。
ただ、これまでスマホ表示では、アピールエリア部分にあるエリア画像が画面いっぱいに広がって見栄えが良かったのですが、Smart Slider3を設定した上で、教えていただいたCSS設定を行ったところ、エリア画像が小さくなってしまいました。
これは、どんな設定が影響しているのでしょうか？
ご教示いただけますと、助かります。
Smart Slider3は縦横比率を保ったまま表示されるからですね。
Smart Slider3のダッシュボードで設定する（min-height）か、CSSでメディアクエリ部分の高さを調整されてみてください。
/*834px以下*/
@media screen and (max-width: 834px){
.n2-ss-slider .n2-ss-slide{
min-height:ここに高さを入力!important;/*スマホでの高さ調整*/
}
参考として100vhで画面いっぱいの高さとなります。
初めまして。
初めてのWordpress、そしてCocoonでのサイト制作にこちらのページを参考にして、TOPページを作ってみました。
しかし、やはり複数画像のスライドを実現したく、Smart Slider3でTOP画像をスライド表示にしました。
なのですが・・・、このページで設定されている
◉背景色は白を透過させる
◉背景画像にぼかしを入れる
◉画像の高さ設定（PC／スマホと別々に）
＊こちらで用意していた画像と、上記の設定の相性が良かったので。
を残したいのです。
Smart Slider3でのスライドショーを生かしたまま、上記の３項目を反映させるためのCSSの書き方など、設定方法があれば教えていただけると助かります。
宜しくお願い致します。
マークさん
初めまして。
Smart Slider3で作成したスライダーにも反映できますよ。
セレクタ部分（どの部分にCSSを反映させるか。このカスタマイズではappealやappeal-inなど）をSmart Slider3で作成したスライダーに合わせるだけでよいかと思います。
具体的には、
/*Smart Slider3***********************/
div#n2-ss-2 .n2-ss-slide {
background-color:rgba(255,255,255,.2);/*背景色、白を透過させる*/
backdrop-filter: blur(3px);/*ぼかし*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.n2-ss-slider .n2-ss-slide{
min-height:calc(100svh – 46px)!important;/*スマホでの高さ調整*/
}
}
で反映しましたが、ご自身のサイトで検証されてみてください。
【参考ページ】
『釣りっこ』 https://fishing.turicco.com/
（実際にSmart Slider3プラグインを入れてみました。後日スライダーは削除する予定です）
検証するには？
『デベロッパーツールを使ったセレクタの調べ方とCSSコードの書き方／初心者向け』
とてもわかりやすいカスタマイズ解説、ありがとうございました！
やりたかったことができて、とても嬉しいです。
> 千柳亭春宵さん
初めまして。
お役に立てて嬉しいです。
サイトを拝見させていただき、綺麗にアピールエリアができあがって良い感じですね！
ご丁寧にコメントありがとうございました^^
はっちゃんさん
できました！！
いただいたCSSを追加しつつ、アピールエリアに使っている画像のサイズが小さかったので、その大きさに合わせて、「パソコンでの高さ調整」を小さくしたら綺麗になりました！
何度も教えてくださり、本当にありがとうございました！
はっちゃんさん
ありがとうございます！
CSS追加したところ、Scrollボタンは下方配置できました。
アピールエリア下の余白はなくならなかったのですが、以前追加したCSSが邪魔してしまっているのかもしれません…知識がなく自分でも解読不能です(^^;
はっちゃんさんの他の記事も参考にさせていただきますね！
あたるさん
Scrollボタン位置調整できてよかったです。
アピールエリア下に配置しているコンテンツを指定して余白を0にすればいいので、ご自身のサイトを確認してみてください。
コンテンツエリア上部余白を0にするCSSではどうでしょうか？
.content {
margin-top: 0;
}
はっちゃんさん、はじめまして。
ずっと悩んでいたトップページ、この記事にたどり着いて、まさにイメージ通りに仕上がりました！ありがとうございました。
ただ、２つ問題があったので、質問させてください。
①PCで見るとアピールエリアの画像とフロントページの間に余白ができてしまいます。設定で余白をなくすことはできますか？
②スマホで見るとScrollの文字が中央あたりにきてしまいます。画像の下方に配置することはできますか？テキストとボタンを画像の少し下の方に配置する方法などあれば、教えていただきたいです。
> あたるさん
はじめまして！
年末年始しばらく帰省していたためお返事が遅くなりすみません。
お問い合わせの件について。
実際のサイトを拝見していませんので一般的に考えられる範囲でとなりますが…
①アピールエリア下の余白
.main{
margin-top:0;
}
②アピールボタンの位置調整
/*アイコンを下に配置*/
.appeal{
position:relative;
}
.appeal-button{
position: absolute;
bottom:30px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
のCSS追加で下方配置できるかと思います。
参考になさってください^^
初めまして。アピールエリアの「背景色は白を透過させる」のところをswellのように網網にする場合ってどこをいじればいいんでしょうか?
>cocoonユーザーさん
初めまして！
私も網掛けはやったことがなかったのですが、試しにアピールエリアに疑似要素を置いてみました。
なんとなくSWELLっぽいかな？とは思います。
こなきあさん
Twitterではいつもリプ、いいねありがとうございます。
こちらのカスタマイズはアピールエリアを使うので、既にアピールエリアのCSSを入れている、またはCocoonのスキンを使っているとレイアウトに影響があるかもしれません。
リセットしてからが理想ですけど、一度この記事のCSSをコピペしてみておかしいところを手直ししていく方法でもよいかと思います。
上手くいかないとき、お答えできる範囲でサポートしますのでこちらでもTwitterのDMでも大丈夫なのでご連絡ください^^
はっちゃんさん、ご丁寧にありがとうございます。
こちらこそいつもありがとうございます。
アピールエリアを使用していたことがあるのですが、CSSは追加していない気がします。
アイコンを丸くするとか、ヘッダーのロゴが出ないようにするとかその辺をいじった気がします。
Cocoonのスキンはなしにしているので、リセットしてからが理想ですが、アピールエリアをコピペさせていただいてやってみようと思います。
また質問すると思いますのでよろしくお願いしますm(__)m
はっちゃんさん、こんばんは。
Twitterでお聞きしようか迷ったのですが、こちらにしました。
Turiccoブログのようにカスタマイズしたいと思ったのですが、
これまでに何度もCSSを追加してきているのですが、リセットしてからの方が良いのでしょうか？初歩的な質問ですみません。
これからブログ書きたいなと思っています。
このブログCocoonで作っているのですか？
可愛くてすごくいいなと思いました。
こんな素敵なブログを作れるようになりたいです。
ありがとうございます！参考にさせて下さい！
> ほんちょういくみさん
ありがとうございます♪Cocoonでちょこちょこカスタマイズして使っています。これからブログを始められるのですね！他の方のブログを見るのが好きなので開設された際にはお邪魔させてください^^