ワードプレス表(テーブル)を挿入した時、パソコンだときちんと画面にフィットしているのに、スマホで確認すると途中で切れてしまうことがあります。

 

こちらの記事では、テーブル幅レスポンシブに(様々な端末に合うように最適化)する方法を紹介します^^

 

TinyMCE Advancedプラグインが導入済みでのボタンからテーブルを作っている前提での解説となります。

TinyMCE Advancedの設定と使い方を解説!記事作成を簡単にしよう!

レスポンシブ

WordPressでテーブルの幅をスマホにも合うようレスポンシブにする方法を動画で解説!

WordPressでテーブルの幅をスマホにも合うようレスポンシブにする方法を画像で解説!

ワードプレスで表(テーブル)を作って、スマホで確認した時に

表(テーブル)の幅をレスポンシブにする

理想はこのように↑なっていて欲しいのに

実際はこのように↓

表(テーブル)の幅をレスポンシブにする

表(テーブル)がスマホ画面の幅に合っていない(>_<)」「右端が切れてる(T_T)」という悲劇に見舞われた場合の対処法を紹介します。

 

テーブルのどこかをクリックした状態で

 

表(テーブル)の幅をレスポンシブにする

「テーブル」ボタンの右の▼をクリック

「表のプロパティ」をクリック

表(テーブル)の幅をレスポンシブにする幅の値を0にする または 削除する

 OK  をクリック

 

これで、スマホなどパソコン以外の端末で見ても表の幅が合うようになります^^

さいごに

ブログは、パソコンからだけでなく色々な端末から読まれるので、ぜひテーブルをレスポンシブにしてスマホなどの幅にも合うようにしていきたいですね^^