contact7 横幅変更に関して

[中村誠]

■ 利用テーマとバージョン :Lightning Proバージョン: 8.11.0

■ 質問内容：Contact Form 7 バージョン 5.4.2 にて、コンタクトフォームの編集画面にて、現在は、
お名前<small class=”text-danger”>（必須）</small>
[text* your-name ]

のように設定しています。
text* your-nameの後に、size:80 等の記述を追加しても横幅が変わりません。

どのようにすれば横幅が変更できますでしょうか。

[junon]

Contact Form 7については、
https://ja.wordpress.org/support/topic-tag/contact-form-7/
で聞くか
https://www.google.com/search?q=Contact+Form+7%E3%80%80%E6%A8%AA%E5%B9%85%E5%A4%89%E6%9B%B4&sxsrf=ALeKk01fJOxGrMG7_eHkDMPxeeRc97qyhg%3A1627300478065&ei=fqL-YKKwA6S2mAXSpLmIBA&oq=Contact+Form+7%E3%80%80%E6%A8%AA%E5%B9%85%E5%A4%89%E6%9B%B4&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEM0CMgUIABDNAjIFCAAQzQI6BwgjELADECc6BQghEKABSgQIQRgBUIcNWIwXYMYeaABwAHgAgAGTA4gB1hSSAQkwLjEuNy4xLjGYAQCgAQGqAQdnd3Mtd2l6yAEBwAEB&sclient=gws-wiz&ved=0ahUKEwii57_X1oDyAhUkG6YKHVJSDkEQ4dUDCA8&uact=5
で記事を探せば、答えが書いてあります。

[石川＠Vektor,Inc.]

Lightning のCSSで幅を指定してありますので、
下記 を 追加CSSに貼り付けて解除してください。

.wpcf7-form-control.form-control {
	width:auto;
}

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

> junon さん

すみません ＞＜
Lightning 固有の仕様です。
ありがとうございます。

[junon]

＠石川＠Vektor,Inc.様、

そうなんですね。詳しくコードを見ていませんでした。

＠中村誠様、

Lightningと関係ない、使用プラグインの質問かと思い、そちらへ誘導する回答をしてしまいました。
失礼しました。

[中村誠]

ありがとうございます。無事に出来ました。

お教えいただいたタグを他でも見たのですが、コンタクトフォームの編集画面に張り付けていたのが原因でうまくいっていなかったようです。

追加CSSに張り付けて上手くいきました。

追記なのですが、フォームが左端揃えになってしまいます。

.wpcf7-form-control-wrap {
display: block;
text-align: center;
}

上記のようなコードを張り付けても変わらずです。
解決方法はありますでしょうか。
新規の質問の方が宜しいでしょうか。

[石川＠Vektor,Inc.]

text-align: center; は フォーム内のテキストの指定なので、
フォーム自体を中央にしたい場合は

margin-left:auto;
margin-right:auto;

を追加すれば良いと思います。

[中村誠]

申し訳ありません。
最初教えていただいた、

.wpcf7-form-control.form-control {
width:auto;
}

をテーマエディターに追加したら、最初は幅指定が解除できていたのですが、
数日したら何故か、元の広い幅に戻ってしまっていました。
サイズの指定が出来ない状況です。

添付の設定と追加の仕方で間違いないでしょうか。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

添付の設定と追加の仕方で間違いないでしょうか。

margin-*** の設定は { と } の間に入れないといけませんので、以下の書き方が正しいです。

.wpcf7-form-control.form-control {
width: auto;
margin-left:auto;
margin-right:auto;
}

【以下、追記です】

上記の CSS だと、入力欄だけ中央に配置されてしまいますね。

それから、スマホで表示すると入力欄が画面からはみ出してしまいますので、以下のようにするのがよさそうです。

@media (min-width: 768px) {

.wpcf7-form-control.form-control {
width: auto;
}
.wpcf7-form {
max-width: 680px;
margin-left:auto;
margin-right:auto;
}

}

• この返信は2年、 9ヶ月前に対馬 俊彦が編集しました。理由: CSS 見直し

[中村誠]

恐れ入ります、教えていただいた通りのコマンドをテーマエディターに書き換えたのですが、幅は縮まりましたが左詰めになってしまいます。

[Vektor,Inc]

CSSについては下記にも記載していますので、一度ご確認の上試してみてください。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[対馬 俊彦]

私のサイトで確認したところ、先ほどの CSS で期待通りの表示をしています。
もしかしたら、不要な文字が入力されているとかが原因なのかもしれません。

まず、テーマエディターに入力したお問い合わせフォームに関する部分を
いったん削除するのがよさそうです。

この CSS はお問い合わせフォームだけに適用すればよいので、
CSS を書く場所としては、ひとつ前にキーマスターさまが提示された解説ページの
5.5. ExUnit のCSSカスタマイズ（指定ページ）
で説明されている カスタム CSS という入力欄がよいと思います。

私が提示した CSS をコピーして、
お問い合わせフォームを置いてある固定ページの カスタム CSS に貼り付ければいけると思うのですが…

[中村誠]

申し訳ありません、入力する場所が間違っておりました。
テーマエディターに追加した入力をいったん削除し、カスタムCSSに張り付けしなおして、無事にこちらでも期待通りの表示になりました。
ご丁寧に教えていただき、大変ありがとうございました。

[投稿者]

投稿