【カスタムCSS】リンク付き画像(バナー)を配信する
サポートアクションでは画像を表示することは可能ですが、画像にリンクを貼ってバナーを作成するには少しコツが要ります。
このアンサーでは、カスタムCSSを用いてバナーを設置する方法を記載します。
以下に記載するCSSを詳細設定>このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
このCSSは影響範囲が広いため、ブランド設定への登録の際はご注意ください。
※カスタムCSSの設定方法はこちらをご確認ください
リンク付き画像の初期表示
リンク付き画像(バナー)を設置する方法
まず、ステップでポップアップを選択し以下のようにテキストがなく画像だけをボタンにアップロードします。
その上で以下のCSSを該当ステップのカスタムCSSに追加することで、参考画像のように画像付きボタンをバナーのようにすることができます。
/* ボタンの余白や背景を消す */
#rs_sa .c-buttonModule {
padding: 0;
background-color: transparent;
border-radius: 0;
}
/* バナーホバー時のスタイルを指定*/
#rs_sa .c-buttonModule:hover {
filter: brightness(0.8);/* この数値を変えることでホバー時の暗さを調節可能。1で変化なし */
}
/* 画像を横幅いっぱいに広げる */
#rs_sa .c-buttonModule img {
max-width: none;
max-height: none;
width: 100%;
}
/** ここから下は任意 */
/* ポップアップの角の丸みをとる */
#rs_sa .c-popupMain {
border-radius: 0;
}
/* バナーをポップアップの横幅いっぱいに広げる */
#rs_sa .c-popupBody, #rs_sa .c-popupBodyInner > div > div {
padding: 0;
}
このCSSを付与すると、以下のような見た目になります。
画像付きボタンをバナーのようにした場合の表示
以下で上記のCSSについて解説します。
#rs_sa .c-buttonModule
ボタンをバナーのようにするにはボタン内の余白(padding)や角の丸み(border-radius)が不要なため、これを打ち消しています。
#rs_sa .c-buttonModule:hover
バナーをホバー(マウスオーバー)した時の見た目を指定しています。
ここに任意のCSSを入れることでホバー時の見た目を暗くしたり、明るくしたりすることが可能です。
#rs_sa .c-buttonModule img
初期状態では画像に幅と高さの制限(max-width, max-height)が入っているためそれを打ち消し、ポップアップの横幅いっぱいまで広げています(width: 100%)。
こうすることで画像がボタンいっぱいに広がりバナーのような見た目になります。
#rs_sa .c-popupMain / #rs_sa .c-popupBody, #rs_sa .c-popupBodyInner > div > div
この2つのCSSは任意です。この2つを指定することでポップアップ全体の余白や角の丸みを取り、バナーだけが表示された状態にすることができます。
このCSSを入れなかった場合の表示は以下のようになります。