【WordPress】モバイル表示時だけテーブルブロックを横スクロール可能にする方法

WordPressのブロックエディタでテーブル（表）を作ることができるテーブルブロック。「セルの結合ができない」とか、「カラム幅の個別調整が効かない」とか、「HTMLやスクリプトが挿入できない」とか．．．個人的には融通が効かないところはあるものの、簡単に表ができるメリットは十分にありますから、使っている方は多いと思います（私も文句言いつつ使っている一人であります（笑））。

そんな中、これはちょっと．．．と思うのが、モバイル表示時に勝手に改行されてしまうこと。横幅対して溢れないように調整して表示することをWeb用語でレスポンシブというのですが、テーブルの場合は逆に「表示おかしいんじゃないの？」と思われてしまうかも知れません。

ただこれもWordPressの「簡単にコンテンツが不都合なく作れる」という親切心からそうなっているものですので、決して悪いことではありません、ハイ。

でも．．．やっぱり崩れた感じになるのはちょっと．．ですよね？

そこで今回は以下のように対応できるようにする方法を紹介します。

• パソコン表示時のテーブルブロックはスクロールなく表示
• モバイル表示時のテーブルブロックはスクロールありで表示

サンプルとして、以下のテーブルはパソコン表示時はスクロールなし、幅480px以下のデバイス表示時は横スクロールありになるようにしていますので、今パソコンでご覧になっている方は、テーブル下のQRコードから、アクセスしてみていただければ、どんなふうになるのかを確認いただけます。

テーブルの見出しサンプル	テーブルの見出しサンプル
テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容	テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容
テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容	テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容

なお、WordPressにちょっと詳しい方ならご存じかと思いますが、やってることは同じでもカスタマイズの手段はいろいろありますので、いくつか例に挙げて紹介しますので、ご自身の環境に合った方法で実装いただければと思います。

挿入したテーブルすべてに適用する方法

サイト内に挿入されたテーブルブロックすべてに対して自動的に、モバイル時スクロールありにする方法を２つ紹介します。

画面の幅に応じてスクロールあり／なしを指定する方法

これが一番簡単な方法です。テーマカスタマイザー（「外観」→「カスタマイズ」）から、追加CSSを開いて以下のコードを挿入します。

@media screen and (max-width:480px) {
.wp-block-table {
    margin: 0 0 1em;
    overflow-x: auto;
    white-space: nowrap;
}
}

メディアクエリというのを使って、「幅480px以下だったらスクロールあり」にしています。

１行目の480の数字を変化させることで、スクロールありにする画面幅を指定することができます。

閲覧環境に応じてスクロールあり／なしを指定する方法

こちらは、画面の幅ではなく、アクセスしてきた環境（機種）によって適用させる方法です。これを行うには、お使いのテーマ（子テーマ）のfunctions.phpというファイルへの追記が必要となります（慣れていない方は前項の方法がおすすめです）。

以下のコードをテーマ（子テーマ）のfunctions.phpの末尾へ追加します。

function ha_mobile_table_scroll(){
	if(wp_is_mobile()){
	echo '<style>
	.wp-block-table {
	margin: 0 0 1em;
	overflow-x: auto;
	white-space: nowrap;
	}
	</style>';
	}
}
add_action('wp_head','ha_mobile_table_scroll');

詳しい説明は省きますが、やっていることは、WordPressがモバイルと判定した機器の場合、テーマヘッダーへデザインコードを追加して、表をスクロール対応にしなさいというコードになります。

テーマによっては適用されないこともありますので、その場合にはヘッダーではなくフッターへ追加するようにすることで対応可能でしょうから、以下のコードと差し替えてください。

function ha_mobile_table_scroll(){
	if(wp_is_mobile()){
	echo '<style>
	.wp-block-table {
	margin: 0 0 1em;
	overflow-x: auto;
	white-space: nowrap;
	}
	</style>';
	}
}
add_action('wp_footer','ha_mobile_table_scroll');

どこが違うかは見比べてくださいね。

どちらのコードを入れても適用されない場合、キャッシュ（一時保存データ）が邪魔しているかも知れませんので、ページを表示させた状態でキーボードの「Ctrl」+「F5」を押してキャッシュのクリアをしてみてください。

モバイル判定にWordPressの組み込み関数である「wp_is_mobile」を使っていますが、この判定関数はタブレットをモバイルと判定します。タブレットはパソコンと同じにというのがご希望でしたら、モバイルを判定するための関数についてを参考に独自に判定関数を追加して上記コードを改変してください。

特定のテーブルだけに適用する方法

サイト内に挿入されたテーブルブロックのうち、指定したテーブルだけ、モバイル時スクロールありにする方法を２つ紹介します。

本方法を行うには、投稿や固定ページの編集画面で目的のテーブルブロックを選択し、「高度な設定」→「追加CSSクラス」へ「table-on-scroll」を追加する必要があります。

画面の幅に応じてスクロールあり／なしを指定する方法

コードは前項のものと似ていますが、「table-on-scroll」という追加CSSクラスが設定されているテーブルのみモバイル時スクロール表示になります。

テーマカスタマイザー（「外観」→「カスタマイズ」）から、追加CSSを開いて以下のコードを挿入します。

@media screen and (max-width:480px) {
.table-on-scroll {
    margin: 0 0 1em;
    overflow-x: auto;
    white-space: nowrap;
}
}

閲覧環境に応じてスクロールあり／なしを指定する方法

コードは前項のものと似ていますが、「table-on-scroll」という追加CSSクラスが設定されているテーブルのみモバイル時スクロール表示になります。

テーマ（子テーマ）のfunctions.phpへ以下のコードを追加します。

function ha_mobile_owned_table_scroll(){
	if(wp_is_mobile()){
	echo '<style>
	.table-on-scroll {
	margin: 0 0 1em;
	overflow-x: auto;
	white-space: nowrap;
	}
	</style>';
	}
}
add_action('wp_head','ha_mobile_owned_table_scroll');

適用されないときは、前項同様キャッシュのクリアなどをしてみてください。

---

以上、WordPressのテーブルブロックで、モバイル表示時のみ横スクロールさせる方法でした。

コードをさらにカスタマイズすると、全体にはモバイル時スクロールをさせておいて、特定のテーブルではスクロールなしにする．．なんてこともできますが、本記事では割愛します。

本記事の更新（変更）履歴

更新日	更新内容
2022年 1月 3日	記事公開しました
2022年 1月 6日	テーブルの表示サンプルを追加しました