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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

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

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

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

目次

アピールエリアとは?

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

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

PC画面で見たアピールエリア
PC画面
スマホ画面で見たアピールエリア
スマホ画面

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

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

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

かめコンパス

収益用記事をリンク先に設定してもいいね!

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

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

STEP

WardPress管理画面で、Cocoon設定アピールエリアの順にクリックする

「Cocoon設定」、「アピールエリア」がある場所
STEP

表示されたページでアピールエリアを設定する

表示されたページでアピールエリアを設定している様子

設定する項目が変更できない場合は、スキン制御されているのが原因です。

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

設定し終えたら、変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

アピールエリアの設定完了!

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

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

表示するページを選ぶ

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

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

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

かめコンパス

どのページに表示させるか自由に選べるよ!

高さを決める

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

  • 200〜800px

で設定できます。

アピールエリアの高さを示す場所
かめコンパス

スマホでは設定した高さが無効になるよ

背景画像を選ぶ

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

画像は

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

かめコンパス

ブログのデザインを決める上で重要!

背景画像を固定する

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

かめコンパス

固定すると画面に表示される本文が少なくなるので、あまりオススメしないかな

背景色を決める

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

「エリア背景色」を設定した様子
背景色を設定

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

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

カラーコードを入力する場所

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

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

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

  • タイトル
  • メッセージ

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

「アピールエリア表示」で、タイトル・メッセージなしに設定した様子
タイトル・メッセージなし
「アピールエリア表示」で、タイトルありに設定した様子
タイトルあり
「アピールエリア表示」で、メッセージありに設定した様子
メッセージあり
「アピールエリア表示」で、タイトル・メッセージありに設定した様子
タイトル・メッセージあり
かめコンパス

背景画像を目立たせるために、タイトルとメッセージを設定しない選択肢もあるよ!

ボタンを設定する

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

  • ボタンメッセージ
  • リンク先
  • リンクの開き方
アピールエリアにボタンメッセージを設定した様子
ボタンメッセージを設定
かめコンパス

外部リンクを設定する場合は、「新しいタブで開く」がおすすめ!

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

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

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

おすすめの画像サイズ

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

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

  • 幅1920×高さ1080px

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

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

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

かめコンパス

画像の高さは200~800pxの範囲内でお好みでどうぞ!

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

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

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

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

ということがあります。

PC画面で見たアピールエリアの画像が切れていない様子
PC画面
スマホ画面で見たアピールエリアの画像が切れている様子
スマホ画面

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

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

PC画面で見たアピールエリアの画像が切れていない様子
PC画面
スマホ画面で見たアピールエリアの画像が切れていない様子
スマホ画面

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

\クリックで開く/

Canvaでアピールエリアの画像を作る方法
STEP
  1. Canvaトップページを開く
  2. カスタムサイズをクリック
  3. 作りたい画像のサイズを入力
  4. 新しいデザインを作成をクリック
「カスタムサイズ」、サイズ入力、「新しいデザインを作成をクリックする」がある場所
かめコンパス

私は、幅1920×高さ400pxにしたよ

STEP

アップロードファイルをアップロードの順にクリックし、画像を挿入する

「アップロード」、「ファイルをアップロード」がある場所

Canvaで画像を挿入する方法について、詳しくは下の記事を参考にしてください。

STEP
  1. 画像をクリックでページに挿入
  2. ページの左右に余白が残るように画像を引きのばす
ページに画像を挿入し、画像を左右に引きのばしている様子
STEP
  1. 画像を複製
  2. 複製した画像の幅を切り取られていいサイズに縮める
画像を複製し、その画像の幅を切り取られていいサイズに縮めている様子
STEP

縮めた画像をもとの画像の横に重ねる

縮めた画像をもとの画像の横に重ねている様子
STEP
  1. 縮めた画像を複製
  2. 複製した画像を余白に埋める
縮めた画像を複製し、その画像を余白に埋めている様子
STEP

左側の余白が切り取られてもいい画像で埋まりました。

右側も同じように画像を複製して、余白を埋める

反対側の余白も同じように画像を複製して、余白を埋めている様子
STEP

右側の余白も切り取られてもいい画像で埋まりました。

次は、作った画像をダウンロードします。

共有をクリックする

「共有」がある場所
STEP

ダウンロードをクリックする

「ダウンロード」がある場所
STEP

ダウンロードをクリックする

「ダウンロード」がある場所

画像の作成・ダウンロード完了!

ダウンロードできない場合は、下の記事を参考にしてください。

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

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

です。

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

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

cocoon設定でアピールエリアの表示がある場所

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

アピールエリアの表示を「表示しない」以外に設定している様子
かめコンパス

かんたんに解決!

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

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

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

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

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

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

かめコンパス

機能はほぼ一緒だね

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

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

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

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

の2つです。

アピールエリア
  • 画面いっぱいに画像を表示できる
  • リンクできる記事数は1つのみ
おすすめカード
  • 画面いっぱいに画像が表示されない
  • 表示できる記事数は2つ以上

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

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

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

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

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

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次