サイドバーに独自のボタンやバナーを表示する方法

2024年2月のアップデートで、サイドバー内のHTMLが設定できるようになりました。これによって、任意のリンクやバナー画像を設置することができるようになります。

サイドバー内のHTMLは、ビジネスプラン以上で利用できます。

では実際にやってみましょう。

プロジェクトの設定画面で、「カスタマイズ設定」を開いて、「サイドバーのHTML」にHTMLを記述します。

サイドバーにボタンを設置する

クローバのフォーム以外のボタンを設置してみることにしましょう。セミナーの申し込み画面に遷移させるために次のようなボタンを設置します。

HTMLは以下のようになります。

<div>
  <div style="text-align:center;font-size:.75rem;margin-bottom:0.5rem;color:#757575;">セミナーへの申し込み</div>
  <a class="btn theme-btn-preset1" style="display: block;border-radius:9999px" href="https://example.com/form">申し込む</a>
</div>

サイドバーにバナー画像を設置する

サイドバーに画像を設置したい場合はどうしたらいいでしょうか。カスタマイズ設定画面からは画像をアップロードすることができません。こんなときは、トップページに画像をアップロードした画像を利用することができます。

トップページの編集画面を開いて、空のセクションを追加します。

セクションの設定で、表示を「表示しない」に設定します。

追加した非表示のセクションに画像パーツを設置して、画像をアップロードします。

画像をアップロードしたら、ダイアログ下部にある「画像のURLをコピー」をクリックします。これで画像のURLがコピーされました。

カスタマイズ設定画面に戻って、サイドバー内のHTMLを以下のように設定します。

<div>
  <a href="https://www.example.com/form"><img src="コピーしたURL" /></a>
</div>

バナーが設定されました！　スマートフォンでも表示されていることを確認してください。