スマホで見たら表（テーブル）がはみ出てましたか？
ワードプレスのデフォルトだとなぜか
スマホで表（テーブル）は正常に表示されません
でも安心してください
そのブログの悩み30秒で直ります
Contents
【悲報】WordPressの表は「レスポンシブ」でないからはみ出る
何もしないとワードプレスで表はスマホで見切れます
僕ははてなブログからワードプレスに移行したのですが…
あの…半年気づかなかったです…
意外と気づかないままブログ続けちゃうかもしれません
この記事を見てる人は同じ現象に困ってると思います
でも安心してください、一瞬で直ります！！
表（テーブル）をPCで見たとき
ボクのブログをつかって
WordPressの表(テーブル)がスマホではみ出るエラーを確認してみます
まずは表（テーブル）をPCで見たとき
PCで表を見ると正常に表示できてる！きれい！
問題なしですね！
表（テーブル）をスマホで見たとき
続いて表（テーブル）をスマホで見たとき
スマホで表を見ると…動かない！切れてる！
問題なし…に一瞬見えるんですよね
表の中のテキストが改行されてるから
一瞬勘違いしますよね
さっそく直していきましょう！
横にはみ出てOK！「横スクロール」で解決する方法
解決方法は「横スクロール」です！
CSSに追加コードを貼り付けで30秒で終わりです！
さっそく取りかかりましょう！
【30秒で解決】表（テーブル）スクロール用のコードをカスタムCSSに貼り付け
手順はめっちゃカンタン！
文系体育会系のボクでもわかりました！
「外観」→「テーマエディター」→「スタイルシート（style.css）」
または
「外観」→「カスタマイズ」→「追加CSS」
どちらでもいいのでスタイルシート（CSS）へ
以下の表（テーブル）スクロール用のコードをカスタムCSSを貼り付けてください
更新ボタン忘れずに！
【30秒で解決】記事編集ページでコードを追加
CSS更新が終わったら
記事編集ページに戻りましょう！
テーブルの部分を囲むように以下のコードを加えてください！
これだけ！以上！
【失敗】「幅100%」で表をレスポンシブする場所が見つからない
ボクも最初はこの表（テーブル）切れる問題を解決する方法として
『表（テーブル）をレスポンシブ対応にする』方法で解決
を目指したのですが諦めました
理由はシンプルで
どこをいじったらいいか見つからなかった
ははは…
間違っているかもですが、
ビジュアルエディタを使っている人向けだったレスポンシブよりスクロールのが見やすくない？
こんな理由で横スクロールで解決する方法を選びました
CSS無理！！なら表をカンタンに作成できるプラグイン『TablePress』もある
CSS要らず！表をカンタンに作成できるプラグイン『TablePress』
「横スクロールは嫌だ！」
「レスポンシブが良いんだ！」
「めんどくさい！」
そんな人には
『TablePress』というプラグインがおすすめ
『TablePress』を使うと、いろんなテーブルを
タグなどを使わずに作成できるのでとくに初心者ブロガーにおすすめです！
【まとめ】スクロールで十分解決できる！1分後にはブログ記事作成に戻ろう
まとめです！
ワードプレスのブログで記事を書いているとき、
もし表(テーブル)がスマホで見切れるかはみ出るというエラーに気づいたら
ぜひ横スクロールで解決しましょう！
『TablePress』というプラグインもありですよ！
以上です！ブログがんばってください！
