WordPress テーブル:モバイルからゾーンを離れる場合

Last Updated: 2023 年 07 月 17 日 2のコメント

WordPress ブロックエディタを使用している場合は、テーブルブロックを使用してテーブルを追加できます。 テーブルブロックとしてテーブルを追加すると、テーブルが横に長い場合はモバイルでスクロールバーが表示されます。 ただし、TablePressプラグインを使用してテーブルを挿入すると、モバイルではテーブルが領域から外れます。 テーブルプレステーブルが横に長い場合にモバイルでスクロールバーが表示されるようにする方法を見てみましょう。

WordPress Gutenberg テーブルブロック

WordPress 基本エディタであるブロックエディタ(Gutenberg)にはテーブルブロックが用意されているため、簡単なテーブルを追加するときに使用することができます。

ブロックエディタで「/テーブル」と入力して、テーブルを簡単に選択して追加できます。

WordPress Gutenberg (ブロックエディタ)テーブルブロック

キーボードショートカットをうまく活用すると、マウスの使用を最小限に抑えながら文章を書くことができます。

メインエディタで提供されている機能を使用してテーブルを挿入すると、テーブルが横に長くなると、モバイルでテーブルの下部に水平スクロールバーが表示され、テーブルを左右にスクロールできます。

WordPress テーブル:モバイルからゾーンを離れる場合

WordPress TablePress プラグイン: テーブルがモバイルからゾーンを離れる場合

WordPress用 TablePressプラグインを使用すると、フィルタリング機能と検索機能が提供され、より複雑なテーブルを作成し、必要な場所にショートコードとして追加できます。 TablePressプラグインは現在80万を超える WordPress サイトにインストールされて使用されています。

ただし、TablePressで作成したテーブルをショートコードとして追加すると、テーブルに列数が多いため、横長が広い場合、モバイルでテーブルが領域を超えてぎこちなくなる可能性があります。 上の図のように表の下部に水平スクロールバーを表示したい場合は、次のCSSコードを使用できます。

/* TablePress 표가 가로 영역을 벗어날 경우 스크롤바 표시하기 */
/* Show a horizontal scrollbar on TablePress tables in WordPress */

#tablepress-1_wrapper {
    overflow-x: auto;
}

「1」は挿入するテーブルプレステーブルのIDです。 表IDを確認して適切に変更してください。 たとえば、TablePress ショートコードが [table id=2 /] の場合、上記の「#tablepress-1_wrapper」を「#tablepress-2_wrapper」に変更します。

overflow-x 属性の詳細については、W3Schools の「CSS overflow-x Propertyドキュメントを参照してください。overflow-xプロパティはすべてのブラウザで正しく機能します。

上記のCSSコードを ルックス>ユーザー定義>追加CSSに追加することができます。 Avada など一部のテーマでは、テーマオプションにカスタムCSSを追加するオプションがあります。

WordPress セルフテーブル機能vs。 TablePressテーブル

WordPressがバージョン5.0にアップデートされたとき Gutenberg(ブロックエディタ)が基本エディタとして搭載されました。 Gutenbergが初期に不安な側面がありましたが、今は多く安定しており、機能も絶えず向上しています。

Gutenbergにはテーブル(テーブル)ブロックが含まれているため、外部プラグインを使用せずに基本的なテーブルを簡単に挿入できます。

以前は、TablePressなどのプラグインを使用したり、HTMLタグで直接テーブルを追加したりできました。 TablePressは、フィルタ機能と検索機能、画像挿入、高度なエディタなどの追加機能を提供します。

シンプルなテーブルを挿入したい場合は、あえてTablePressプラグインの代わりにブロックエディタのテーブル機能を使用しても十分です。

参考までに、ブロックエディタのテーブルに画像を追加したい場合は、HTMLコードで画像を挿入できます。

例:

<img src="https://example.com/wp-content/uploads/2022/06/image-300x195.png" alt="" width="300" height="195" class="alignnone size-medium wp-image-48">

最後に、

以上で WordPressにテーブル(テーブル)を追加するときに、モバイルデバイスでテーブルが本文の領域から外れている場合にテーブルの下部に水平スクロールバーを表示する方法について説明しました。 スマートフォンなどで表が本文から外れてぎこちなく表示される場合は、上記の内容を参考に対応できます。

参照


2のコメント

コメント