6. デザイン調整と CSS

見た目はどこまで調整できるか

• 入力欄の幅や余白
• ラベルの見せ方
• 送信ボタンの見た目
• エラーメッセージの色や配置
• 確認画面や完了画面の見え方

独自CSSを追加するときの基本

まず「どの要素を変えたいか」を整理してから追加するのが基本です。入力欄の幅、項目間の余白、ボタンの見た目、エラー表示の色など、対象を絞って少しずつ調整したほうが破綻しにくくなります。

［独自CSS］ （設定ボックス） / CSS 追加前後の比較

テーマ側cssとの関係

この「独自css」はWPの出力としてはテーマのcssよりも後で読まれます。ですので、テーマ側のcssで「独自css」を上書きする場合は注意が必要です。

おすすめの方法としては、エディタ内で各パーツは div.my_form で囲んで作成し、独自cssではすべて .my_form 起点のcssを書きます。

<div class="my_form">
  ここにフォームをいれます。
</div>

上記で書いたものを [SPWForm_scode key="xxx"] で出力した場合、

<div id="spwfxxx" class="spwform spwform-input">
  <form>    
    <div class="my_form">
      ここにフォームをいれます。
    </div>
  </form>
</div>

と出力されます。ですのでテーマ側では div.spwform > form > .my_form からのcssを書けばテーマで書いたcssで「独自css」のcssルールを上書きできます。

また、「確認画面」では一番外側のIDの付いている div の .spwform クラスの後の「spwform-input」が「spwform-confirm」に変わり、「完了画面」では「spwform-thanks」になります。ですので「確認画面」「完了画面」それぞれにそれぞれのスタイルを追加出来ます。

CSS が反映されないときの確認ポイント

• 独自CSS をどこで追加しているか。
• その CSS が実際に読み込まれているか。
• テーマ側 CSS に上書きされていないか。
• 対象セレクタが正しいか。