WordPressの特定の表だけ横スクロールさせる方法【コピペで簡単！】

WordPress（ワードプレス）で大きな表をつくったときに、パソコンでは綺麗に表示されていても、スマホで見ると表が見切れたり、文字が崩れていたりして困っていませんか。

ワードプレスで表を作るには、多くの人が導入していると思いますが、ビジュアルエディタの機能を拡張するプラグインTinyMCE Advancedの表を使うのが簡単です。

ここでは、TinyMCE Advancedの表を使うことを前提として、スマホで綺麗にみるためのレスポンシブ対応と、文字崩れを防ぐための横スクロールのやり方を説明していきます。

ただ、セルの中に長い文字列があると、折り返されずにものすごく横長の表になって、逆に見にくくなってしまいます。

そこで、特定の表だけに横スクロールを適用させる方法をご紹介します。CSS（スタイルシート）を触りますが、コピペで簡単にできますので試してみてください。

表のレスポンシブ
横スクロールの設定
1. すべての表に適用すると不都合！？
2. 特定の表だけに横スクロールを適用
まとめ

表のレスポンシブ

以下の表は2018ロシアＷ杯の日本代表メンバー表（一部）ですが、レスポンシブ対応になっていません。

スマホでは、以下のように見えます。見切れてしまっていますね。

これは「表のプロパティ」で幅がpx（ピクセル）指定となっているからです。（説明のためわざとこうしています）

今は仕様上おそらくはじめからレスポンシブ対応になっているかと思いますが、表の幅をマウスを使って動かしてしまったりすると、勝手にpx値に変換される場合があります。

表の幅をいじるときは注意しましょう。

そこで、レスポンシブにするには、「表のプロパティ」で幅を「100％」と指定するか、空欄にします。

これで、スマホで見たときにも、一応画面にちゃんと収まります。

が、この表めちゃくちゃ見にくいですよね。文字が崩れてしまっています。

そこで次に、横スクロールを設定して、表を見やすくしていきたいと思います。

横スクロールの設定

すべての表に適用すると不都合！？

横に表が長いとどうしても小さなスマホの画面には綺麗に収まりません。そのため、上記のような文字崩れが起こってしまいます。

横に長い表のときは、横スクロールができるようにして、見やすい画面にした方がユーザビリティが高まります。

私が以前使っていたWordPressのテーマ「Simplicy2」や現在使っている「Cocoon」の場合、カスタマイズ画面で簡単に横スクロールの設定ができます。

ただし、ブログ内のすべての表に適用されるため注意が必要です。

どういうことかというと、横スクロールを適用するとセル内の文字列を折り返さないという処理をしているんですが、これがちょっと厄介なんですね。

百聞は一見に如かずということで、下の表を見てください。

これにも横スクロールを適用させた場合、セル内で改行されないため、スマホで見るととんでもなく横に長く見にくい表になってしまいます。

参考までにSimplicity2とCocoonでの横スクロールの方法を載せておきます。

Simplicity2

ダッシュボードから[外観]－[カスタマイズ]をクリック
[レイアウト（投稿・固定ページ）]をクリック
「大きな表は横スクロール」にチェックを入れて、「公開」をクリック

Cocoon

ダッシュボードから[Cocoon設定]－[本文]をクリック
レスポンシブテーブルの「横幅の広いテーブルは横スクロール」にチェックを入れて、「変更をまとめて保存」をクリック

これですべての表が横スクロール対応になりました。（小さな表はほぼ影響はありません）

さて、話を戻して、横スクロールを適用したがために、折り返して表示してほしいところが折り返されずに見にくくなってしまいましたね。

すべての表に横スクロールを適用させることはこのような不都合な点もあります。

そもそも、そんなに大きな表を作ることも少ないです。

そうであれば、大きい表のときだけ横スクロールを適用させれば問題は解決します。

その方法をこれからご説明します。

（Simplicy2やCocoonの設定で横スクロールを適用させている方は、チェックを外しておいてください）

特定の表だけに横スクロールを適用

表にdivタグを設置

divタグとは、簡単にいうと、<div>で囲った部分に対して、CSS（スタイルシート）を割り当てて装飾などをしたい場合に、その範囲を指定してあげるためのものです。

ここでは、特定の表のみにdivタグを設置して横スクロールを可能にするという処理を行います。

divタグは次のように設置します。

<div class="scroll">
ここに表のコードを入力してください
</div>

divタグには、”scroll”という名前を付けています。下記のスタイルシートでも”scroll”という名称を使います。（必ず一致させてください）

このdivタグをプラグインAddQuicktagに登録しておくと簡単に呼び出せてとても便利です。

AddQuicktagの使い方は「ジュンイチ」さんの説明がとても分かりやすいので、分からない方は参考にしてください。

CSSのコード記述

divタグで挟んだ表に、cssを割り当てるための以下のコードをスタイルシートにコピペして保存します。

/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

※「tamasaburo」さんの記事を参考にさせていただきました。

スタイルシートへの記述は必ず子テーマを使いましょう。