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

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

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

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

 

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

 

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

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

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

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

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

 

くるみ
文字数減らしたり、表を諦めたりしてたわん
sayaka
これからはもぅ安心!簡単に綺麗に表示する方法があるから大丈夫よ♪

 

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

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

 

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

 

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

 

↓これを設定します↓

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

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

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

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

解決策ステップ1: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

 

 

「追加CSS」に先ほどコピーしたコードを貼り付けて「公開」を押せばOKです。

 

解決策ステップ2:表に「横スクロール」の指示を書く

CSSが追加できたら、あとは、表に「横スクロール」の指示を書く(タブを入れる)だけです。

設定場所:WordPress管理画面→投稿→テキストモード→表の前後

設定するタブ<div class="scroll">○○○○○○</div>

設定方法:

表の前にこれを入れる(<table>の前)
↓↓↓
<div class="scroll">

表の最後にこれを入れる(</table>の後)
↓↓↓
</div>

設定方法を画像で解説すると…

 

 

くるみ
表を「<div class=”scroll”>○○○○○○ </div>」でサンドイッチするだけわん

 

CSSを1度設定すれば、表を入れた時に
「<div class=”scroll”>○○○○○○ </div>」
でサンドイッチするだけでOKです。

これからは、CSSを毎回触らなくてOKなので、便利に簡単に表が横スクールで表示できるようになりますよ。

おわりに

今回は、私がWordPressでホームページを作り始めたころに、ずっと悩んでいた、スマホで表を見ると崩れてしまう…勝手に文章が折り返されて見にくくなってしまう…という問題の解決方法についてご紹介しました。

CSSとかHTMLとかが出てくると、その言葉を聞いただけて拒絶反応が出ちゃうかもしれませんが、実際にやってみると、そんなに難しくないんですよね。今回もあっという間にできちゃったと思います^^

訪問者さんが見やすい、やさしいホームページ作りをこれからも頑張ってくださいね♪

 

くるみ
この記事がためになった♪楽しかった♪という方は
sayaka
公式LINEのご登録をお願いします♪

 

北海道、石川、大阪…全国からご相談いただけて
新規の方に数ヶ月お待ちいただいている状況になれた方法をLINEでこっそりお伝えしています♪

 

▶︎「集客につながるホームページの秘密」が届くLINEを受け取る

4 件のコメント

  • ステップ1でCSSを貼り付けて、公開を押したら『何かうまくいかなかったようです。時間を置いてもう一度お試しください。』と出てしまいます。

    • 記事を見てくださってありがとうございます^^
      CSSを貼り付けて公開した際に「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」と出る理由はいくつかあるようです。
      「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」を検索窓に入れて調べていただくと、解決の糸口が見つかるはずです!
      コメント/**/があるとエラーが出る場合があるようですが、他の理由かもしれませんので、ご確認いただけると幸いです^^

    • ご質問ありがとうございます^^嬉しいです。
      私の画像は「クラシックエディター」といわれる旧タイプのものを使っています。
      くみさんは「ブロックエディター」でしょうか?
      もし「ブロックエディター」であれば、この「テキストモード」というのはないかもれしません。
      「HTMLとして編集」という機能は見つかりますか?
      点が3つ並んでいる部分をクリックすると出てくるはずです。
      「HTMLとして編集」の機能を使ってみてくださいね(私の文章でいうところの、テキストモードと同じ作業ができます)。
      編集が終わったら、点が3つ並んでいる部分をクリックして「ビジュアル編集」をクリックすると、元の編集画面に戻れます。
      試してみていただけると嬉しいです^^

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)