【Cocoon】ヘッダー下アピールエリアの設定方法

今回は『Cocoonのアピールエリアの設定方法』を解説していきます。

アピールエリアには読んでほしい記事のリンクを設置したり、ブログ運営の思いなどを書いたりして、読者にアピールすることができます。

Cocoonなら簡単にヘッダー下にアピールエリアを設置できますので、ぜひ参考にしてみてください。

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

動画でも解説しています。

Cocoonのアピールエリアは『Cocoon設定 ⇒ アピールエリア』で設定します。

いくつか設定項目がありますので、以下で詳しく解説していきます。

アピールエリアの表示

『アピールエリアの表示』では、以下の７つのパターンから表示方法を選択できます。

なるべくたくさんの読者にアピールしたいなら『全ページで表示』を選択してください。

ただし、投稿ページでは記事を集中して読んでほしいなら『投稿・固定ページ以外で表示』を設定するのもオススメです。

高さ

『高さ』ではアピールエリアの縦幅を設定します。

このあと設定する画像で表示させたい高さをpx数で入力してください。

なお、スマホではテキストエリアの幅に合わせて自動で調整されるため、ここで入力した高さの設定は無効となりますので、お気を付けください。

エリア画像

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

画像が小さいと拡大表示されて荒くなってしまうため、横幅が最低でも1300px程度の画像を用意しましょう。

画像の縦幅は、先ほど設定した高さで表示されます。

また、『アピールエリア背景画像の固定』にチェックを入れると、背景画像が固定されるため、下にスクロールしたときに画像の下の部分も見てもらうことができます。

言葉でお伝えすると分かりにくいと思いますので、よろしければチェックを入れた場合と、外した場合で試してみてください。

エリア背景色

エリア画像に何も画像を設置しなかったときは、こちらの『エリア背景色』で設定した色が背景に表示されます。

背景をシンプルにしたい場合は、あえて画像を無しにして、背景色で設置するのも良いでしょう。

テキストエリア表示

【テキストエリア表示にチェックを入れた場合】

【テキストエリア表示にチェックを入れなかった場合】

『テキストエリア表示』にチェックを入れないと、このように設定した画像だけの表示になります。

タイトル・メッセージ

Cocoonのアピールエリアの『タイトル』は太文字で表示され、『メッセージ』はその下に表示されます。

『タイトル』と『メッセージ』を空欄にすると、この後設定するボタンリンクだけが表示されます。

ボタンメッセージ・ボタンリンク先

『ボタンメッセージ』には、ボタン上に表示させるテキストを入力します。

『ボタンリンク先』には、ボタンをクリックしたときに移動するページのURLを入力します。

どちらか片方でも空欄にすると、このようにボタンが表示されませんので気を付けましょう。

なお、あえてボタンを表示させずに、このエリアにブログ運営の思いなどを書いてアピールするのも良い使い方だと思います。

ボタンリンクの開き方

ボタンリンクの開き方は、リンク先が同じブログ内であれば『同じタブで開く』が良いです。

アフィリエイトリンクなど、外部リンクなら『新しいタブで開く』が良いでしょう。

ボタン色

ボタン色の『色を選択』をクリックすると、自由に好きな色が設定できます。

ボタン上のテキストは白文字なので、文字が見やすいように濃い色を選択しておきましょう。

まとめ

今回は『Cocoonのアピールエリアの設定方法』を解説してきました。

Cocoonならヘッダー下にアピールエリアを設置するのも簡単だったと思います。

誘導したい記事やブログ運営の思いなど、読者へアピールする際に活用してみてくださいね。