通常サイト（ブログ）で大きめの表を作成すると、パソコン画面では問題はないのだが、スマートフォンで表示したときに問題が起きてしまう。

 

そう、画面からはみ出てしまうのだ。

 

 

実際に表示してみると、このように表示される。

スマホでは、画面幅をオーバーしているので、右端に線が入ったりして見にくくなっているし、表を見るときには、ズームアウトしなければならないのだ。

 

 

で、表を横スクロールできるようなカスタマイズを施すと、上記のようにスマホでも綺麗に見せることができる。

また、使いやすさも向上しユーザビリティも上がるはず。

 

ここでは、スマートフォンでWordpressの表（table）を横スクロールできるようにする方法を紹介する。

 

WordPressの表（table）を横スクロールできるようにする方法

 

表を横スクロールできるようにするには、「CSSカスタマイズ」と「HTMLカスタマイズ」を行う必要がある。

まずは、CSSカスタマイズから紹介する。

 

CSSカスタマイズ

 

では、実際にtableを横スクロールできるようにするCSSカスタマイズを行う。

 

 

テンプレートが「カエテンWP-JOY」の方は、Wordpressの管理画面（ダッシュボード）に移動して、「外観」➡「その他オプション」へと進もう。

 

 

カエテンWP-JOYの方は、「<head>内に挿入されます」の欄にCSSコードを入力しよう。

「カエレバやヨメレバ」などのカスタマイズを施している方は、一行空けてCSSコードを入力すればOKである。

 

CSSコードは下記のページを参考にさせて頂いた（２、CSSを編集より）。

このページには、STINGER８などの一般的なテンプレートを使用している方の編集方法も載っているので参考になる。

 

➡tableを横スクロールさせる方法（2、CSSを編集）

 

 

CSSコードを入力するとこのようになる。

 

 

あとは、「変更を保存」ボタンをクリックする。

これで、CSSカスタマイズは完了である。

 

HTMLカスタマイズ

 

HTMLカスタマイズ方法としては、tableを「divタグ」で囲むだけである。

 

 

 

なので、投稿or固定ページのテキスト画面で表を作成後に上記のコードで、tableを「divタグ」で囲もう。

これで、HTMLカスタマイズは完了である。

 

完成した表

 

「CSSカスタマイズ」と「HTMLカスタマイズ」が完了したら、横にスクロールできる表が完成する。

 

例

剣と槍の種類（CSSとHTMLのカスタマイズ版）

エクスカリバ― 草薙剣 本庄正宗 グングニル 天逆鉾
偉人 アーサー王 スサノオノミコト 徳川将軍家 オーディン イザナキ

 

イザナミ

 

ニニギノミコト
人物画

 

こんな風に「横スクロールできる表」ができていると思う。

 

カエテンWP-JOY

ただ、この方法だと「カエテンWP-JOY」だと、スマートフォンで表示した場合スクロールバーは表示されないが、スクロールはできる。

 

パソコン版だとスクロールバーがちゃんと表示されるので、ユーザーが困ることはないと思う。

原因はテンプレートの問題なのか、分からないが私は横にスクロールできるようになれば良いのでこれで良し。

 

あと「カエテンWP-JOY」を使用している方で、最新のアップデートがされているバージョンだと、tableタグで普通に表を作るとスマホで閲覧したときに自動でスマホの幅に合わせようとするので画像などが縮小されてしまう事がある。

 

 

そういった場合には、上記のように以前のアップデート前のtableタグを使用すると、限度幅が拡大されるので画像なども大きめに表示できるようになる。

 

tableタグを変更する場合には、上記の一行のみの変更で大丈夫である。

あと、table-00→table-01　に変更すると行の背景色が全て白色になるので、デザイン重視の方は活用したい。

 

まとめ

 

やはりスマホだと、表を表示する場合、はみ出すことが多くなるのでその時は、横スクロール表示にしてやるとユーザーが見やすくなると思う。

以上で、スマートフォンでWordpressの表（table）を横スクロールできるようにする方法の解説は終了する。

 

関連記事

 

■見やすい比較表の作り方（WordPress編）

カテゴリー
アフィリエイトブログ
タグ