【Cocoon】アピールエリアの設定方法とカスタマイズ

こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、ブログのアピールエリアをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、アピールエリアは以下のようなデザインにしています。

アピールエリアでは、このように読者の目に留まりやすい位置にリンクを張ることができます。

この記事では、以上のようなCocoonのアピールエリアを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2022年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

アピールエリアの設定方法
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

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

Cocoonのデフォルトではこのようなシンプルなデザインになっています。

また、Cocoonの全体的な基本設定がまだの方は、以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

ヘッダー設定

１．WordPressメニューから「Cocoon設定」を開きます。

２．「Cocoon設定」から「アピールエリア」タブを選択し、上から順に設定していきます。

３．設定の詳細はこちら。

アピールエリア設定

アピールエリアの表示
：全ページで表示
高さ
：200
エリア画像
：なし
エリア背景色
：好きな色を選択します
テキストエリア表示
：テキストメッセージエリアを表示する
タイトル
：なし
メッセージ
：なし

アピールエリア設定

ボタンメッセージ
：表示したい文字を入力します。（※22文字以下推奨です）
ボタンリンク先
：リンク先のURLを入力します。
ボタンリンクの開き方
：同じタブで開く（_self）
ボタン色
：好きな色を選択します

※エリア背景色・ボタン色は統一してください。

以上のように設定できたら「変更をまとめて保存」をクリックします。

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#b5b5b5; /*エリア背景色・ボタン色と同じカラーコードを入力*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;/*文字色はこちらで変更できます*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}