WordPress(ワードプレス)の表がスマートフォンで見た時に横にはみ出てしまう際の対処法

スポンサーリンク

WordPressで表組をして

横に長い表の場合…スマートフォンで見ると途中からは弥陀ちゃいますよね?

05月 6月 7月 8月 9月 10月 11月 12月 1月 2月 3月 4月
今年 26940 29191 29991 27792 34496 21908 28839 31003 26857 26483 24965.16 4539.4
昨年 27268 28012 32268 26868 23271 32460 31278 33785 28046 25213 30859 24543

そんな際に対処方法ですが、

結構簡単で、以下の2ステップだけで解消されます。

  • 手順1.CSSを追記します
  • 手順2.横スクロールさせたい表の前後に、簡単な「コード」を入れる

たったこれだけです。

手順1.以下のコードをカスタムCSSに貼り付けよう

以下に記載したCSSを、WordPressのダッシュボードの
『外観』⇒『カスタマイズ』⇒『追加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はここまで*/

↑こんな風に貼付けて公開しましょう。

手順2.投稿の編集画面の「テーブル」の前後にコードを入れよう

これはWordPressの旧エディタと新エディタによってやり方が違うので、気をつけて下さい。

■旧エディタの場合

テキストモードにして、以下のようにテーブルの前後を<div class=”scroll”>と</div>で挟んで下さい。

<div class="scroll">

<table>
~略~
</table>

</div>

■新エディタの場合

テーブルの前後に「カスタムHTML」というブロックを1つずつ入れます。

  • テーブルの直前に入れたカスタムHTMLには <div class=”scroll”>
  • テーブルの直後に入れたカスタムHTMLには </div>

を入れてみて下さい。

05月 6月 7月 8月 9月 10月 11月 12月 1月 2月 3月 4月
今年 26940 29191 29991 27792 34496 21908 28839 31003 26857 26483 24965.16 4539.4
昨年 27268 28012 32268 26868 23271 32460 31278 33785 28046 25213 30859 24543

CSS, Wordpress

Posted by wpmaster