ワードプレスの表は、列が増えると（横にのびると）画面に表示されず途中で切れてしまいます。
その改善方法を記事にしました。
WordPressで表を作成すると、機種によっては画面からはみ出ることがある
記事を作成した後、私はパソコンとスマホ両方できちんと作成した記事が表示されているかチェックしています。特に表を作成した場合は入念に確認作業を行います。
パソコンでは表が画面に収まっていても、スマホで見るとはみ出ていることが多々あるからですね。
結論として、「表の列を5列までにすればスマホでもはみ出さずに見れる」ということに気づき、表を作成するときは5列までに収まるようにデータを編集していました。
しかしながら、他人のスマホで同じ画面を見ると、なんと表が画面からはみ出ているじゃないですか！
つまりおなじスマホでも機種によって表が画面からハミ出たり収まっていたりしているわけです。
これは何とかしないといけません。
WordPressで表を作成して、画面からはみ出てしまった時の対処方法
この表が画面からハミ出るという事態に対応する方法は2つあります。
- 表を画像として保存し、メディアの追加をする
- HTMLとＣＳＳをいじる
それぞれ見て行きましょう
画面からはみ出る場合は表を画像化させて、画像として貼りつける
エクセルで表を作成し、その表を画像として保存し、WordPressのメディアとして追加する方法です。
エクセルで表を作成する⇒その表を選択して、コピー⇒図として貼りつける⇒その図を再度コピー⇒形式を選択して貼りつけ⇒図（JPEG)
ここまでは全てエクセルのシート内での作業になります。
図として貼りつける時は、ホームタブの貼りつけの下矢印を押すと、図として貼りつけることができます。
図として貼りつけることにより、その図をJPEGやPNGなど画像形式で再度貼りつけることができるようになります。
画像形式で貼りつけが終わったら、一旦そのエクセルファイルを保存します。
保存したファイルの形式をzip形式に変更します。失敗したときのことを考え、ファイルを一旦コピーしてからzip形式にすると良いでしょう。
zip形式のファイルを右クリックで開く⇒開いた中に「ＸＬ」というフォルダがあるので開く⇒mediaフォルダを開く⇒その中に先ほど保存した画像ファイルがある。
その画像ファイルをWordPressのメディアとして追加する。
以上で終わりです。
画面からはみ出る場合、ＨＴＭＬとＣＳＳをいじる
WordPressの管理画面より、外観⇒テーマの編集⇒style.cssに以下のコードを追加します。
これで.scroll-boxクラスの表は全て、スクロール（スクロールバーがついて、見えない部分はスクロールすること）が可能になります。
overflow: auto;
margin-bottom:10px;
white-space: nowrap;
}
.scroll-box::-webkit-scrollbar {
height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
background: #F3F3F3;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #CCCCCC;
}
@media only screen and (min-width: 414px) {
.scroll-box {
white-space: normal;
}
}
次に、WordPressの管理画面より外観⇒テーマの編集⇒functions.phpに以下のコードを追加します。
これは、全ての表を.scroll-boxクラスにしてしまうコードです。
{
$search = array(‘<table’, ‘</table>’);
$replace = array(‘<div class=”scroll-box”><table’, ‘</table></div>’);
return str_replace($search, $replace, $content);
}
add_filter(‘the_content’, ‘table_scroll_func’);
この2点を行うことにより、作った表すべてがスクロール可能な状態になります。
WordPressで表が画面からはみ出た時の対処法まとめ
方法論としては2点あります
- 表を作成して、画像化することで対応する
- HTMLとＣＳＳをいじる
画像で貼りつける場合は正確には「表を作る」とは言い難いかもしれません。
また手順も多いですので、できればＨＴＭＬとＣＳＳで対応したいところです。
