Cocoonのアピールエリアはその名の通り、ページを開いた瞬間パッと目を引きやすいコンテンツ設置ができるスペースです。
具体的には、下記リンク先のページのようになります。
ワードプレス初心者でも簡単に設置できるので、フロントページ（トップページ）や固定ページでの使用もおすすめ。
ご自身でサイト作成されている会社様なら、さらに活用範囲が広がると思います！
簡単なので、ぜひ試してみてね
※画像は拡大できます。
アピールエリアの設定
冒頭で紹介したページを例として説明していきたいと思います。
❶ まずは背景として使用する画像を用意します。
こちらの写真は、pixabay 様よりお借りした画像を加工したものです。
❷ ワードプレス左メニューから「Cocoon設定」→「Cocoon設定」を選択します。
❸「アピールエリア」のタブを選択。
❹ 下記の画像を、上から順に設定してみます。
● アピールエリア：今回は固定ページで作るので「固定ページのみで表示」です。
ブログのトップページのみなら「フロントページ」を選択します。
● 高さ：アピールエリアの高さを決めます。画像の高さに合わせる考えると分かりやすいです。
● エリア画像：「選択」を押して、画像をメディアライブラリにドラッグ&ドロップし、画像を選択します。
❺ 画像の上に表示するテキストを入力します。
● 背景色：お好みで
● テキストエリア表示：チェックを入れます
● タイトル：大きな文字で表示されます
● メッセージ：タイトルの下に少し小さな文字で表示されます
❻ 画像の上に表示するボタンを設定します。
● ボタンメッセージ：ボタンに表示される文字です
● ボタンリンク先：ボタンを押したとき開くページです
● ボタンリンクの開き方：同じページで開くか、もうひとつタブを開いて表示するかを選択します。
● ボタン色：お好みで。
入力が終わったら、一番下の「変更をまとめて保存」を押してね
❼ 今回は『固定ページ』を選択しているので、すべての固定ページにアピールエリアが表示されます。
左メニューから「固定ページ」→「固定ページを追加」、新規ページが開いたら、下書き保存します。
では、実際にページを表示（プレビュー）してみると……こんな感じです。
白い背景に赤いボタン。目立っていいのですが、もう少し写真を見せたいですね。
そこで次は、cssで背景を透明にします。
テキスト＆ボタンを透明にする（cssコピペOK）
では、▼を
▼ こんな風にしてみたいと思います。
といっても、やることは簡単。
cssをご用意しましたので、以下をコピペして貼り付けるだけです。
a.appeal-button{
貼り付ける場所は、
左のメニューから、「外観」→ 「テーマファイルエディター」を選択
子テーマ用のスタイル
「/*必要ならばここにコードを書く*/」の下に、コードを貼り付けて下さい。
特定ページのみヘッダーを消す（cssコピペOK）
上記のcssを貼り付けただけだと、まだ下記の状態です。
アピールエリアの上には不似合いなヘッダー画像、そしてメインコンテンツはデフォルトのまま。
これらを併せて修正します。
もちろんこちらも、下記cssをコピペするだけでOKです。
/*全体の文字色と背景色*/
body{
color: #fff;
background-color: #222;
}
/*メインコンテンツの背景色と文字の大きさ*/
#main {
background-color: rgba(80,80,80,0.3); /*透過色*/
font-size: 14px;
}
/*ヘッダーを非表示*/
#header{
display: none;
}
/*アイキャッチを本文では非表示*/
.eye-catch {
display: none;
}
上記cssはサイト全体ではなく、特定のページのみ反映させたいので、テーマファイルエディターには貼り付けません。
ではどこに貼り付けるかと言うと、記事を書くページの一番下になります。
▲ 一番下に「カスタムCSS」があるので、ここへ貼り付けて下さい。
Cocoonは各ページごとにCSS設定ができるようになっているため、とても使い勝手のいいテーマなのです！
カスタムCSSが反映されない？
じつは今回、このカスタムCSSが反映されなくて本当に困りました。
もし同じように反映されなくて困っている方は、下記記事をご覧ください。
（長いので、対処法は別記事に分けました）
終わりに…
アピールエリアは、その名の通りアピールしたいページに活用できて、作る人によってはとてもお洒落なページに仕上がります（私の見本はあの程度ですが）。
ジャンル問わず使えるコンテンツだと思いますので、興味がある方はぜひ色々なデザインにチャレンジしてみて下さい！
うまくできたかな？
お疲れ様でした！
コメント