ホームページの表が、スマホで見るとはみ出す・崩れる｜表を作り直さずにできる直し方と、表をやめる選び方

パソコンで見るときれいな料金表や会社概要の表が、スマホで見ると画面からはみ出している。

文字が1文字ずつ縦に並んで、読めなくなっている。

スマホの画面は、パソコンの3分の1ほどの幅しかありません。

列の多い表をそのまま入れると、どうしても入りきらなくなります。

この記事では、表を作り直さずにできる直し方と、表をやめるという選び方をまとめました。

■まず、どう崩れているかを見る

・表全体が、画面の右にはみ出している

・文字が細かく折り返されて、縦長になっている

・ページ全体が横に動いてしまう

・画像で作った表の文字が、小さすぎて読めない

■自分でできる直し方

・列を減らす：本当に必要な列だけにする

・言葉を短くする：「お支払い方法」→「支払い」など

・横に動かせる表にする：WordPressの表のブロックや、テーマの設定で、表だけを横に動かせるようにする

・2つの表に分ける：「基本の料金」と「追加の料金」に分ける

WordPressの表のブロックには、「固定幅のセル」や、スマホで横に動かせる設定があることがあります。

使っているテーマによって違うので、表を選んだときの右側の設定を見てください。

たとえば、5列の料金表（プラン名・料金・回数・期間・備考）なら、備考を表の下の文章に移し、期間をプラン名に含めるだけで3列になります。

3列なら、多くのスマホで読める幅に収まります。

■表をやめる選び方

列が3つ以上ある表は、スマホでは読みにくくなりがちです。

次のような形に変えると、スマホでも読みやすくなります。

・会社概要：見出しと中身を、上下に並べる

・料金表：プランごとに、四角い枠（カード）に分ける

・比較の表：項目ごとに、「・項目：説明」の形で書く

パソコンでは表、スマホでは縦に並べる、という切り替えができるテーマもあります。

■画像で作った表は避ける

表を画像にして載せると、スマホでは文字が小さすぎて読めません。

検索にも、画像の中の文字は伝わりにくくなります。

表は、できるだけ文字で作りましょう。

■やってはいけないこと

・テーマのファイルを、控えを取らずに書き換える

・文字を小さくして、むりやり収める

・ページ全体の幅を広げる設定にする

文字を小さくすると、読みにくくなるだけで解決になりません。

■直したあとの確認

・iPhoneとAndroidの両方で見る（手元に無ければ、パソコンのブラウザでスマホの幅にして見る）

・スマホを横にしたときも崩れないか

・ページ全体が、横に動いてしまわないか

・表の中のリンクが、押しやすい大きさか

■自分で確かめるチェックリスト

・崩れている表と、その崩れ方を書き出した

・いらない列や、長い言葉を減らした

・表のブロックの、スマホ向けの設定を見た

・表をやめて縦に並べる形も考えた

・iPhoneとAndroidで確かめた

■よくある質問

Q. パソコンでスマホの見え方を確かめられますか？

A. ブラウザの開発者向けの機能で、スマホの幅にして見られます。ただし、実際のスマホでも一度は確かめましょう。

Q. 表を横に動かせるようにすれば十分ですか？

A. 応急の手当てとしては有効です。ただ、横に動かすことに気づかない人もいるので、大事な表は縦に並べる形も考えてください。

Q. 料金表のプラグインを使ったほうがよいですか？

A. 見た目は整いますが、プラグインが増えると管理の手間も増えます。数が少ないなら、ブロックで作るほうがおすすめです。

Q. 古い表だけ崩れます。

A. 前の編集画面（クラシックエディタ）で作った表は、今のテーマと合わないことがあります。表のブロックで作り直すと直ることがあります。

Q. 自分で直すと、パソコンの表示が崩れそうで不安です。

A. 直す前に、そのページのリビジョンが残っているかを確かめてください。まちがえても、前の状態に戻せます。

■直してほしい方へ

ご自分で直せる方は、この手順で十分です。

「テーマの設定で直したい」「たくさんのページの表をまとめて直したい」という方には、WordPressの修正をお受けしています。

崩れているページのアドレスと、スマホの画面の写真があれば、話が早く進みます。

WordPressの修正・不具合を解決します

https://coconala.com/services/748092