Cocoonには、読んでほしい記事のリンクを設置できるアピールエリアという機能があります。ヘッダー下に設置することができ、読者にアピールすることができます。LP(ランディングページ)へのリンクを設置するのにとても便利です。
今回は、Cocoonの「アピールエリアの設定と使い方」について解説します。
背景画像を設定して、アピールエリアを表示させています。
![WordPress Cocoon アピールエリアの表示](https://gungii.com/wp/wp-content/uploads/2022/01/appeal01.png)
![WordPress Cocoon アピールエリアの非表示](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal02.png.pagespeed.ic.NqOKy7Cpro.webp)
Cocoon アピールエリアの設定と使い方(動画)
「アピールエリアの設定と使い方(動画)」は、こちら
Cocoon アピールエリアの設定
「アピールエリア」タブの選択
![WordPress Cocoon アピールエリアタブ](https://gungii.com/wp/wp-content/uploads/2022/01/appeal11.png)
アピールエリアの設定
アピールエリアの表示
![WordPress Cocoon アピールエリアの表示](https://gungii.com/wp/wp-content/uploads/2022/01/appeal12.png)
表示方法は、以下から選択できます。
![WordPress Cocoon リストボックス](https://gungii.com/wp/wp-content/uploads/2022/01/appeal13a.png)
高さ
アピールエリアの縦幅を設定します。
![WordPress Cocoon アピールエリアの高さ](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal14a.png.pagespeed.ic.5wC06fpjS3.webp)
※スマホでは、テキストエリアの幅に合わせて調整されるため、ここでの設定は無効となります。
エリア画像
アピールエリアに設置する画像を設定します。
![WordPress Cocoon アピールエリア画像](https://gungii.com/wp/wp-content/uploads/2022/01/appeal15.png)
※ここではヘッダー画像に合わせて、1900x350pxとしています。
エリア背景色
画像なしでシンプルにしたい場合は、背景色を設定します。
![WordPress Cocoon アピールエリア背景色](https://gungii.com/wp/wp-content/uploads/2022/01/appeal16.png)
テキストエリア表示
チェックを入れた場合
![WordPress Cocoon アピールエリアのテキストエリアチェック有り](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal17.png.pagespeed.ic.BvoxGmpUZx.webp)
チェックを外した場合
![WordPress Cocoon アピールエリアのテキストエリアチェック無し](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal18.png.pagespeed.ic.BL9c5mTTM0.webp)
タイトル~ボタン色
テキストエリアの表示内容を設定します。
※「テキストエリア表示」にチェックを入れると、ここに設定した内容が表示されます。
![WordPress Cocoon アピールエリアのテキストエリアの説明画像](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal19.png.pagespeed.ic.1sTucgcSgl.webp)
注意:
ボタンメッセージとボタンリンク先が両方設定されていなければ、ボタンは表示されませんので、ご注意下さい。(いづれか片方が空欄だと、表示されません)
![WordPress Cocoon アピールエリアのボタンの非表示](https://gungii.com/wp/wp-content/uploads/2022/01/appeal20.png)
ボタンリンクの開き方
![WordPress Cocoon アピールエリアのボタンリンクの開き方](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal21.png.pagespeed.ic.GHET409G5z.webp)
注意:
内部リンクであれば、「同じタブで開く」を選択して、外部リンクであれば、「新しいタブで開く」を選択するのがおすすめです。
ボタン色
「色を選択」をクリックして、お好きな色を設定します。
![WordPress Cocoon アピールエリアのボタン色](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal22.png.pagespeed.ic.ti3dJ_N9Bs.webp)
Cocoon アピールエリアの使い方
アピールエリアとして使う
記事へのリンク
アピールエリアとして、アピールしたい記事へのリンクを貼る
![WordPress Cocoon アピールエリアのボタンの表示](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal31.png.pagespeed.ic.AYV1DaKdkL.webp)
メッセージ通知
メッセージ通知エリアとして使う。(あえて、ボタンを表示せずに、メッセージ通知エリアとして使います。)
![WordPress Cocoon アピールエリアのボタンの非表示](https://gungii.com/wp/wp-content/uploads/2022/01/appeal32.png)
留意:
Cocoonは、はじめからメッセージ通知エリアの設定が用意されています。が、ここでもその様な使い方ができます。
ヘッダーとして使う
アピールエリアの設定で、テキスト表示をしなければ、背景画像はヘッダー画像として使うことができますので、ヘッダーのレイアウトとして利用できます。
[ レイアウト変更前 ]
![WordPress Cocoon レイアウト変更前](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal33.png.pagespeed.ic.8qd3IGiATJ.webp)
[ レイアウト変更後 ]
![WordPress Cocoon レイアウト変更後](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal34.png.pagespeed.ic.0Ux1loG4v3.webp)
①ヘッダー背景画像をクリア
![WordPress Cocoon ヘッダー画像のクリア](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal35.png.pagespeed.ic.lrIOOn5Qx0.webp)
②ヘッダーの高さを初期化
![WordPress Cocoon ヘッダー高さの初期化](https://gungii.com/wp/wp-content/uploads/2022/01/appeal36a.png)
③「アピールエリア」のエリア画像を設定
![WordPress Cocoon アピールエリア画像](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal37.png.pagespeed.ic.eSbTTkbeb-.webp)
④「アピールエリア」のテキストエリア表示のチェックを外す
![WordPress Cocoon アピールエリアのテキストエリアの非表示](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal38.png.pagespeed.ic.Mk5lK5_emB.webp)
①現象
テキストエリア表示を非表示とすると、PCでは高さもキチンと表示されますが、スマホでは、高さが無くなってしまいます。
![現象](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal39.png.pagespeed.ic.k1-ZU9MpPj.webp)
②原因
アピールエリアの高さの設定で、以下の様に「モバイル環境では無効になります。」と記載されています。テキストエリアの表示によって、高さを表示している為で、テキストエリアを非表示することで、無効となっているのです。
![原因](https://gungii.com/wp/wp-content/uploads/2022/01/xappeal40.png.pagespeed.ic.ca_Yi6k649.webp)
③対策
Cocoonのフォーラムに記載がありましたので、こちらを参考にCSSで高さを指定します。
![縦横比計算](https://gungii.com/wp/wp-content/uploads/2022/01/appeal41.png)
![対策後のスマホ](https://gungii.com/wp/wp-content/uploads/2022/01/appeal42.png)