【Cocoon】アピールエリアの設定方法｜おしゃれなデザインでPV数・収益力UP！

「アピールエリアの設定方法を知りたい」

「アピールエリアに設定する画像のサイズは？」

「アピールエリアが表示されない、どうして？」

この記事では、そんな方に向けて、Cocoonでアピールエリアの設定方法を解説します。

この記事を読めば、アピールエリアの設定方法はもちろん、

• 画像サイズ
• スマホで画像が切れる場合の対処法
• 表示されない場合の対処法

もかんたんに理解できるようになります。

私も今後アピールエリアを使おうと思い、学んだ知識を本記事に記します。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

アピールエリアとは？

アピールエリアとは、ユーザーにアピールしたい内容やコンテンツをヘッダー下に表示できる機能のことです。

下の画像は、PC・スマホでのアピールエリアの見え方です。

Cocoonでアピールエリアを設定することで、

• ユーザーの目を引くことができる
• 読んでほしい記事に誘導できる
• ブログ全体がおしゃれになる

というメリットがあります。

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

Cocoonでアピールエリアを設定する方法は、下記の通りです。

アピールエリアで設定できる項目は、下記6つあります。

それぞれ詳しく解説します。

表示するページを選ぶ

「アピールエリアの表示」では、

• 表示しない
• 全ページで表示
• フロントページのみで表示
• 投稿・固定ページ以外で表示
• 投稿・固定ページのみで表示
• 投稿ページのみで表示
• 固定ページのみで表示

の7つの中から選べます。

高さを決める

パソコンで表示するアピールエリアの高さを

• 200〜800px

で設定できます。

背景画像を選ぶ

「エリア画像」では、アピールエリアの背景に表示する画像を設定できます。

画像は

• Canva
• 写真AC
• O-DAN

など、フリー素材を提供しているサイトの利用もおすすめです。

背景画像を固定する

アピールエリアに設定した画像を固定でき、下にスクロールしても移動しなくなります。

背景色を決める

「エリア背景色」では、アピールエリアの背景色を設定できます。

背景画像を設定すると、背景色を設定しても隠れるので意味ありません。

設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。

カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。

テキストメッセージを入れる

「アピールエリア表示」では、アピールエリアに

• タイトル
• メッセージ

を設定するかどうか決めます。

ボタンを設定する

ボタンでは、下記4つの項目を設定できます。

• ボタンメッセージ
• リンク先
• リンクの開き方
• 色

Cocoonアピールエリアで設定する画像について

Cocoonアピールエリアで設定する

をそれぞれ詳しく解説します。

おすすめの画像サイズ

アピールエリアに設定する画像のおすすめサイズは、幅1920pxです。※高さは200〜800pxの範囲内で自由。

Stat Counterが発表しているデータをみると、日本で使われているPCの画面サイズのシェア率が高いのは

• 幅1920×高さ1080px

です。(2023年9月時点の情報)

もし、アピールエリアに設定する画像を幅1920pxより小さくすると、幅1920pxのパソコン画面で見た場合、画像が引きのばされて画質が悪くなります。

ですので、日本で使われているPCのシェア率が高く、キレイな画質で見ることができる幅1920pxになるよう画像をリサイズしましょう。

画像をリサイズする方法は、デザインツール「Canva」を使えばかんたんにできますので、下の記事を参考にしてください。

画像を設定するときの注意点

画像をアピールエリアに設定したとき、

• PCではちゃんと画像が表示されるが
• スマホでは画像が切れてしまう

ということがあります。

アピールエリアに画像を設定するときは、左右が切れてもいい画像を選びましょう。

どうしても画像が切れないように設定したい場合は、左右が切れてもいいように同じ画像を付け加えると、スマホでもキレイに表示されます。

スマホでもアピールエリアの画像をキレイに表示させるには、Canvaを使えばできます。

_{＼クリックで開く／}

Cocoonアピールエリアでよくある質問

Cocoonのアピールエリアでよくある質問

です。

アピールエリアが表示されない原因は？

Cocoonでアピールエリアが表示されない原因は、Cocoon設定でアピールエリアの表示を「表示しない」に設定しているからです。

ですので、アピールエリアの表示を「表示しない」以外に設定すれば、表示されるようになります。

アピールエリアとヘッダーの違いは？

アピールエリアとヘッダーの1番大きな違いは、ボタンリンクがあるかどうかです。

• ヘッダーにはボタンリンクがなく、
• アピールエリアにはボタンリンクを設定できます。

ボタンリンク以外の項目で

• 画像の設定
• テキストの入力
• 高さの設定
• 背景色の変更

は、アピールエリアとヘッダーで設定可能です。

Cocoonでヘッダーの設定方法を知りたい人は、下の記事を参考にしてください。

アピールエリアとおすすめカードの違いは？

アピールエリアとおすすめカードの大きな違いは、

• 表示される画像のサイズ
• 表示させたい記事数

の2つです。

Cocoonでおすすめカードの設定方法が知りたい人は、下の記事を参考にしてください。

当ブログ愛用「SWELL」のアピールエリアは画像が切れない！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLのアピールエリアでは、

• PC・スマホ別で画像の設定ができたり
• PC・スマホ別で画像の高さを設定できたり
• PC・スマホ別で画像のスライダー設定ができたり

カスタマイズできる項目が豊富です。

とくに気に入ったポイントは、表示させる画像をPC・スマホ別で変えられるので、デバイスごとに合ったサイズの画像を挿入できます。

つまり、画像が切れる心配もありません。

PC・スマホそれぞれで、アピールエリアに挿入する画像を切れずに表示したい人は、SWELLもおすすめですよ。

まとめ：アピールエリアで収益力UP

今回は、Cocoonでアピールエリアの設定方法を紹介しました。

アピールエリアにリンクするURLは、収益用の記事やアフィリエイト広告がおすすめ！

アフィリエイトを始めるにはASPへの無料会員登録が必須です。

ASPの登録がまだの人は、収益化のチャンスを逃していますよ…

以下の記事では、アピールエリア以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いています。

新しい発見があるかもしれないので、見てみてください。