【30秒で解決】WordPressの表(テーブル)がスマホで見切れるかはみ出るなら横スクロールさせよう

【30秒で完了】WordPressの表(テーブル)がスマホではみ出るならスクロールさせよう!CSSをカスタマイズ 進撃のブログ運営
[ad04]
ってテーブル切れてる!?

スマホで見たら表(テーブル)がはみ出てましたか?

ワードプレスのデフォルトだとなぜか
スマホで表(テーブル)は正常に表示されません

でも安心してください

そのブログの悩み30秒で直ります

【悲報】WordPressの表は「レスポンシブ」でないからはみ出る

何もしないとワードプレスで表はスマホで見切れます

僕ははてなブログからワードプレスに移行したのですが…

あの…半年気づかなかったです…

意外と気づかないままブログ続けちゃうかもしれません

この記事を見てる人は同じ現象に困ってると思います

でも安心してください、一瞬で直ります!!

表(テーブル)をPCで見たとき

ボクのブログをつかって
WordPressの表(テーブル)がスマホではみ出るエラーを確認してみます

まずは表(テーブル)をPCで見たとき

PCで表を見ると正常に表示できてる!きれい!

PCで表を見ると正常に表示できてる!きれい!

問題なしですね!

[ad03]

表(テーブル)をスマホで見たとき

続いて表(テーブル)をスマホで見たとき

スマホで表を見ると…動かない!切れてる!

スマホで表を見ると…動かない!切れてる!

問題なし…に一瞬見えるんですよね

ボク(半年前)
ちょ、あれ…表動かねーじゃん…過去の(記事)全部これか…?

表の中のテキストが改行されてるから
一瞬勘違いしますよね

さっそく直していきましょう!

横にはみ出てOK!「横スクロール」で解決する方法

解決方法は「横スクロール」です!

CSSに追加コードを貼り付けで30秒で終わりです!

さっそく取りかかりましょう!

[ad01]

【30秒で解決】表(テーブル)スクロール用のコードをカスタムCSSに貼り付け

手順はめっちゃカンタン!

文系体育会系のボクでもわかりました!

「外観」→「テーマエディター」→「スタイルシート(style.css)」
または
「外観」→「カスタマイズ」→「追加CSS」

どちらでもいいのでスタイルシート(CSS)へ
以下の表(テーブル)スクロール用のコードをカスタムCSSを貼り付けてください

更新ボタン忘れずに!

【30秒で解決】記事編集ページでコードを追加

CSS更新が終わったら
記事編集ページに戻りましょう!

テーブルの部分を囲むように以下のコードを加えてください!

これだけ!以上!

[ad02]

【失敗】「幅100%」で表をレスポンシブする場所が見つからない

ボクも最初はこの表(テーブル)切れる問題を解決する方法として

『表(テーブル)をレスポンシブ対応にする』方法で解決

を目指したのですが諦めました

理由はシンプルで

どこをいじったらいいか見つからなかった

ははは…

間違っているかもですが、

ビジュアルエディタを使っている人向けだった
レスポンシブよりスクロールのが見やすくない?

こんな理由で横スクロールで解決する方法を選びました

CSS無理!!なら表をカンタンに作成できるプラグイン『TablePress』もある

CSS要らず!表をカンタンに作成できるプラグイン『TablePress』

CSS要らず!表をカンタンに作成できるプラグイン『TablePress』

あなた
うーーん…CSSちょっとしんどい

「横スクロールは嫌だ!」
「レスポンシブが良いんだ!」
「めんどくさい!」

そんな人には
『TablePress』というプラグインがおすすめ

『TablePress』を使うと、いろんなテーブルを
タグなどを使わずに作成できるのでとくに初心者ブロガーにおすすめです!

【まとめ】スクロールで十分解決できる!1分後にはブログ記事作成に戻ろう

まとめです!

ワードプレスのブログで記事を書いているとき、
もし表(テーブル)がスマホで見切れるかはみ出るというエラーに気づいたら

ぜひ横スクロールで解決しましょう!

『TablePress』というプラグインもありですよ!

以上です!ブログがんばってください!

[ad07]