【カスタマイザー】TOPページのメインビジュアル切り替え

カスタマイザー「TOP-メインビジュアル切り替え」セクション(CTAボタン選択時)

BONTAのTOPページには、メインビジュアル(ページ最上部の大きな表示エリア)を3種類のタイプから切り替えられる「TOP-メインビジュアル切り替え」セクションが用意されています。ここでは各タイプの違いと設定方法を紹介します。

TOPページのメインビジュアル切り替えでできること

「外観」>「カスタマイズ」>「TOP-レイアウト」パネル内の「TOP-メインビジュアル切り替え」セクションから、TOPページのメインビジュアルを「記事スライド」「CTAボタン」「画像のみ」の3タイプから選べます。選んだタイプに応じて、設定できる項目も切り替わります。

メインビジュアル切り替えの設定方法(3ステップで完了)

設定は3ステップで完了します。

1

「外観」>「カスタマイズ」>「TOP-レイアウト」パネルを開く

2

「TOP-メインビジュアル切り替え」セクションを開き、「TOPのメインビジュアル」でタイプを選択する

「記事スライド」「CTAボタン」「画像のみ」の3つから選べます。選んだタイプに応じて、設定できる項目が切り替わります。

3

選んだタイプの項目を設定し、「公開」を押す

プレビュー中はまだ本番に反映されません。「公開」ボタンを押すまで確定しない点に注意してください。

記事スライド・CTAボタン・画像のみの違い

「TOPのメインビジュアル」では、次の3つのタイプから1つを選びます(既定は「記事スライド」)。

01

記事スライド(既定)

最新記事をスライドショー形式で表示します。表示件数や対象記事、投稿者名・日付・「◯分読み」の表示有無を設定できます。

02

CTAボタン

記事とは連動しない、バッジ・見出し・説明文・ボタン2つで構成された訴求用のメインビジュアルです。背景画像を設定できます。

03

画像のみ

1枚の静止画像だけを表示するシンプルなメインビジュアルです。代替テキスト(alt)を設定できます。

「記事スライド」の設定項目(表示件数・記事選択・投稿者名・日付・◯分読み表示)

「TOPのメインビジュアル」で「記事スライド」を選んだ場合、以下の項目が表示されます。

カスタマイザー「TOP-メインビジュアル切り替え」セクション(記事スライド選択時)

01

表示件数

スライドに表示する記事の件数です。既定は5件(1〜10件で設定可能)。「記事選択」が空欄のときのみ有効です。

02

記事選択

記事IDをカンマ区切りで指定すると、指定した記事を指定した順番で表示できます(例: 12,45,78)。投稿編集画面のURL(post.php?post=◯◯)の数字がIDです。空欄の場合は最新記事が表示されます。

03

投稿者名を表示する

各スライドに投稿者名を表示するかどうかのチェックボックスです。既定はONです。

04

日付を表示する

各スライドに日付を表示するかどうかのチェックボックスです。既定はONです。

05

「◯分読み」を表示する

推定読了時間を表示するかどうかのチェックボックスです。既定はON。通常記事のみに表示され、サービス・お知らせ記事には表示されません。

💡 ポイント

「記事スライド」の「表示件数」は、「記事選択」が空欄のときのみ有効です。「記事選択」に記事IDを入力すると、そちらが優先されます。

「CTAボタン」の設定項目(背景画像・バッジ文言・見出し・説明文・ボタン1・ボタン2)

「TOPのメインビジュアル」で「CTAボタン」を選んだ場合、以下の項目が表示されます。記事とは連動しない、訴求用の固定コンテンツです。

カスタマイザー「TOP-メインビジュアル切り替え」セクション(CTAボタン選択時)

01

背景画像

メインビジュアルの背景画像です。未設定の場合はグレーのグラデーション背景になります。

02

バッジ文言

バッジに表示する文言です。既定は「CATEGORY」。

03

見出し

メインの見出しです。既定は「マーケティングで事業を伸ばす」。改行すると複数行になります。

04

説明文

見出し下の説明文です。既定は「戦略から実践まで、成長に直結するマーケティング情報をお届けします。」。

05

ボタン1(文言・リンク先)

文言の既定は「記事一覧を見る」。リンク先が空欄の場合はTOPページのURLになります。

06

ボタン2(文言・リンク先)

文言の既定は「カテゴリについて」。

07

スマホ表示でボタンを横並びにする

スマホ表示時にボタン1・2を横並びにするかどうかのチェックボックスです。既定はOFF(縦並び)。

「画像のみ」の設定項目(メインビジュアル画像・代替テキスト)

「TOPのメインビジュアル」で「画像のみ」を選んだ場合、以下の項目が表示されます。

カスタマイザー「TOP-メインビジュアル切り替え」セクション(画像のみ選択時)

01

メインビジュアル画像

表示する1枚の画像です。未設定の場合はグレーの背景になります。

02

画像の代替テキスト(alt)

画像の代替テキストです。未入力の場合はサイト名が使われます。

メインビジュアル切り替え運用時の注意点(タイプ別項目切り替え・記事選択の優先順位・画像未設定時の挙動)

  • 「TOPのメインビジュアル」で選んだタイプに応じて、設定できる項目が自動的に切り替わります。
  • 「記事スライド」で「記事選択」を指定すると、入力した記事IDの順番どおりに表示されます。
  • 「CTAボタン」のボタン1はリンク先を空欄にするとTOPページのURLが使われます。
  • 「画像のみ」で画像を未設定のままにすると、グレーの背景で表示されます。
  • 「◯分読み」の表示は通常記事のみが対象で、サービス・お知らせ記事には表示されません。

メインビジュアル切り替えに関するよくある質問

Q

メインビジュアルのタイプを途中で切り替えることはできますか?

A

はい。「TOPのメインビジュアル」のラジオボタンでいつでも切り替えられます。切り替えると、選んだタイプに応じた設定項目が表示されます。

Q

「記事スライド」でスライドに表示する記事を指定できますか?

A

できます。「記事選択」に記事IDをカンマ区切りで入力すると、指定した記事を指定した順番で表示できます。空欄の場合は最新記事が自動的に表示されます。

Q

「画像のみ」で画像を設定しない場合、どうなりますか?

A

グレーの背景で表示されます。真っ白になったり表示が崩れたりすることはありません。

Q

「◯分読み」はどの記事にも表示されますか?

A

いいえ。通常記事(post)のみに表示され、サービス・お知らせでは表示されません。

Q

メインビジュアルの画像の代替テキスト(alt)を入力しないとどうなりますか?

A

サイト名が代替テキストとして使われます。

まずは無料相談から

現状の課題を把握し、最適な施策を提案します。
お気軽にご相談ください。