MENU
  • プロフィール
  • サービス
    • 初回の無料相談
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • デザインの整え方
    • WordPress入門
    • 無料ブログ活用・移行
    • ホームページの育て方
    • 実績・お客様の声
    • 自分らしい働き方・起業ノート
    • 技術ブログ

    タグ

    ChatGPTHTML/CSSSWELLおすすめWPプラグインアメブロエックスサーバーサーチコンソールセキュリティデザイン見本初回無料相談制作実績単発レッスン技術ブログへ移動継続レッスン

    アーカイブ

    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPressレッスン
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. WordPress入門
    3. Contact Form 7 | スマホではみ出る時のCSS対処法

    Contact Form 7 | スマホではみ出る時のCSS対処法

    2025 7/26
    WordPress入門
    2025-07-252025-07-26
    目次

    スマホでフォームが崩れる…?

    Contact Form 7で作ったお問い合わせフォーム。
    PCではきれいに見えるのに、スマホで見ると「入力欄が画面からはみ出してしまう」というトラブルがありました。

    使用テーマはWordPressです。

    こんな感じで、入力欄が画面におさまらず、右端が欠けてる👇

    スマホでフォームを使うお客様にとって、入力しにくい・見づらいのは大きな離脱ポイント。
    せっかく設置したフォーム、しっかり使ってもらえるようにしたいですね。

    原因は「CSSでの幅指定」かも?

    この現象の主な原因は、CSSで入力欄の横幅(widthやmax-width)が指定されていないこと。

    テーマによっては、Contact Form 7のパーツがデフォルトで width: auto; になっていて、スマホ画面より大きく表示されてしまう場合があります。


    解決方法:CSSにこれを追加!

    今回は、以下のコードを追加することで、スマホでもキレイに表示されるようになりました◎

    WordPress管理画面の「外観」>「カスタマイズ」>「追加CSS」に
    以下のコードを、に貼り付ければOKです。

    .wpcf7 input[type="email"],
    .wpcf7 input[type="text"],
    .wpcf7 textarea
     {
      max-width: 100%;
      box-sizing:border-box;
    }

    今回は、よく使われる基本的な入力欄(テキスト・メールアドレス・メッセージ欄)を対象に、以下のCSSを追加しています:もしフォームに電話番号やURLなど他の入力項目を使っている場合は、必要に応じて同じように input[type="tel"]やinput[type="url"]などを追加して対応してくださいね。

    これで、フォームの各入力欄が、スマホ画面でもぴったり収まるようになります。

    修正後の表示(After)

    CSSを追加した後のフォームがこちら👇

    画面内にすっきり収まって、タップもしやすくなりました✨

    補足:反映されないときは?

    以下の点もあわせて確認してみてください。

    • キャッシュの影響:変更後にCSSが反映されない場合は、ブラウザのキャッシュをクリア(Windowsなら「Ctrl + F5」、Macなら「Shift + 再読み込み」)
    • 他のCSSと競合していないか:テーマやプラグイン側で上書きされている場合は、!important をつけると解決することもあります。

    まとめ

    フォームの表示崩れは、CSSのちょっとした設定で解決できることが多いです。

    スマホで見たときの見やすさ・使いやすさは、問い合わせ数や信頼感にも直結するので、ぜひチェックしてみてくださいね🌿

    もし、これで合ってるか不安」「テーマごとに違うみたい…」という場合は、
    単発レッスンで操作画面を見ながらサクッと解決できます🌿
    ホームページの整理やデザイン相談もまとめてOKですので、困ったときは一緒に整えましょう。

    WordPress入門
    よかったらシェアしてね!
    中谷恵美
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    趣味は、文房具、ゲーム(RPGとモンハン)、手芸(刺繍、洋裁)。最近は作曲やアレンジも勉強中。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にピラティスを始めたが、果たして続くのか。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      無料ブログ活用・移行
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      無料ブログ活用・移行
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      無料ブログ活用・移行
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      無料ブログ活用・移行
    • 大人かわいいブログヘッダーの作り方
      2022-11-09
      デザインの整え方
    目次