【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれていますWordPressのブロックエディタでテーブル(表)を作ることができるテーブルブロック。「セルの結合ができない」とか、「カラム幅の個別調整が効かない」とか、「HTMLやスクリプトが挿入できない」とか...個人的には融通が効かないところはあるものの、簡単に表ができるメリットは十分にありますから、使っている方は多いと思います(私も文句言いつつ使っている一人であります(笑))。そんな中、これはちょっと...と思うのが、モバイル表示時に勝手に改行されてしまうこと。横幅対して溢れないように調整して表示することをWeb用語でレスポンシブというのですが、テーブルの場合は逆に「表示おかしいんじゃないの?」と思われてしまうかも知れません。これもWordPressの「簡単にコンテンツが不都合なく作れる」という親切心からそうなっているものですので、決して悪いことではありません、ハイ。...やっぱり崩れた感じになるのはちょっと..ですよね?そこで今回は以下のように対応できるようにする方法を紹介します。パソコン表示時のテーブルブロックはスクロールなく表示モバイル表示時のテーブルブロックはスクロールありで表示サンプルとして、以下のテーブルはパソコン表示時はスクロールなし、幅480px以下のデバイス表示時は横スクロールありになるようにしていますので、今パソコンでご覧になっている方は、テーブル下のQRコードから、アクセスしてみていただければ、どんなふうになるのかを確認いただけます。テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容このページはモバイルデバイスでも閲覧できます左のQRコードを読み取ると、このページのURLが表示され、モバイル環境からも簡単にアクセスできますなお、WordPressにちょっと詳しい方ならご存じかと思いますが、やってることは同じでもカスタマイズの手段はいろいろありますので、いくつか例に挙げて紹介しますので、ご自身の環境に合った方法で実装いただければと思います。挿入したテーブルすべてに適用する方法サイト内に挿入されたテーブルブロックすべてに対して自動的に、モバイル時スクロールありにする方法を2つ紹介します。画面の幅に応じてスクロールあり/なしを指定する方法これが一番簡単な方法です。テーマカスタマイザー(「外観」→「カスタマイズ」)から、追加CSSを開いて以下のコードを挿入します。nowrap;}}メディアクエリというのを使って、「幅480px以下だったらスクロールあり」にしています。1行目の480の数字を変化させることで、スクロールありにする画面幅を指定することができます。閲覧環境に応じてスクロールあり/なしを指定する方法こちらは、画面の幅ではなく、アクセスしてきた環境(機種)によって適用させる方法です。これを行うには、お使いのテーマ(子テーマ)のfunctions.phpというファイルへの追記が必要となります(慣れていない方は前項の方法がおすすめです)。以下のコードをテーマ(子テーマ)のfunctions.phpの末尾へ追加します。nowrap;}</style>';}}add_action('wp_head','ha_mobile_table_scroll');詳しい説明は省きますが、やっていることは、WordPressがモバイルと判定した機器の場合、テーマヘッダーへデザインコードを追加して、表をスクロール対応にしなさいというコードになります。テーマによっては適用されないこともありますので、その場合にはヘッダーではなくフッターへ追加するようにすることで対応可能でしょうから、以下のコードと差し替えてください。nowrap;}</style>';}}add_action('wp_footer','ha_mobile_table_scroll');どこが違うかは見比べてくださいね。どちらのコードを入れても適用されない場合、キャッシュ(一時保存データ)が邪魔しているかも知れませんので、ページを表示させた状態でキーボードの「Ctrl」+「F5」を押してキャッシュのクリアをしてみてください。モバイル判定にWordPressの組み込み関数である「wp_is_mobile」を使っていますが、この判定関数はタブレットをモバイルと判定します。タブレットはパソコンと同じにというのがご希望でしたら、モバイルを判定するための関数についてを参考に独自に判定関数を追加して上記コードを改変してください。特定のテーブルだけに適用する方法サイト内に挿入されたテーブルブロックのうち、指定したテーブルだけ、モバイル時スクロールありにする方法を2つ紹介します。本方法を行うには、投稿や固定ページの編集画面で目的のテーブルブロックを選択し、「高度な設定」→「追加CSSクラス」へ「table-on-scroll」を追加する必要があります。画面の幅に応じてスクロールあり/なしを指定する方法コードは前項のものと似ていますが、「table-on-scroll」という追加CSSクラスが設定されているテーブルのみモバイル時スクロール表示になります。テーマカスタマイザー(「外観」→「カスタマイズ」)から、追加CSSを開いて以下のコードを挿入します。nowrap;}}閲覧環境に応じてスクロールあり/なしを指定する方法コードは前項のものと似ていますが、「table-on-scroll」という追加CSSクラスが設定されているテーブルのみモバイル時スクロール表示になります。テーマ(子テーマ)のfunctions.phpへ以下のコードを追加します。nowrap;}</style>';}}add_action('wp_head','ha_mobile_owned_table_scroll');適用されないときは、前項同様キャッシュのクリアなどをしてみてください。以上、WordPressのテーブルブロックで、モバイル表示時のみ横スクロールさせる方法でした。コードをさらにカスタマイズすると、全体にはモバイル時スクロールをさせておいて、特定のテーブルではスクロールなしにする..なんてこともできますが、本記事では割愛します。