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

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

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

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

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

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

スポンサーリンク

1.表のレスポンシブ

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

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

スマホでの見え方

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

px指定

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

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

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

レスポンシブ

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

レスポンシブ

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

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

2.横スクロールの設定

2-1.すべての表に適用すると不都合!?

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

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

私が現在使っているWordPressのテーマ「Simplicy2」の場合、カスタマイズ画面で簡単に横スクロールの設定ができます。ただし、ブログ内のすべての表に適用されるため注意が必要です。

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

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

文字列の折り返し

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

横に長すぎる表

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

ダッシュボードから[外観]-[カスタマイズ]をクリックします。

[レイアウト(投稿・固定ページ)]をクリックします。

レイアウト(カスタマイズ)

「大きな表は横スクロール」にチェックを入れて、「公開」をクリックします。

大きな表は横スクロール

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

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

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

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

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

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

(Simplicy2でカスタマイズから横スクロールを適用させている方は、チェックを外しておいてください)

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

表に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」さんの記事を参考にさせていただきました。

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

ワードプレスでカスタマイズをするには、子テーマを使いましょう!とよく耳にします。そもそも子テーマって何?なぜ子テーマでカスタマイズすることがよいの?といった疑問を解決します。simplicity2の子テーマのインストール方法も画像付で説明しています。

特定の表に適用してみる

以下のように、<div class=”scroll”>~</div>の間に表(テーブル)のコードをコピペするだけです。

divタグの使い方

出来たかどうかスマホで確認してみましょう。

スクロール完了

うまく横スクロールができ、見やすい表ができました。

この表だけに適用されていますので、他の表は影響ありません。

なお、確認しても変わらないという方は、一度ブラウザのキャッシュをクリアしてみてください。

まとめ

最初は便利だと思った表の横スクロールですが、長い文字列だと折り返されないという落とし穴がありました。

そこで、特定の表だけに横スクロールを適用するということで解決しましたので、同じように悩んでいる方はこの方法を試してみてください。