WordPress個別サポート

メールフォームを簡単に作成できるTrust Formプラグインでは、「性別」のようなラジオボタンの選択項目も簡単に作成できます。

問い合わせフォームの項目に「性別」を追加

問い合わせフォームの項目に「性別」を追加

箇条書きなので、画面には上から下に表示されます。

上から下に表示される性別選択メニュー

上から下に表示される性別選択メニュー

これでも問題はありませんが、「男」「女」のように短い選択肢なので横並びにしたいこともあるかもしれません。また、画像の例ではテーマにBizVektorを使っていますが箇条書きのマークが表示されてしまう場合もあります。

マークを消す方法も含めて、箇条書きを横並びに1行でまとめるCSSを紹介します。

箇条書きを作成する「liタグ」は上から下に表示される「ブロック要素」として機能しているので、ブロック要素を解除して、改行せずに横一列に並ぶ「インライン要素」として定義します。

それには、liタグに対して「display: inline;」を指定します。

冒頭で紹介した箇条書きをインラインで表示するCSSは次のようになります(テーマにはBizVektorを使っています)。合わせて箇条書きのマークを消して、隣の項目との余白も設定しています。

/* 箇条書きをインラインで表示 */
#content #trust-form ul li {
    display: inline;
    list-style: none;
    padding-right: 20px;
}

箇条書きが横一列で表示されるようになります。

箇条書きが1行で表示される

箇条書きが1行で表示される

「#trust-form」を指定しなくてもうまくいきますが、サイト全体の箇条書きがインライン要素になってしまうので注意してください。

これで箇条書きは横一列にできました。ついでにラジオボタンとラベルの余白などを設定してレイアウトを整えます。

/* ラジオボタンの位置調整 */
#content #trust-form ul li input {
    margin-right: 5px;
    position: relative;
    top: 3px;
}

/* 箇条書きの余白(左)を解除 */
#content #trust-form ul {
    margin-left: 0px;
}

「position: relative; top: 3px;」によって、ラジオボタンを3pxほど下に下げることができます。これで、それなりにレイアウトが整ったと思います。

問い合わせフォーム「性別」項目の完成

問い合わせフォーム「性別」項目の完成

あとはご自由に微調整してください。

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

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

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

WordPressプラグイン

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