無料コンサル受付中です~!!!

【Cocoon】超便利なアピールエリアをカスタマイズしよう!

Cocoon 2.サイトの作り方
スポンサーリンク
この記事は 約3 分で読めます。

「アピールエリアをご存知ですか?」

アピールエリアを使うことで他のサイトと差別化しやすく、
魅力的なサイト作りに役立ちます。

本記事では、

  • アピールエリアについて
  • アピールエリアの表示方法

を解説します。

一度も使ったことのない人は一度使ってみて下さい。

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

アピールエリアとは

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

当サイトの場合、

ココです。

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

アピールエリアの表示方法は、

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

を行うことでアピールエリアを表示させます。

アピールエリアを表示する

先ず、管理画面からCocoon設定→アピールエリアへ移動します。

アピールエリアの表示が表示しないになっている場合、
フロントページのみで表示を選択します。

背景画像を設定する

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

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

メッセージ・ボタンを表示する

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

当サイトは、

  • タイトル:ここでアフィリエイターデビューしませんか?
  • メッセージ
  • ボタンメッセージ:このサイトで学べることは?
  • ボタンリンク先:https://sub-work.net/affiliater-learning/
  • ボタン色:#dd9933

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

CSSでカスタマイズする

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;
}

以上がCSSのカスタマイズ方法でした。

まとめ

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

サイト内で目立たせたいコンテンツなどはこちらで
表示することでより多くのユーザーの目に届くでしょう。

コメント