WordPressだと表がスマホで崩れる！折り返して見にくい！を解決する方法

WordPressできれいに表を作ったのに…「スマホから見ると表が崩れてるー！」「文章が折り返されて見にくいー！」となってしまって困りますよね。

WordPressでホームページを作るようになって、見やすいように作った表なのに、表が崩れたり、折り返しが変で妙に下に長くなったりすることに悩まされてきました。

どうにかならないものかと調べたら、結構簡単に解決できることが判明したので、WordPressの表をスマホでも崩れず！勝手に折り返されず！に美しく表示する方法を見つけたのでご紹介します。

◎ご確認ください◎
スクロールボックスについて知りたい方はこちらの記事をどうぞ♪
→「スクロールボックスの作り方」

この記事の内容

1 スマホで表が崩れるとは？なぜ起きる？
2 WordPressで表がスマホで崩れる！折り返して見にくい！を解決する方法
3 スマホでも表を綺麗に表示させるための横スクロール機能の設定
- 3.1 解決策ステップ１：CSSを追加する
- 3.2 解決策ステップ2：表に「横スクロール」の指示を書く
4 おわりに

スマホで表が崩れるとは？なぜ起きる？

WordPressで表を作ると、パソコン上で見ると綺麗なのに、スマホだと表が崩れてしまうことがあります。

それはワードプレスの場合、パソコン・タブレット・スマホなどの画面サイズに応じて、ページのレイアウトやデザインが自動で調整されちゃうからです。

パソコンの画面では綺麗に収まるサイズで作った場合、きゅ〜っとスマホサイズに調整されると、文字を折り返すしかなくなっちゃうんですよね。

表が崩れている状態
自動で折り返されて見ずらい状態がこれ
↓↓↓

くるみ

文字数減らしたり、表を諦めたりしてたわん

sayaka

これからはもぅ安心！簡単に綺麗に表示する方法があるから大丈夫よ♪

WordPressで表がスマホで崩れる！折り返して見にくい！を解決する方法

WordPressで表が崩れる！スマホの折り返して見にくい！を解決する方法は、CSSを使って、横スクロールさせる方法です。

くるみ

ひぃーーーーっ！CSS！！！

sayaka

CSSと聞くだけで苦手意識がむくむくと出てくるかもしれないけど、コピーして貼り付けるだけ！簡単だからご安心を♪

横スクロールは、表のサイズはそのままに、表に右にズラしていける（スクロールできる）ので、変なところで改行されずにとっても見やすいんです♪

↓これを設定します↓

スマホでも表を綺麗に表示させるための横スクロール機能の設定

スマホから見ても、表が崩れずに綺麗に表示させるための、横スクロール機能の設定方法をご紹介します。

コードをコピーして貼り付けるだけなので簡単ですよ♪

sayaka

さぁ♪やってみましょう♪

解決策ステップ１：CSSを追加する

書き足すコードはこちら！

/*テーブルの横スクロールのためのCSS*/
 table{ 
    width:100%;
}
.scroll{
    overflow: auto;
    white-space:nowrap;
}
.scroll::-webkit-scrollbar{
    height: 15px;
}
.scroll::-webkit-scrollbar-track{
    background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
    background: #bbb;
}
 /*テーブルの横スクロールのためのCSSはここまで*/

↑です。

これを全てコピーします。

「/* ○○○○○○ */」は説明文です。
「/* */」で挟まれている文章は、WordPressの設定に影響を及ぼしません。
何を指示したコードなのかが分からなくならないように書いているので、自分で分かりやすい言葉を入れておきましょう。

追加するのは、自分自身のWordPressの「追加CSS」です。

設定場所：WordPress管理画面→外観→カスタマイズ→追加CSS