ワードプレスで表を入れるとスマホで表示したときに全て表示されない！！というケースが多くあります。
Googleで検索するとスタイルシートをいじったり、プラグインを入れる方法が紹介されています。
プラグインは入れすぎるとサイトが重くなります。
最低限だけ入れて10個、多くても15個に収めておきたいところです。
Diverは標準機能にあるので、スタイルシートをいじる必要も、プラグインのインストールも必要はありません。
この記事では横スクロールの表作成と表作成の時短テクニックを紹介します！
スマホで表が表示されない問題
PCでは表示されるけど、スマホでは表が見切れてしまうことがあります。
| 1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 |
| 1,000円 | 2,000円 | 4,000円 | 8,000円 | 16,000円 | 32,000円 | 64,000円 | 128,000円 | 256,000円 | 512,000円 |
ワードプレスの表は通常だとレスポンシブ対応していない為、別途設定が必要となります。
スタイルシートをいじって表示がおかしくなるのも怖いし、バックアップを取って復元するのも大変です。
Diverであれば標準機能で対応可能なので手順を紹介します！
Diverなら標準機能で横スクロールが可能
初心者にオススメしたい方法は入力補助の囲い枠を使う方法です！
枠は好きなものを選んで問題ありませんが、タイトルなどが不要であれば下記を選択すれば問題ないです。
テキストは仮のものを入れておきましょう。
入力したものをビジュアルで表示すると下記のようになります。
仮で入力したテキスト部分に表示させたい表をコピペします！
今度はテキストモードの表示に切り替えてコードを探します。表のコードは
<table></table>で囲まれている部分になります。
テキストを置き換えると下記のように表示されます！
| 1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 |
| 1,000円 | 2,000円 | 4,000円 | 8,000円 | 16,000円 | 32,000円 | 64,000円 | 128,000円 | 256,000円 | 512,000円 |
表作成の時短テクニック
最後に表作成の時短テクニックを紹介します！
表の作成で項目がたくさんあるものを作るのは大変ですよね。
特にワードプレスのビジュアル画面から作るのは時間がかかります！
入力したい内容を作成しコピーします。
ビジュアルモードで貼り付けます。
| 売上 | 利益 | |
| 1月 | ¥1,000 | ¥500 |
| 2月 | ¥2,000 | ¥1,000 |
| 3月 | ¥4,000 | ¥2,000 |
| 4月 | ¥8,000 | ¥4,000 |
| 5月 | ¥16,000 | ¥8,000 |
| 6月 | ¥32,000 | ¥16,000 |
| 7月 | ¥64,000 | ¥32,000 |
| 8月 | ¥128,000 | ¥64,000 |
| 9月 | ¥256,000 | ¥128,000 |
| 10月 | ¥512,000 | ¥256,000 |
| 11月 | ¥1,024,000 | ¥512,000 |
| 12月 | ¥2,048,000 | ¥1,024,000 |
表の文字数や行数によっては見にくいことがあります。
その場合は表のどこかをクリックし、表のプロパティから幅の数値を空白にしてOKをクリックします。
まとめ
表作成はブログのジャンルによってはよく使う機能です！
特に最近はスマホでの読者が多いので、しっかり表示されるかを確認を忘れないようにしましょう！
