WordPress個別サポート

WordPressのContact Form 7プラグインで作成するメールフォームに追加したラジオボタンは次のように横並びになります。

Contact Form 7のラジオボタン

Contact Form 7のラジオボタン

縦に並べるには、次のようなCSSを記述する方法があります。

/* Contact Form 7のラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。

Contact Form 7のラジオボタンを縦並びに

Contact Form 7のラジオボタンを縦並びに

span(.wpcf7-list-item)に対して「display: block;」を指定することで、横並びのインライン要素ではなくブロック要素として表示しています。「margin-top:10px;」は項目の上に余白を入れているだけです。

テーマによっては上記のCSSセレクタではうまくいかない場合があります。そのテーマで設定されているCSSセレクタを調べながら試行錯誤してください。

また、フォーム要素に別のCSSが設定されているテーマでもうまくいかない場合があります。その場合、「float: none;」を追加するなど、既存のスタイルを上書きする工夫が必要です。

上記のCSSセレクタからラジオボタンを示す「.wpcf7-radio」を削除すると、チェックボックスなどすべてのリスト項目が縦並びになります。

/* Contact Form 7のリスト項目をすべて縦並びに */
.wpcf7-list-item {
    margin-top:10px;
    display: block;
}

表示結果は次のようになります。

チェックボックス・ラジオボタンなどのリスト項目を縦並びに

チェックボックス・ラジオボタンなどのリスト項目を縦並びに

チェックボックスのみを縦並びにするには最初に紹介したラジオボタン縦並び用のCSSの「.wpcf7-radio」を「.wpcf7-checkbox」に変更してください。
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート