【スマホからも見やすいサイト作り】WordPressで表(テーブル)の幅をレスポンシブにする方法！

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

どの端末から見ても画面に収まるように最適化することをレスポンシブにすると言いますが、こちらの記事ではテーブル幅をレスポンシブにする方法を紹介します。

TinyMCE Advancedプラグインが導入済みでのボタンからテーブルを作っている前提での解説となります。 TinyMCE Advancedの設定と使い方を解説！記事作成を簡単にしよう！こちらの記事では、TinyMCE Advancedというプラグインの設定と使い方を紹介します。 TinyMCE Advancedとは、WordPressで記事を作成する時にフォントの色やサイズを変えるといった文章の見た目の設定がとても簡単になるプラグインです。 作業効率が格段にアップするプラグインですので、ぜひTinyMCE Advancedは導入しておきたいですね＾＾...

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

WordPressでテーブルの幅がスマホに合ってない！

ワードプレスで表（テーブル）を作って、スマホで確認した時に…理想はこのように↑なっていて欲しいのに…

 

実際はこのように↓表（テーブル）がスマホ画面の幅に合っていなかったり、右端が切れてしまうことがありますよね。
これを解消していきましょう！

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

テーブルのどこかをクリックした状態で…「テーブル」ボタンの右の▼をクリック

↓

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

↓

幅の値を０にする または 削除する

↓

　OK　 をクリック

 

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

さいごに

ブログは、パソコンからだけでなく色々な端末から読まれるものです。

テーブルをレスポンシブにしてスマホなどの幅にも合うようにしていきたいですね！

■メルマガはメール内のリンクよりいつでも配信解除することができます。
■個人情報は厳重に管理し、プライバシーを遵守いたします。