メインコンテンツにスキップ

バルーンガイドのボタンサイズを変更する

概要

CSSを使って、バルーンガイドの「次へ」ボタンのサイズを変更できます。

なお、設定画面の「ボタンサイズ(小・中・大)」とこのCSSは別々の仕組みです。「大」に設定していても、CSSでさらに大きくすることができます。「大にしているからCSSで変更できない」ということはありません。

設定方法

バルーンガイドのガイドテキスト欄に以下のCSSを貼り付けてください。

<style>.plainer-tippy-root .plainer-balloon-button-next {height: 3.5rem !important;font-size: 18px !important;min-width: 160px !important;max-width: none !important;}</style>

下記のように、テキスト欄にベタ貼りしていただき、調整したいサイズの数値を変更して下さい。

幅(min-width)を大きくしても横に広がらない場合

「次へ」ボタンには、標準で max-width: 190px の上限が設定されています。そのため、min-width の数値を 190px より大きくしても、190px までしか広がりません

ボタンをそれ以上横に広げたい場合は、上記CSSのように max-width: none !important; を必ず一緒に指定してください。これで上限が解除され、min-width で指定した幅まで広がるようになります。

注意点

  • CSSは <style> タグごとガイドの「テキスト欄」に貼り付けてください(別のCSS設定画面ではありません)

  • 各プロパティには !important を付けてください(付けないと標準スタイルが優先され反映されません)

  • 高さは height、幅は min-width(+必要に応じて max-width: none)で調整してください

  • padding での変更はできません(標準スタイルで直接指定されているため)

  • このCSSは「次へ」ボタン(.plainer-balloon-button-next)専用です。テキスト欄にHTMLで自作したボタンには適用されません。自作ボタンのサイズはそのボタンのHTML側(paddingfont-size)で調整してください

関連記事

こちらの回答で解決しましたか?