クラウド、レンタルサーバ、SEO、WPなどのレシピを!

サーバーレシピ

WordPress TIPS

WordPress ContactForm7 プルダウンを横並びにする方法

投稿日:

プルダウンの横並び

WordPressの有名プラグイン、「Contact Form 7」にて、「生年月日」を入力させる場合、年月日、それぞれを「プルダウン」にする時があるかと思います。

プルダウンを生成すると、

のようになるかと思います。

デザイン的に、「横並び」にさせたくなります。

「プルダウン」の部品を設定する際に、「横並び」とか、「横幅」の設定はありません・・・

この場合、CSSを4行、加えるだけです。

というようなCSSを追加させます。
(CSSの追加方法は別の時に)

「このパーセント」は、自分の好みで行います。

このCSSを有効にしてみましょう。

すると、「プルダウン」の「横幅」が狭くなり、「横並び」になりました。

郵便番号の入力を「小さく」

郵便番号を入力させたい場合、「テキスト」を入れる部品を「Contact Form 7」で作成すると、「横幅」が、凄く長くなります。

日本の郵便番号は、7桁です。そんなに「横幅」が長くなくてもいいです。

この場合も「CSS」を追加させることにより、「横幅」が狭くなります。

「テキストエリア」すべてではなく、「郵便番号」の「横幅」だけを小さくしたい場合、
「Contact Form 7」部品登録時に「ID」を指定します。

このID(上記の例では、「req_zip」)をCSSで指定します。

↑というふうにCSSを設定します。

そして、反映させましょう。

これで、「郵便番号」の「テキストエリア」の「横幅」だけを小さくしました。

結論

「Contact Form 7」のデザイン修正は、意外と簡単!
CSSは、難しいと思われるかもしれませんが、まずは、「コピー」して、使ってみてください。
だんだんと慣れてきて、WordPressの達人になります(笑)。

-WordPress TIPS

Copyright© サーバーレシピ , 2019 All Rights Reserved.