contact7 横幅変更に関して
contact7 横幅変更に関して
タグ: contact7 横幅
-
投稿者投稿
-
2021年7月26日 7:26 PM #54317
中村誠閲覧者■ 利用テーマとバージョン :Lightning Proバージョン: 8.11.0
■ 質問内容:Contact Form 7 バージョン 5.4.2 にて、コンタクトフォームの編集画面にて、現在は、
お名前<small class=”text-danger”>(必須)</small>
[text* your-name ]のように設定しています。
text* your-nameの後に、size:80 等の記述を追加しても横幅が変わりません。どのようにすれば横幅が変更できますでしょうか。
2021年7月26日 8:57 PM #54318
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
で記事を探せば、答えが書いてあります。2021年7月26日 9:04 PM #54319Lightning のCSSで幅を指定してありますので、
下記 を 追加CSSに貼り付けて解除してください。.wpcf7-form-control.form-control { width:auto; }
> junon さん
すみません ><
Lightning 固有の仕様です。
ありがとうございます。2021年7月26日 9:10 PM #54320
junon参加者@石川@Vektor,Inc.様、
そうなんですね。詳しくコードを見ていませんでした。
@中村誠様、
Lightningと関係ない、使用プラグインの質問かと思い、そちらへ誘導する回答をしてしまいました。
失礼しました。2021年7月26日 10:22 PM #54322
中村誠閲覧者ありがとうございます。無事に出来ました。
お教えいただいたタグを他でも見たのですが、コンタクトフォームの編集画面に張り付けていたのが原因でうまくいっていなかったようです。
追加CSSに張り付けて上手くいきました。
追記なのですが、フォームが左端揃えになってしまいます。
.wpcf7-form-control-wrap {
display: block;
text-align: center;
}上記のようなコードを張り付けても変わらずです。
解決方法はありますでしょうか。
新規の質問の方が宜しいでしょうか。2021年7月28日 1:09 AM #54348text-align: center; は フォーム内のテキストの指定なので、
フォーム自体を中央にしたい場合はmargin-left:auto; margin-right:auto;
を追加すれば良いと思います。
2021年7月28日 9:05 AM #54353
中村誠閲覧者申し訳ありません。
最初教えていただいた、.wpcf7-form-control.form-control {
width:auto;
}をテーマエディターに追加したら、最初は幅指定が解除できていたのですが、
数日したら何故か、元の広い幅に戻ってしまっていました。
サイズの指定が出来ない状況です。添付の設定と追加の仕方で間違いないでしょうか。
Attachments:
You must be logged in to view attached files.2021年7月29日 12:15 PM #54405添付の設定と追加の仕方で間違いないでしょうか。
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; } }
-
この返信は3年、 1ヶ月前に
対馬 俊彦が編集しました。理由: CSS 見直し
2021年7月29日 3:35 PM #54431
中村誠閲覧者恐れ入ります、教えていただいた通りのコマンドをテーマエディターに書き換えたのですが、幅は縮まりましたが左詰めになってしまいます。
2021年7月29日 3:42 PM #54432
Vektor,IncキーマスターCSSについては下記にも記載していますので、一度ご確認の上試してみてください。
2021年7月29日 4:02 PM #54436私のサイトで確認したところ、先ほどの CSS で期待通りの表示をしています。
もしかしたら、不要な文字が入力されているとかが原因なのかもしれません。まず、テーマエディターに入力したお問い合わせフォームに関する部分を
いったん削除するのがよさそうです。この CSS はお問い合わせフォームだけに適用すればよいので、
CSS を書く場所としては、ひとつ前にキーマスターさまが提示された解説ページの
5.5. ExUnit のCSSカスタマイズ(指定ページ)
で説明されている カスタム CSS という入力欄がよいと思います。私が提示した CSS をコピーして、
お問い合わせフォームを置いてある固定ページの カスタム CSS に貼り付ければいけると思うのですが…2021年7月29日 4:28 PM #54444
中村誠閲覧者申し訳ありません、入力する場所が間違っておりました。
テーマエディターに追加した入力をいったん削除し、カスタムCSSに張り付けしなおして、無事にこちらでも期待通りの表示になりました。
ご丁寧に教えていただき、大変ありがとうございました。 -
この返信は3年、 1ヶ月前に
-
投稿者投稿
- このトピックに返信するにはログインが必要です。
- トピックタグ
- contact7 横幅