WordPressブログの表(テーブル)

2019年10月19日WordPress

表(table)の幅問題:表はレスポンシブではない

表はやっかいもの。列数や行数、文字数や構成によって、表に必要な又は適したサイズが異なってくる。しかもパソコンやスマホで、異なるデバイスで見ていることも考慮しなければならない。

WordPressブログで記事中に表を入れたいとき、以前はプラグインを必要としました。今ではエディター標準で記事中に表を挿入することが出来るようになりました。クラシックエディター又はクラシックエディター・プラグインを使っている場合です。Tiny MCE Advancedと機能的には同等になっています。

しかし、この表は使っているテーマによっても状況は異なるでしょうが、レスポンシブ化されなかったり、コンテンツ幅から表の右端はみ出してしまったり。見え方に問題ありですね。画像のようにブラウザの幅に自動的に合わせてくれるレスポンシブ化はされないのです。

グーテンベルグ・ブロックエディターの表ブロックを使うと、コンテンツ幅に対して100%になるレスポンシブの表が作成できます。しかし画面幅によって余計なところで改行されたり、列数の多い表は異常に見難くなってしまう・・・列数や文字数の大きく異なる表をWEB上で取り扱う、しかもパソコンやスマホやら画面のサイズが異なるので、表の扱い方ってホント難しい。

ビジュアルエディターを使ってPC画面上で幅の調整は可能ではある。しかし横幅の広い表や列の多い表では画面上から途切れてしまう。右端がはみ出して見られなかったり。特にスマホやタブレットでの閲覧の場合、クラシックエディターのデフォルトでのテーブル挿入では表はレスポンシブにはならないんですね。

またビジュアルエディターで表の幅を調整すると、width: 180px;とかwidth: 32.48%とかセルサイズを指定するhtmlタグが自動的に記述されてしまう。パソコンでの見栄えは調整出来るけれども、スマートフォンやタブレット端末で表が途切れてしまうことは変わらない。

後述しますが、クラシックエディターで表を作成する場合は、画面上でセル幅を調整しないようにしましょう。

width: autoプロパティで表のセル幅を自動で調整する

CSSに下記を記述する。ルクセリタスは「外観」→「カスタマイズ」→「追加CSS」から記入できる。直接style.cssなどを編集しなくて済むので便利です。

/* セル幅を自動調整 */

table, th, td {width: auto !important;}

これで強制的にコンテンツ幅内に表を合わせる事が出来る。投稿記事中の設定よりもこちらが優先されるので、過去記事の表をひとつづつ書き換えたり、調整する必要がないので便利です。

しかし、これでもコンテンツのレイアウト枠からはみ出してしまう表がある。文字数が多いが改行を入れたくない、列が多いなど表ではコンテンツ枠からはみ出してしまい、列の最後の方はパソコンでも見られなくなってしまう。

表を横スクロールできるようにする

コンテンツ幅からはみ出した表を横スクロールさせる。

表の最初に下記を記述する。

<div class="th" style="overflow: scroll;">
<table border="1" border-collapse="collapse" style="table-layout: fixed;width: 100%">

表の最後にdiv終了タグを記述。

</div>

ビフォー

アフター

SIZETOP TubeHEAD ANGLESEAT ANGLECHAIN STAYWHEEL BASEBB DROPHEAD TUBESTAND OVERSTACKREACH
1558068˚73˚43511044795773621390
1760068˚73˚435113047100806626408
1962068˚73˚435115147110840635426
2164068˚73˚435117347130876653440

例に挙げたのはスポーツサイクルのフレーム寸法表。ジオメトリー表ともいいます。項目数が多いので画面上ではパソコンでもはみ出してしまっていました。スマホなら尚更・・・今まで見て下さっていた方、ごめんなさい。

横スクロール可能な表のhtmlソース

<div class="tg" style="overflow: scroll;">
<table border="1" border-collapse="collapse" style="table-layout: fixed;width: 100%">
<table class="tg">
<tbody>
<tr>
<th>SIZE</th>
<th>TOP Tube</th>
<th>HEAD ANGLE</th>
<th>SEAT ANGLE</th>
<th>CHAIN STAY</th>
<th>WHEEL BASE</th>
<th>BB DROP</th>
<th>HEAD TUBE</th>
<th>STAND OVER</th>
<th>STACK</th>
<th>REACH</th>
</tr>
<tr>
<td>15</td>
<td>580</td>
<td>68˚</td>
<td>73˚</td>
<td>435</td>
<td>1104</td>
<td>47</td>
<td>95</td>
<td>773</td>
<td>621</td>
<td>390</td>
</tr>
<tr>
<td>17</td>
<td>600</td>
<td>68˚</td>
<td>73˚</td>
<td>435</td>
<td>1130</td>
<td>47</td>
<td>100</td>
<td>806</td>
<td>626</td>
<td>408</td>
</tr>
<tr>
<td>19</td>
<td>620</td>
<td>68˚</td>
<td>73˚</td>
<td>435</td>
<td>1151</td>
<td>47</td>
<td>110</td>
<td>840</td>
<td>635</td>
<td>426</td>
</tr>
<tr>
<td>21</td>
<td>640</td>
<td>68˚</td>
<td>73˚</td>
<td>435</td>
<td>1173</td>
<td>47</td>
<td>130</td>
<td>876</td>
<td>653</td>
<td>440</td>
</tr>
</tbody>
</table>
</div>

今の時代、スマートフォンからの訪問者が6~7割を占めるというのに確認を怠り、自分のブログの表が見にくかったことをようやく気が付きました。重ね重ねごめんなさい。

僕も勉強になりました。忘備録も兼ねて残しておきます。

クラシックエディターで作成した表

クラシックエディターで作成した表のhtmlソース(テキスト表示)

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 16.6667%;">仕様</td>
<td style="width: 16.6667%;">チェンホイール</td>
<td style="width: 16.6667%;">スプロケット</td>
<td style="width: 7.81822%;">ハブ</td>
<td style="width: 18.7273%;">リアディレーラー</td>
<td style="width: 23.4546%;">フロントディレーラー</td>
</tr>
</tbody>
</table>

セル幅が勝手に指定されてしまうので「style="width: 16.6667%;"」は削除しておかないと宜しくないです。

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td>仕様</td>
<td>チェンホイール</td>
<td>スプロケット</td>
<td>ハブ</td>
<td>リアディレーラー</td>
<td>フロントディレーラー</td>
</tr>
</tbody>
</table>

このようにhtmlのテキストエディタ表示にして、セル幅指定を消しておきます。

ルクセリタス3.7.5スクロールブロック

2020年1月9日追加情報

ワードプレステーマ・ルクセリタスが3.7.5にバージョンアップされました。スクロールブロックが追加。その他機能追加や変更箇所はルクセリタス公式ブログを参照。

スクロールブロックで表に限らず投稿記事内の画像や整形済みテキストブロックに、スクロール機能を付加することが出来ます。

ルクセリタスユーザーは3.7.5にアップデートするだけで、ページ内でスクロール可能な表を作成できるようになりました。

広告