2021.10.19 HP委員 中村

WordPress標準TABLEとは、TinyMCE AdvancedでサポートしているTABLEです。このTABLEをWordPressのテーマAGENDAで使用した場合、レスポンシブ対応はされていますが、このTABLEでは各セル（列）に見やすくするために、上下左右に隙間（padding）を設定しています。この隙間のサイズはデフォルトでは左右15px、上下10pxで設定されています。

スマホでもこの隙間のサイズは同じなので、列を横に多く並べると、スマホではすぐに画面からオーバフローして、縦線のエラーが出やすいことになります。下記のTABLEは左右15pxの隙間サイズなので、スマホでは縦線エラーが表示されます。

注）このテーブルは、参考例のためスマホで見ると縦線エラーが表示されます。

支部 会数員	1班	2班	3班	4班	5班	6班	7班	8班	9班
2021年	80	75	73	82	76	79	65	101	84
2020年	79	76	75	80	72	80	68	90	80

 

この回避策として、スマホでのTABLEの列のセルの左右の隙間（空白部分）を狭めることにします。（赤字部分）
デフォルトのサイズは左右15px、上下10pxで設定しているため、以下の10列のTABLEではスマホで縦線エラーが表示されます。

 

 

WordPressの標準のTABLEの場合、TablePressと同じように隙間サイズを左右2px設定にすれば、列を多くしてもスマホで縦線エラーが出るケースは極めて少なくなります。隙間サイズを小さくしたため、画面の横幅に空きが出来、上記の10列のTABLEでもエラーは表示されません。エラーが表示されるのはスマホに多いので、スマホ画面に対応したCSSを設定する。

ただ、横長のTABLEが画面幅サイズ以上になった場合は、やはり縦線のオーバフローのエラーは出ますので、F12で確認して、エラーが出た場合はTABLEの列を少なくする工夫が必要です。

 

【対応方法】テーマのカスタムCSSに以下を入れてください。

/* スマホでTABLEの上下・左右の隙間padding: 10px 15px;からpadding: 2px;に狭める */
@media screen and (max-width:414px){.post_content td, .post_content th {padding: 2px;}}

このCSSを挿入した場合の全く同じページ例です。スマホで見てください。

 

◇テーマのカスタムCSSへの設定方法
①ダッシュボード → 外観 → TCDテーマオプション
②基本設定 → カスタムCSS
③上記のCSSを追加。

 

記事がよければ「いいね！マーク」のクリックをお願いします