かずぽんノート

管理人のかずぽんがお役立ち情報を発信するブログです。

*

スマホでお問い合わせフォームの表示がはみでる場合の対処法!

   

ポストの風景

こんにちは。当ブログ管理人のかずぽんです。

過去記事でお問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」について書いています。

▽過去記事は下記から

Contact Form 7-お問い合わせフォームを簡単に設置できる便利なプラグイン!

Contact Form 7-スパム対策にチェックボックスを追加する方法!

で、この「Contact Form 7」は過去記事でも書いているとおり、基本的にはデフォルトでも、お問い合わせフォームとして必要最低限の機能があります。

そのまま使っても、普通に使用することができますが、私的にちょっとだけ気になる点がありました。

それは、どのようなことかというと、

スマホでみたときにフォームの表示がはみ出てる。

ということ。

もちろん、そのままでもお問い合わせフォームとしての機能は普通に使えますので問題はないのですが、気になったのとユーザビリティ面で調整をしたほうがいいかなと思ったので、対策をしてみました。

ちなみに、対処前のスマホでみたときの表示はこんな感じ・・・。

はみ出ているお問い合わせフォーム

う~ん。個人的な差はあると思いますが、私はやっぱり気になります。

style.cssにコードを追記しよう

まず、しなければいけないのは「style.css」を編集すること。

やり方としては、子テーマを作って子テーマのstyle.cssにコードを書く方法と、現在適用しているテーマ(テンプレート)にコードを追記する方法がありますが、今回は簡単にできる現在のstyle.cssに追記をする方法で説明をしていきます。

※style.cssを編集するときは、誤って消したらいけないところを消してしまっても対応できるように、バックアップしておくことをおすすめします。

style.cssを編集するには、ダッシュボードメニューの「外観」から「テーマの編集」をクリックします。

するとstyle.cssの編集画面になるので、一番下までスクロールさせて下記コードをコピペして貼り付けます。

max-widthを100%にしてやることで、見た目の表示を画面幅に収めてやります。

Contact Form 7のフォームの内容を変更しよう

cssの編集をした後にすることは、「Contact Form 7」のフォーム内容を変更すること。

変更方法は、ダッシュボードメニューの「お問い合わせ」から「コンタクトフォーム」をクリックし、今現在適用しているタイトルをクリックします。

そして、フォームの下記画像部分を追記します。

フォームの変更箇所

以上で完了です。

意外と簡単に設定できたのではないでしょうか?

で、スマホから表示を確認してみると「ん、あれ

はみ出ているお問い合わせフォーム

はみでてる(´;ω;`)

max-widthの%を変更してみた

適用しているテーマによっては、max-width:100%で画面内に収まって表示されているかも知れませんが、私が使用している「Stinger6」ではうまく表示してくれませんでした。

ここで、WordPress初心者のかずぽんは途方に暮れてしまいました。

調べ方が悪かったのかも知れませんが、いくらGoogle先生に聞いてみても教えてくれません。

どうしていいか分からない中で、ふと思いついたのが「100%でだめなら90%でいいんじゃね」ということ。まったく核心はありませんでしたが、とりあえず進めないことには始まりませんので変えてみることに・・・。

さあ、これでどうだーと表示を確認してみると・・・。

表示幅に収まったフォーム

ヨッシャー!!!

結局、この方法が正解かどうかは分かりませんが、きちんと綺麗にスマホ表示に収まりましたので「結果よければすべて良し」、正解ということにしましょう。(笑)

もし、その方法はいけないよ。という指摘があれば教えていただけるとありがたいです。m(__)m

本日のまとめ

終わってみればすごく簡単な設定方法ですが、調べるのに結構苦労しました。スマホでお問い合わせフォームをみたときに、フォームの表示が切れるのをどうにかしたいという方は参考にして頂けたらと思います。

 - WordPressカスタマイズ