【Cocoonカスタマイズ】アピールエリアを使って読んでほしい記事は目立たせよう！

「読んでほしい記事を見てくれない…」

いくら魅力的な記事を書いても、
他の記事ばかり読まれることもしばしば。

そんな方はCocoonのアピールエリア機能を
利用してみてどうでしょうか？

実装が簡単な上に、
読んでほしい記事を目立たせることができます。

本記事では、

• Cocoonのアピールエリアとは
• Cocoonのアピールエリアの表示方法

を解説します。

それでは、解説していきます。

Cocoonのアピールエリアとは

Cocoonでは、アピールエリアと呼ばれる場所があります。

アピールエリアは名前の通り、
アピールさせたい箇所を
大きく表示させることができます。

当サイトの場合、ココです。
目立ってますよね？

必ず読者の目に入るポイントです。

今回はこんな表示をする方法を解説します。

Cocoonのアピールエリアの表示方法

Cocoonのアピールエリアの表示方法は、
ものすごく簡単で1分もあればできてしまいます。

今回は、アピールエリアを表示するだけでなく、
カスタマイズ例も一緒に紹介します。

手順は、

1. アピールエリアの設定
2. アピールエリアの背景画像を設定
3. メッセージ・ボタンの設定
4. CSSのカスタマイズ

こんな感じです。
順番に解説していきます。

1.アピールエリアの設定

先ずアピールエリアの表示する設定を行います。

1. 「管理画面」
2. 「Cocoon設定」
3. 「アピールエリア」

の順にアピールエリアの設定画面に移動します。

初期状態では、「アピールエリアの表示」が
「表示しない」になっていますので、
フロントページのみで表示を選択します。

フロントページのみで表示した場合、
サイトのトップページで表示されています。

2.アピールエリアの背景画像を設定

アピールエリアの高さと
使用する背景画像を設定します。

高さ、エリア画像をそれぞれ決めて入力しましょう。

当サイトは、高さ400pxに設定しています。

3.メッセージ・ボタンの設定

次にメッセージ・ボタンの設定をします。

このサイトでは、

のように設定しています。

自分のサイトでアピールしたい記事に、
誘導できるような設定にしましょう！

4.CSSのカスタマイズ

このサイトで行ったCSSのカスタマイズは、

です。

自分の気に入ったやつだけコピペして、
試してみて下さい。

背景画像に透過色を被せる

.appeal .appeal-in {
	width: 100%;
	background-color: rgba(0, 128, 128, .25);
}

タイトルとテキストの色の変更

.appeal-title {
	color: #ccc;
}

.appeal-message {
	color: #ddd;
}

テキストにシャドウを付ける

.appeal-title {
	text-shadow: 2px 2px 0 #3f3f3f;
}

スマホ用に表示サイズを変える

@media screen and (max-width:767px) {
  .appeal-title {
    font-size: 20px;
  }
}

スタイルシートにすべてコピペするだけです。
以上がCSSのカスタマイズ方法でした。

まとめ

今回は、Cocoonのアピールエリアの
使い方を紹介しました。

サイト内で目立たせたいコンテンツなどは
アピールエリアで表示することで
より多くのユーザーの目にとまります。