はじめに
クリエイティブ設定にて、テキストの文字数を増やしたらボタン内の文字が改行された、などテストパターンによってはレイアウトが崩れる可能性があります。その場合「追加CSS」にテストパターン適用時のスタイル属性を追加することで、レイアウト崩れを解消することができます。
※「追加CSS」はテストパターンごとにCSSを設定するのではなく、全てのパターンに対し一律に設定されるため、デフォルトのボタンにも設定したスタイルが反映されます。
設定方法
「追加CSS」は以下2種類の指定方法より設定してください。
■ボタンタグのstyle属性を指定
改善ボタンに対するスタイル属性のみ指定する場合は、「ボタンタグのstyle属性を指定」を選択し、入力欄に改善ボタンのスタイルを追加してください。
指定方法の選択時、入力欄に入力サンプルを表示しておりますので参考にしてください。
図１－１：ボタンタグのstyle属性を指定
■selector指定（styleタグを挿入）
改善ボタンの親要素など、改善ボタン以外のスタイル属性を指定する場合は、「selector指定（styleタグを挿入）」を選択し、CSSセレクタ形式にてスタイルを追加してください。
指定方法の選択時、入力欄に入力サンプルを表示しておりますので参考にしてください。
図１－２：selector指定（styleタグを挿入）
使用方法
■使用例
例）テキストの文字数を増やしたら改行されしまい、レイアウトがおかしくなった
図２－１：クリエイティブ設定にて「テキスト」変更後にレイアウト崩れ発生
（1）追加CSSにてボタンの横幅と文字サイズを少し修正する
図２－２：追加CSSを設定
（2）追加CSSが適用されたデザインをプレビューにて確認する
図２－３：追加CSSの適用を確認する
■典型的な使い方
- 差し替えたテキストがはみ出す、改行される場合にデザインを調整する
- テキストが左寄せになってしまうので中央寄せに変更する（text-alignをcenterに設定する）
- レイアウトが崩れるので、width、height、line-height、margin、paddingなどを補正する