【カスタムCSS】テキストを左右・中央寄せにする方法
サポートアクションではポップアップなどのステップ自体の位置の設定はできますが、文字を揃える方向は初期表示の左寄せから変更はできません。
このアンサーでは、カスタムCSSを用いて文字を左右・中央に寄せたりする方法を記載します。
以下に記載するCSSを詳細設定>このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
このCSSは影響範囲が広いため、ブランド設定への登録の際はご注意ください。
※カスタムCSSの設定方法はこちらをご確認ください
テキストの初期表示
文字を左右・中央揃えにする方法
以下のCSSを該当ステップのカスタムCSSに追加することで、参考画像のように見出し1中央に、文章を右に、ボタンを中央に寄せることができます。
/* 見出しを中央に寄せる */ #rs_sa .c-titleModule-h1 { text-align: center; } /* 文章を右に寄せる */ #rs_sa .c-textModule-textMd { text-align: right; } /* ボタンを中央に寄せる */ #rs_sa .c-buttonModule { text-align: center; }
このCSSを付与すると、以下のような見た目になります。
テキストを右揃えにした時の表示
以下で上記のCSSについて解説します。
CSSのtext-alignは「文字を寄せる方向」を指定できるプロパティです。leftで左、centerで中央、rightで右に寄せることができます。
ここでは、見出し・文章・ボタンそれぞれに指定をかけて寄せる方向を変えています。
対象のCSSセレクタを変えればこの3つ以外でも文字を寄せることが可能です。
※画像などのテキストではない要素をこのプロパティで寄せることはできないためご注意ください
#rs_sa .c-titleModule-h1, #rs_sa .c-buttonModule
text-align: center;を指定することで文字を中央に寄せています。
#rs_sa .c-textModule-textMd
text-align: right;を指定することで文字を右に寄せています。