Wordpress

STINGER5 contactform7カスタマイズ横幅を整える

2015年11月11日

contactform7横幅を整えてスマートフォンでの表示を最適化

多くの方が導入されているcontactform7。
カスタマイズに優れていてとても便利ですよね。
このブログでも使っていますが、STINGER5にデフォルトで導入するとスマートフォンで表示した際にテキストエリアがはみ出てしまい、スクロールした際に横へもスクロールしてしまう現象を修正した手順を参考までに書いておきます。

コンタクトフォームの編集

お問い合わせ→コンタクトフォーム→編集とクリックしてフォームへ下記をコピペ。
コンタクトフォーム
[text]
お名前 (必須)
[[text* your-name class:form-width]]

メールアドレス (必須)
[email* your-email class:form-width]

題名
[[text your-subject class:form-width]]

メッセージ本文
[textarea your-message class:form-width]

[submit "送信"]
[/text]

CSSの編集

外観→CSS編集を選択して下記コードを記述
[css]
.form-width {
max-width: 100%;
}
[/css]

以上のカスタマイズで横幅が最適化されてスマートフォンでの横スクロールがなくなりました!!

  • この記事を書いた人
  • 最新記事

mashmash555

~mashmash555~ ヴォーカリスト、ギタリスト 数々のBANDサポート、2chカラオケ版での活動を経てクラウンレコードよりメジャーデビュー。故郷の福岡で活動。 ■Equipment:audio technica AE5400 , PRS P24 , Axe-FxⅡ etc ■Favorite Artist:中島卓偉 , 稲葉浩志 , MichaelJackson , 園田凌士 ■Interests/Hobbies:キャンプ、磯釣り

-Wordpress
-, , ,