![](https://www.kamecompass.com/wp-content/uploads/2024/01/0-5.png)
「アピールエリアの設定方法を知りたい」
「アピールエリアに設定する画像のサイズは?」
「アピールエリアが表示されない、どうして?」
この記事では、そんな方に向けて、Cocoonでアピールエリアの設定方法を解説します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
こんにちは、かめコンパスです!
この記事を読めば、アピールエリアの設定方法はもちろん、
- 画像サイズ
- スマホで画像が切れる場合の対処法
- 表示されない場合の対処法
もかんたんに理解できるようになります。
私も今後アピールエリアを使おうと思い、学んだ知識を本記事に記します。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
アピールエリアとは?
アピールエリアとは、ユーザーにアピールしたい内容やコンテンツをヘッダー下に表示できる機能のことです。
下の画像は、PC・スマホでのアピールエリアの見え方です。
![PC画面で見たアピールエリア](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-6.png)
![PC画面で見たアピールエリア](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-6.png)
![スマホ画面で見たアピールエリア](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-4.png)
![スマホ画面で見たアピールエリア](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-4.png)
Cocoonでアピールエリアを設定することで、
- ユーザーの目を引くことができる
- 読んでほしい記事に誘導できる
- ブログ全体がおしゃれになる
というメリットがあります。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
収益用記事をリンク先に設定してもいいね!
Cocoonアピールエリアの設定方法
Cocoonでアピールエリアを設定する方法は、下記の通りです。
WardPress管理画面で、Cocoon設定⇒アピールエリアの順にクリックする
![「Cocoon設定」、「アピールエリア」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1-2.png)
![「Cocoon設定」、「アピールエリア」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1-2.png)
設定し終えたら、変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-3-2.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-3-2.png)
アピールエリアの設定完了!
アピールエリアで設定できる項目は、下記6つあります。
それぞれ詳しく解説します。
表示するページを選ぶ
「アピールエリアの表示」では、
- 表示しない
- 全ページで表示
- フロントページのみで表示
- 投稿・固定ページ以外で表示
- 投稿・固定ページのみで表示
- 投稿ページのみで表示
- 固定ページのみで表示
の7つの中から選べます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
どのページに表示させるか自由に選べるよ!
高さを決める
パソコンで表示するアピールエリアの高さを
- 200〜800px
で設定できます。
![アピールエリアの高さを示す場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-1-2.png)
![アピールエリアの高さを示す場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-1-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
スマホでは設定した高さが無効になるよ
背景画像を選ぶ
「エリア画像」では、アピールエリアの背景に表示する画像を設定できます。
画像は
など、フリー素材を提供しているサイトの利用もおすすめです。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ブログのデザインを決める上で重要!
背景画像を固定する
アピールエリアに設定した画像を固定でき、下にスクロールしても移動しなくなります。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
固定すると画面に表示される本文が少なくなるので、あまりオススメしないかな
背景色を決める
「エリア背景色」では、アピールエリアの背景色を設定できます。
![「エリア背景色」を設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-1-1.png)
![「エリア背景色」を設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-1-1.png)
設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。
![カラーコードを入力する場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-2-1.png)
![カラーコードを入力する場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-2-1.png)
カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/07/アイキャッチ画像-5.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/07/アイキャッチ画像-5.jpg)
テキストメッセージを入れる
「アピールエリア表示」では、アピールエリアに
- タイトル
- メッセージ
を設定するかどうか決めます。
![「アピールエリア表示」で、タイトル・メッセージなしに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-1-1.png)
![「アピールエリア表示」で、タイトル・メッセージなしに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-1-1.png)
![「アピールエリア表示」で、タイトルありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-2-1.png)
![「アピールエリア表示」で、タイトルありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-2-1.png)
![「アピールエリア表示」で、メッセージありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-3-1.png)
![「アピールエリア表示」で、メッセージありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-3-1.png)
![「アピールエリア表示」で、タイトル・メッセージありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-4.png)
![「アピールエリア表示」で、タイトル・メッセージありに設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-4.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
背景画像を目立たせるために、タイトルとメッセージを設定しない選択肢もあるよ!
ボタンを設定する
ボタンでは、下記4つの項目を設定できます。
- ボタンメッセージ
- リンク先
- リンクの開き方
- 色
![アピールエリアにボタンメッセージを設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-5-1-1.png)
![アピールエリアにボタンメッセージを設定した様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-5-1-1.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
外部リンクを設定する場合は、「新しいタブで開く」がおすすめ!
Cocoonアピールエリアで設定する画像について
Cocoonアピールエリアで設定する
をそれぞれ詳しく解説します。
おすすめの画像サイズ
アピールエリアに設定する画像のおすすめサイズは、幅1920pxです。※高さは200〜800pxの範囲内で自由。
Stat Counterが発表しているデータをみると、日本で使われているPCの画面サイズのシェア率が高いのは
- 幅1920×高さ1080px
です。(2023年9月時点の情報)
もし、アピールエリアに設定する画像を幅1920pxより小さくすると、幅1920pxのパソコン画面で見た場合、画像が引きのばされて画質が悪くなります。
ですので、日本で使われているPCのシェア率が高く、キレイな画質で見ることができる幅1920pxになるよう画像をリサイズしましょう。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
画像の高さは200~800pxの範囲内でお好みでどうぞ!
画像をリサイズする方法は、デザインツール「Canva」を使えばかんたんにできますので、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3-1.jpg)
画像を設定するときの注意点
画像をアピールエリアに設定したとき、
- PCではちゃんと画像が表示されるが
- スマホでは画像が切れてしまう
ということがあります。
![PC画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-4.png)
![PC画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-4.png)
![スマホ画面で見たアピールエリアの画像が切れている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-2-2.png)
![スマホ画面で見たアピールエリアの画像が切れている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-2-2.png)
アピールエリアに画像を設定するときは、左右が切れてもいい画像を選びましょう。
どうしても画像が切れないように設定したい場合は、左右が切れてもいいように同じ画像を付け加えると、スマホでもキレイに表示されます。
![PC画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-3-1.png)
![PC画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-3-1.png)
![スマホ画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-4.png)
![スマホ画面で見たアピールエリアの画像が切れていない様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-4.png)
スマホでもアピールエリアの画像をキレイに表示させるには、Canvaを使えばできます。
\クリックで開く/
Canvaでアピールエリアの画像を作る方法
アップロード⇒ファイルをアップロードの順にクリックし、画像を挿入する
![「アップロード」、「ファイルをアップロード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-2-2.png)
![「アップロード」、「ファイルをアップロード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-2-2.png)
Canvaで画像を挿入する方法について、詳しくは下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/08/アイキャッチ画像-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/08/アイキャッチ画像-1.jpg)
- 画像をクリックでページに挿入
- ページの左右に余白が残るように画像を引きのばす
![ページに画像を挿入し、画像を左右に引きのばしている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-3.png)
![ページに画像を挿入し、画像を左右に引きのばしている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-3.png)
- 画像を複製
- 複製した画像の幅を切り取られていいサイズに縮める
![画像を複製し、その画像の幅を切り取られていいサイズに縮めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-4.png)
![画像を複製し、その画像の幅を切り取られていいサイズに縮めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-4.png)
縮めた画像をもとの画像の横に重ねる
![縮めた画像をもとの画像の横に重ねている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-5.png)
![縮めた画像をもとの画像の横に重ねている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-5.png)
- 縮めた画像を複製
- 複製した画像を余白に埋める
![縮めた画像を複製し、その画像を余白に埋めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-6.png)
![縮めた画像を複製し、その画像を余白に埋めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-6.png)
左側の余白が切り取られてもいい画像で埋まりました。
右側も同じように画像を複製して、余白を埋める
![反対側の余白も同じように画像を複製して、余白を埋めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-7.png)
![反対側の余白も同じように画像を複製して、余白を埋めている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-7.png)
右側の余白も切り取られてもいい画像で埋まりました。
次は、作った画像をダウンロードします。
共有をクリックする
![「共有」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-8.png)
![「共有」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-8.png)
ダウンロードをクリックする
![「ダウンロード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-9.png)
![「ダウンロード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-9.png)
Cocoonアピールエリアでよくある質問
Cocoonのアピールエリアでよくある質問
です。
アピールエリアが表示されない原因は?
Cocoonでアピールエリアが表示されない原因は、Cocoon設定でアピールエリアの表示を「表示しない」に設定しているからです。
![cocoon設定でアピールエリアの表示がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-3.png)
![cocoon設定でアピールエリアの表示がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-3.png)
ですので、アピールエリアの表示を「表示しない」以外に設定すれば、表示されるようになります。
![アピールエリアの表示を「表示しない」以外に設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-2-1.png)
![アピールエリアの表示を「表示しない」以外に設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-2-1.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
かんたんに解決!
アピールエリアとヘッダーの違いは?
アピールエリアとヘッダーの1番大きな違いは、ボタンリンクがあるかどうかです。
- ヘッダーにはボタンリンクがなく、
- アピールエリアにはボタンリンクを設定できます。
ボタンリンク以外の項目で
- 画像の設定
- テキストの入力
- 高さの設定
- 背景色の変更
は、アピールエリアとヘッダーで設定可能です。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
機能はほぼ一緒だね
Cocoonでヘッダーの設定方法を知りたい人は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-4.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-4.jpg)
アピールエリアとおすすめカードの違いは?
アピールエリアとおすすめカードの大きな違いは、
- 表示される画像のサイズ
- 表示させたい記事数
の2つです。
- 画面いっぱいに画像を表示できる
- リンクできる記事数は1つのみ
- 画面いっぱいに画像が表示されない
- 表示できる記事数は2つ以上
Cocoonでおすすめカードの設定方法が知りたい人は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2024/01/a98b1120712ae2558c294773114e59b3-2-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/a98b1120712ae2558c294773114e59b3-2-2.jpg)
当ブログ愛用「SWELL」のアピールエリアは画像が切れない!
当ブログでは、2024年4月からWordPressテーマ「SWELL
SWELLのアピールエリアでは、
- PC・スマホ別で画像の設定ができたり
- PC・スマホ別で画像の高さを設定できたり
- PC・スマホ別で画像のスライダー設定ができたり
カスタマイズできる項目が豊富です。
とくに気に入ったポイントは、表示させる画像をPC・スマホ別で変えられるので、デバイスごとに合ったサイズの画像を挿入できます。
つまり、画像が切れる心配もありません。
![SWELLのアピールエリアがPC・スマホ別で画像を挿入できる証拠を示した画像](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-6.png)
![SWELLのアピールエリアがPC・スマホ別で画像を挿入できる証拠を示した画像](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-6.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
Cocoonで画像サイズをPCに合わせると、スマホでは切れちゃうよね
PC・スマホそれぞれで、アピールエリアに挿入する画像を切れずに表示したい人は、SWELLもおすすめですよ。
\きれいな画像でブログをオシャレに!/
まとめ:アピールエリアで収益力UP
今回は、Cocoonでアピールエリアの設定方法を紹介しました。
アピールエリアにリンクするURLは、収益用の記事やアフィリエイト広告がおすすめ!
アフィリエイトを始めるにはASPへの無料会員登録が必須です。
ASPの登録がまだの人は、収益化のチャンスを逃していますよ…
以下の記事では、アピールエリア以外のカスタマイズ方法も紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
また当ブログでは、Cocoonに関する記事をいくつか書いています。
新しい発見があるかもしれないので、見てみてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ためになったという人は“コメント”してくれると嬉しいです!
コメント