PR

【WordPressテーマCocoon】アピールエリアの設定と使い方

Cocoonには、読んでほしい記事のリンクを設置できるアピールエリアという機能があります。ヘッダー下に設置することができ、読者にアピールすることができます。LP(ランディングページ)へのリンクを設置するのにとても便利です。
今回は、Cocoonの「アピールエリアの設定と使い方」について解説します。

Cocoonアピールエリアの表示

背景画像を設定して、アピールエリアを表示させています。

WordPress Cocoon アピールエリアの表示
Cocoonアピールエリアの非表示
WordPress Cocoon アピールエリアの非表示
スポンサーリンク

Cocoon アピールエリアの設定と使い方(動画)

「アピールエリアの設定と使い方(動画)」は、こちら

スポンサーリンク

Cocoon アピールエリアの設定

「アピールエリア」タブの選択

WordPress Cocoon アピールエリアタブ

アピールエリアの設定

アピールエリアの表示

WordPress Cocoon アピールエリアの表示

表示方法は、以下から選択できます。

WordPress Cocoon リストボックス

高さ

アピールエリアの縦幅を設定します。

WordPress Cocoon アピールエリアの高さ

※スマホでは、テキストエリアの幅に合わせて調整されるため、ここでの設定は無効となります。

エリア画像

アピールエリアに設置する画像を設定します。

WordPress Cocoon アピールエリア画像

※ここではヘッダー画像に合わせて、1900x350pxとしています。

エリア背景色

画像なしでシンプルにしたい場合は、背景色を設定します。

WordPress Cocoon アピールエリア背景色

テキストエリア表示

チェックを入れた場合
WordPress Cocoon アピールエリアのテキストエリアチェック有り
チェックを外した場合
WordPress Cocoon アピールエリアのテキストエリアチェック無し

タイトル~ボタン色

テキストエリアの表示内容を設定します。
※「テキストエリア表示」にチェックを入れると、ここに設定した内容が表示されます。

WordPress Cocoon アピールエリアのテキストエリアの説明画像

注意:
ボタンメッセージとボタンリンク先が両方設定されていなければ、ボタンは表示されませんので、ご注意下さい。(いづれか片方が空欄だと、表示されません)

WordPress Cocoon アピールエリアのボタンの非表示

ボタンリンクの開き方

WordPress Cocoon アピールエリアのボタンリンクの開き方

注意:
内部リンクであれば、「同じタブで開く」を選択して、外部リンクであれば、「新しいタブで開く」を選択するのがおすすめです。

ボタン色

「色を選択」をクリックして、お好きな色を設定します。

WordPress Cocoon アピールエリアのボタン色

Cocoon アピールエリアの使い方

アピールエリアとして使う

記事へのリンク

アピールエリアとして、アピールしたい記事へのリンクを貼る

WordPress Cocoon アピールエリアのボタンの表示

メッセージ通知

メッセージ通知エリアとして使う。(あえて、ボタンを表示せずに、メッセージ通知エリアとして使います。)

WordPress Cocoon アピールエリアのボタンの非表示

留意:
Cocoonは、はじめからメッセージ通知エリアの設定が用意されています。が、ここでもその様な使い方ができます。

ヘッダーとして使う

アピールエリアの設定で、テキスト表示をしなければ、背景画像はヘッダー画像として使うことができますので、ヘッダーのレイアウトとして利用できます。

[ レイアウト変更前 ]

WordPress Cocoon レイアウト変更前

[ レイアウト変更後 ]

WordPress Cocoon レイアウト変更後

①ヘッダー背景画像をクリア

WordPress Cocoon ヘッダー画像のクリア

②ヘッダーの高さを初期化

WordPress Cocoon ヘッダー高さの初期化

③「アピールエリア」のエリア画像を設定

WordPress Cocoon アピールエリア画像

④「アピールエリア」のテキストエリア表示のチェックを外す

WordPress Cocoon アピールエリアのテキストエリアの非表示
スマホ対策

①現象

テキストエリア表示を非表示とすると、PCでは高さもキチンと表示されますが、スマホでは、高さが無くなってしまいます。

現象

②原因

アピールエリアの高さの設定で、以下の様に「モバイル環境では無効になります。」と記載されています。テキストエリアの表示によって、高さを表示している為で、テキストエリアを非表示することで、無効となっているのです。

原因

③対策

Cocoonのフォーラムに記載がありましたので、こちらを参考にCSSで高さを指定します。

縦横比計算
対策後のスマホ