Cocoonでメインビジュアルを表示させよう

Cocoon
  • メインビジュアルを表示させたい
  • メインビジュアルはどこで設定するの?

TOPページを作り込みたいと思った時、メインビジュアル表示させたくなったsoraです。

cocoonの設定を見てもメインビジュアルという言葉は見つかりませんでした。
でもsoraは表示させたかった!

という訳で、この記事ではCocoonのメインビジュアルを表示させた私の方法を紹介しますwww

Coccon設定を使ってメインビジュアルを表示

coccon設定>アピールアリアの順にクリックしていきます。

アピールエリアの表示

この「アピールエリア」を使用してメインビジュアルを表示させるかどうかを指定します。
表示させたいので、「フロントページのみ表示」をクリックします。

フロントページだけではなく、他のページにも表示させたい場合はここで変更してください。

高さ

メインビジュアルを表示させる高さ をpx数 指定できます。
☆モバイル環境では高さは無効になります。(最小:200px、最大:800px)

エリア画像

ここでメインビジュアルとなる画像を設定します。
画像は画面の横幅100%で表示されるので、画像には一工夫必要です。
800 x 267 の画像であっても、高さを550pxに指定しないと上と下が見切れて表示されます。

アピールエリアに設定した背景画像を固定することもここで指定できます。
(上下にスクロールしたときに背景画像が移動しなくなります。)

メインビジュアルに文字を入れることも出来る

メインビジュアルに好きな文字を表示させることもできます。

テキストエリア表示

メインビジュアルの画像の上に文字を表示させたい場合はここで指定します。

タイトルとメッセージ

表示させたい文字をここに記入します。

文字の後ろの白の背景色をなくす

これはCSSでカスタマイズします。

外観>カスタマイズ>追加CSSの順にクリックしていき、下の文をコピペして「公開」をクリックしてください。

.appeal-content {
background-color: rgba(255, 255, 255, 0);
}

薄く背景色を表示したい場合は、最後の数字「0」を「0.3」など変更してみて、お好みに指定してみてください。

スマホ表示でメインビジュアルが見切れる

レスポンシブ(スマホ表示時)の時、メインビジュアルは思いっきり見切れています。。。
でも、メインビジュアルに文字を表示させると

メインビジュアルが見切れるという事がなくなりました。

メインビジュアルにボタンを設置も出来る

メインビジュアル画像の上にリンクボタンを設置することもできます。

  • ボタンメッセージ
  • ボタンリンク先
  • ボタンリンクの開き方
  • ボタン色

で指定してください。

Cocoonでメインビジュアルを表示させよう まとめ

cocoonでアピールアリアを使用してのメインビジュアル表示について紹介しました。
最後まで読んでくださって、ありがとうございます(^^♪

コメント

タイトルとURLをコピーしました