WordPressのテーブル表をレスポンシブ対応にしてください！
今回ご紹介する事例のお問い合わせ内容は、下記の通りです。
お問合せ内容
S様（サービス業）
【 依頼内容 】WordPressのテーブル表レスポンシブ化
パソコンではうまく表示されている「表」がスマホで見ると途中で切れて表示されてしまいます。
スマホでも、パソコンと同じように表示されるように、テーブルをレスポンシブ対応にしたいのでカスタマイズお願いします。
レスポンシブ化したいテーブルは全部で30個ほどあります。
見やすくなればいいので、幅やデザインなどはお任せします。
テレコム東京の対応
WordPressでは「表」のことをテーブルと言います。
WordPressでは横幅が固定されているため、表（テーブル）を出力する際に、表示するデバイス画面が指定されている幅より狭くなってしまうと、表（テーブル）の表示が崩れたり、表が収まりきらず途中で切れた状態で表示されてしまいます。
今回は、PCの画面では問題なく表示される「表」が、スマホ画面では見切れてるため、表（テーブル）をレスポンシブ対応にしてほしい、とお客様からご依頼がありました。
レスポンシブとは
レスポンシブとは、PC、スマホ、タブレットなど異なるデバイスの画面幅に合わせて、サイトを見やすい画面に自動調整してくれる仕組みのことをいいます。
WordPressの表（テーブル）の機能においては、レスポンシブ対応になっていないので設定が必要となります。
今回のケースのように、幅の狭いスマホ画面で表（テーブル）がはみ出て切れているのであれば、WordPressの「表のプロパティ」で幅を割合で指定することでレスポンシブ化することができます。
サイト内調査をしてみると、いくつかある表（テーブル）の中には、横幅が大きすぎる表がありました。
横幅が大きいテーブルは、レスポンシブ化した場合、表が縦長につぶれてしまい、レスポンシブ化しても見づらくなってしまいます。
お打ち合わせをさせていただき、横幅の長い表にはスクロール機能を実装してはどうか、とご提案させていただきました。
スクロール機能をつけると、表の下部に横スクロールバーが表示されて、幅がはみ出している部分を横スクロールすることで、表の崩れを防ぐことができます。
お客様に気に入っていただけましたので、レスポンシブ対応とスクロール機能を組み合わせてカスタマイズすることにしました。
以上の点を踏まえて、弊社では、下記のような対応をさせていただきました。
実際の対応
事前にお客様からお聞きした情報は以下の通りです。
必要な情報
- レンタルサーバーのログイン情報
- WordPressのログイン情報
- FTPのログイン情報
続いて、以下の作業内容によりお客様のご要望を実現することができました。
- サイト内調査・お打ち合わせ
- CSSコーディング
※レスポンシブ対応とスクロール機能を組み合わせたコードを記述しました。 - 表（テーブル）の微調整
※5個の表（テーブル）を調整しました。 - 動作確認後、最終確認、作業完了
- 30日間の無料保証サポート
今回は、表（テーブル）を画面の幅に応じて「レスポンシブ対応」または「横にスクロール」のどちらかが適応されるコードを記述し、カスタマイズさせていただきました。
これにより、スマホではスクロール機能がついた表（テーブル）が表示されます。
PCでは基本的にレスポンシブ対応ですが、ウィンドウを狭くすると、「レスポンシブ対応」から「スクロール機能」に変わって表示される仕様となりました。
ご依頼があったレスポンシブ化したい表（テーブル）は約30個でしたが、1つずつテーブルを調整するとなると時間とコストがかかります。
見積もり金額を抑えたいというご要望により、調整が難しそうな表（テーブル）だけを弊社が微調整させていただきました。
残りの表（テーブル）の微調整は、お客様に手順をお伝えし、お客様に対応してもらうようにして作業完了としました。
このケースの見積もり金額
今回ご紹介したケースの場合、弊社では7万円（税別）にて対応いたしました。
業者によって設定されている価格が異なり、同じ作業内容であっても高額な見積もりを出される場合もありますので、依頼先を検討する際には必ず他社見積りを取りましょう。
今回ご紹介したようなケース以外にもホームページのことでお困りの場合は、お気軽に弊社までお問い合わせください。
弊社にお問い合わせいただく70％は、専門知識を持たれていない読者様からです。
わかりやすい言葉でご説明させていただくように心がけておりますので、お気軽にご相談くださいね。
下記の画像をクリックしていただくと、無料診断フォームに遷移します。
関連記事
