【Cocoon】トップページがおしゃれになる！アピールエリアの設定方法

無料テーマ「Cocoon」を使用している方に、この記事では「アピールエリア」の設定方法を解説していきます。

アピールエリアを使うことで、読んでもらいたい記事などを画像と文字で紹介することができます。

クマさん

ブログ内を探索してくれるチャンス

キラ

こんなのもあるよという宣伝になるね

苦手な方が多い「HTMLやCSS」などは一切使わずに、初心者でも簡単に設定することができます。

この記事でわかること

1. アピールエリアの機能
2. アピールエリアの設定方法

ここを解説

では早速みていきましょう。

アピールエリアとはどんなもの？

黄枠で囲った画像と文字、そしてボタンが表示されているものが「アピールエリア」です。

クマさん

思わずクリックしたくなるね

このように目立たせて、ユーザーを誘導することができるのがアピールエリアの強みでしょう。

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

アピールエリアでは、以下の項目を設定することができます。

このように11項目設定できるようになっておりますが、基本的に星マークつけた部分だけで問題ありません。

アピールエリアを設定する場所

「Cocoon設定」をクリックすると、いろんな項目を設定できる画面になります。

そこの２段目の真ん中にある「アピールエリア」をクリックすることで、アピールエリアの設定をすることができます。

各項目の機能と設定方法

実際の設定項目の順に沿って見ていきましょう。

アピールエリアの表示

アピールエリアをどのページまで表示するのか設定することができます。

上記の選択肢の中から、「アピールエリア」を表示したい範囲を選びましょう。

キラ

私はフロントページのみに設定していました

高さとエリア画像

高さは最小200px、最大800pxまで設定できるようになっていますが、設定する画像によって異なります。

設定する画像が大きいとはみ出てしまいますので、先に画像の高さを設定しておくと良いでしょう。

おすすめの設定方法

「Canva」というツールを使うことで、無料で自分で好きな幅や高さを設定できます。

まず右下の「カスタムサイズ」をクリックしましょう。

すると、幅と高さを入力する欄が出るので、ここに設定したいサイズを入力してください。

上記のように先にサイズを決めて画像を作成すると、アピールエリアの画像もはみ出さずに綺麗に表示されます。

エリア背景色とテキストエリア表示

ここはあまり設定する部分ではないですが、エリア画像を使わない場合はここで色を選択することができます。

テキストエリア表示は、そのままチェックしておきましょう。

タイトルとメッセージ

リンク先にはどんな内容のものがあるのか、わかりやすいタイトルやメッセージを記述すると良いでしょう。

タイトルは簡潔明瞭に、メッセージには詳しい内容を書くとわかりやすいですね。

クマさん

ユーザーに理解してもらえる内容を書いてみよう

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

ボタンメッセージは簡単に「詳しくはこちら」などの定形文を入力して、リンク先URLを間違えずに入力しましょう。

リンクの開き方は「同じタブ」または「新しいタブ」のどちらかを選択します。

最後にボタン色を設定ですが、文字は白色で設定されているので、濃いめの色を選択しましょう。

どうしても文字色を変更したい場合は、以下のコードを「追加CSS」にコピペしてください。

/* ボタンの文字色変更 */
.appeal-button {
　　color: black;
}こ

これでアピールエリアの設定は終わりです。

下にある「変更をまとめて保存」を押して、トップページに反映されているか確認しましょう。

まとめ

「Cocoon設定」にある内容に沿って設定するだけで、簡単に「アピールエリア」を設定することができます。

画面を移動することもないので、初心者でも簡単にできる内容でしたね。

クマさん

わいひらさん感謝だね

キラ

簡単におしゃれなトップページにできちゃう

使っているスキンによっては、少しデザインが違う場合もあるので、その辺はご了承ください。

皆さんもこの記事を参考に、ぜひ「アピールエリア」導入しておしゃれなトップページを作って見てください。