contact7 横幅変更に関して

VWSとは フォーラム Lightning contact7 横幅変更に関して

contact7 横幅変更に関して

  • このトピックには11件の返信、5人の参加者があり、最後に中村誠により2ヶ月前に更新されました。
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • 投稿者
    投稿
  • #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 等の記述を追加しても横幅が変わりません。

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

    #54318

    junon
    参加者
    #54319

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

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

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

    > junon さん

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

    #54320

    junon
    参加者

    @石川@Vektor,Inc.様、

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

    @中村誠様、

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

    #54322

    中村誠
    参加者

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

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

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

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

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

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

    #54348

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

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

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

    #54353

    中村誠
    参加者

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

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #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;
    }
    
    }
    • この返信は2ヶ月前に対馬 俊彦が編集しました。理由: CSS 見直し
    #54431

    中村誠
    参加者

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

    #54432

    Vektor,Inc
    キーマスター

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

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

    #54436

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

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

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

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

    #54444

    中村誠
    参加者

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

12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • このトピックに返信するにはログインが必要です。