Cocoonの「アピールエリア」はサイトの第一印象を決める重要なパーツ。ここを整えるだけでトップページの見栄え・ブランド感・読者の滞在率が大きく変わります。
この記事では、人気テーマSWELL のようなフルスクリーン表示＋スクロール矢印＋背景ズームをCocoonで実現する方法を、初心者でも迷わず導入できるよう丁寧に解説します。
前半では基本設定、後半では実装に必要なCSS（※有料公開）をまとめて紹介します。
トップページ全体を「サイト型レイアウト」に整える方法をご紹介。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計520件（月間約20件）のご購入実績
（2025年11月現在） - カスタマイズを丁寧にサポート
アピールエリアの魅力・SWELL風デザインのポイント
Cocoonのアピールエリアは、ページを開いた瞬間に「伝えたい世界観」を一発で示せるのが最大の魅力です。トップページの印象づけや導線づくりに大きな効果があります。
▼ こんな場面で特に効果的
- ブログをブランドっぽく見せたい
- 写真を大きく見せたい（旅行・カメラ・アウトドア系）
- 特定の記事・サービスを強く訴求したい
- LP（ランディングページ）風のトップページを作りたい
SWELL風デザインのポイント
「SWELL風にしたい」というニーズはとても多いですが、押さえるべきポイントはシンプルです。
- フルスクリーン背景
- 画面いっぱいに広がる背景で、世界観をダイレクトに伝える
- PC・スマホ両方で最適化され、画像の見え方が改善
- スクロール誘導矢印
- ふわっとしたアニメーションで下方向へ自然に誘導
- 読者の離脱を防ぎ、続きを読みやすくする
- 追加演出（さらにアピール力アップ）
- 背景のズームイン／ズームアウトアニメーション
- 明るさ・ぼかしの調整で印象を強化
これらを組み合わせることで、単なるヘッダー下画像が視線をコントロールできる強力なファーストビューに変わります。
完成イメージ（デモ）
実際の完成イメージはデモページで確認できます。
アピールエリアのカスタマイズ前に確認しておく設定（Cocoon側）
カスタマイズする前に、テーマ側の基本設定を確認しましょう。
サイト幅の設定
- Cocoon設定を開く
WordPress管理画面 → Cocoon設定 > 全体 > サイト幅の均一化 - 「サイト幅を揃える」のチェックを外す
- ONの場合、サイト全体幅が1256pxに固定され、大画面で左右に余白が目立ちます。
- フルスクリーン表示や背景画像を最大限活かすため、チェックを外すのがおすすめです。
ヘッダーとロゴの設定
ロゴデザイン
- カラフルな背景画像を使う場合は、白や黒などの単色ロゴが最適
- 背景が大きく表示されるため、サイト名ロゴはシンプルにするのがおすすめ
PC表示設定
- ラベルヘッダーレイアウトを選択
Cocoon設定 → ヘッダー → トップメニュー
- トップメニューには3種類あり、どれでもOK
- サイト名（またはロゴ）＋グローバルメニューが横一列に並ぶ
- ラベルヘッダー固定オプションは無効化
固定表示はCSSで設定します。
- ラベル補足
- 補足：グローバルナビのメニュー設定方法はCocoon公式サイトを参照してください。
モバイル表示設定
用途に応じて自由に選択できます。
- ボタンを表示しない（ミドルメニューのみ）
- トップメニュー表示
- ヘッダーモバイルボタンのみ表示
- フッターモバイルボタンのみ表示
- ヘッダー・フッターモバイルボタン両方表示
補足：下のプレビューは「ヘッダーモバイルボタン」のみ表示の例です。
アピールエリアの基本設定
設定画面の開き方
- WordPress管理画面から「Cocoon設定」
- 上部タブで「アピールエリア」をクリック
設定する主な項目
- ラベルアピールエリアの表示
- 「フロントページのみ」を選択
→ 「フロントページのみ」を選択（不要なページに表示されない）
- 「フロントページのみ」を選択
- ラベルエリア画像
- 表示したい背景画像を選択またはアップロード
- 推奨サイズ：横幅1920px程度
- 「アピールエリア背景画像の固定」にチェックすると、スクロールしても背景が固定される
- ラベルテキストエリア表示
- 画像のみ表示する場合はチェックを外す
- タイトル・メッセージ・ボタンを任意で設定可能
- HTMLも使用できるので、リンクや装飾も自由
スクロール誘導の矢印を追加（HTML）
アピールエリア下部に矢印を表示させ、訪問者のスクロール誘導を強調できます。
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のパターン機能を活用すると便利です。
- ブロックをパターン登録 → ショートコードで呼び出し → 簡単再利用◎
- 設定後は「変更をまとめて保存」 をクリック
ここまでで必要な基本設定は完了です。
アピールエリアをフルスクリーン化するCSS
基本設定が整ったら、いよいよアピールエリアを画面いっぱいに使ったフルスクリーン表示へカスタマイズしていきます。
ここからは実際にCSSを追加して、SWELL風の迫力あるファーストビューを作るステップです。
- 読み込み時の背景拡大・縮小アニメーション
- スクロール矢印のデザイン変更
- モバイル表示に合わせた調整
- 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でちょこちょこカスタマイズして使っています。これからブログを始められるのですね！他の方のブログを見るのが好きなので開設された際にはお邪魔させてください^^