TablePressで作成したテーブルをスマホで横スクロールする方法

1. 

   サンダー

   表作成プラグインのTablePressで作成した横長のテーブルがスマホで表示されずに困った事ありませんか？

あります！テーブルの途中までしか表示されずに困っています。

かみなりん

サンダー

そのような横長テーブルでも、スマホなどで読めるように横スクロールさせる方法を説明します。

今回はTablePressの使用方法を既に存知の方に向けて説明します。

TablePressで作成したテーブルを横スクロールさせる方法(AFFINGER5をご利用の方）

私はWordPressテーマのAFFINGER5を利用しているので、まずはAFFINGER5で横スクロールさせる方法から説明します。

【スタイル▼】→【テーブル】→【横スクロール】からスクロールBOX作成
その中にTablePressショートコード挿入

【スタイル▼】→【テーブル】→【横スクロール】からをクリックします。

そうすると、ビジュアルエディタ画面では、薄い点線で囲われた中、テキストエディタでは、<div class="scroll-box"></div>というタグの中に、TablePressで作成したショートコードを挿入します。

●●●部分にはTablePressで作成したときのテーブルIDを記入します。

<div class="scroll-box">
[table “” not found /]


</div>

もしくは、TablePressで作成したテーブルを編集画面から簡単に挿入出来るメニューも用意されています。

【TablePressからテーブル挿入ボタンからショートコードを挿入する】

【テキストエディタへの切り替え】

これで終わりです！AFFINGER5簡単ですね！

TablePressで作成したテーブルを横スクロールさせる方法(AFFINGER5以外の方)

AFFINGER5には横スクロールさせる方法があるので、他テーマでもあるかもしれません。

もし、横スクロールさせる方法がお使いのテーマにない場合、同様の機能を実現させる必要があります。

スクロールさせるためのdivを作成し、TablePressのショートコードを挿入する

スクロールさせるためのdivタグを用意し、その中にTablePressのショートコードを挿入します。

divタグでスクロールできるようにする方法はいくつかありますが、２つ紹介します。

１．divタグ内にsytle属性を適用する（非推奨）

「テキストエディタ」に切り替えます。

そして、テキストエディタの状態で下記のコードを記入します。

<div style="overflow: scroll; white-space: nowrap;">
[table “” not found /]


</div>

●●●部分にはTablePressでテーブルを作成した時のIDを記入します。

もしくは、編集画面に【TablePressからテーブルを挿入】ボタンから挿入する事も可能です。

【TablePressからテーブル挿入ボタンからショートコードを挿入する】

【実際の例がコチラ】

2.divタグにclass名を付け、CSSでそのclassにstyleを適用する（推奨）

WordPressの編集画面にてdivタグを作成し、そのdivタグのスタイルを別ファイルから変更するため、class名を指定します。

クラス名は「myScrollBox」としていますが、名前は何でも構いません。

【HTML(WordPressのテキストエディタ画面にて記述)】

<div class="myScrollBox">
[table “” not found /]


</div>

【CSS(style.cssなど別ファイルにて記述)】

div.myScrollBox {
  overflow: scroll;
  white-space: nowrap;
}

上記をそれぞれ記述します。

HTMLはWordPressの編集画面のテキストエディタ画面にて、CSSはstyle.cssなどご自身でカスタムしているCSS内に追記してください。

●●●部分にはTablePressでテーブルを作成した時のIDを記入します。

もしくは、編集画面に【TablePressからテーブルを挿入】ボタンから挿入する事も可能です。

【TablePressからテーブル挿入ボタンからショートコードを挿入する】

【実際の例がコチラ】

横スクロールされない場合は、テーブルの横幅を固定にする

divタグでスクロールするように設定しても、スクロール出来ない場合があります。

理由は、テーブルの横幅が設定されておらず、モニター（ブラウザ）の横幅が小さくなるのに比例して、テーブルの横幅も狭くなってしまうためです。

そのため、テーブルの横幅を固定値として設定する必要があります。

このとき、全てのテーブルの横幅を設定するか、個別に設定するかで記述するCSSが異なります。

TablePressで作成した全てのテーブルの横幅を設定する場合

全てのテーブルの横幅を設定する場合、下記のCSSを記載します。

TablePressの「プラグインのオプション」からCSSが変更できるので、そちらで変更します。

【TablePressで作成した全てのテーブルの横幅を設定する場合】

.tablepress{
   width: ●●●px;
}

width: ●●●px;

の●●●部分には指定したい横幅の値を記入します。

これはお使いのテーマによって適切な横幅が異なるので、640px～720px辺りで丁度良い数値を見つけてください。

TablePressで作成したテーブルのうち、IDを指定して横幅を設定する場合

TablePressで作成したテーブルの中から、IDを指定して横幅を設定する場合は下記のように記載します。

TablePressの「プラグインのオプション」からCSSが変更できるので、そちらで変更します。

.tablepress-id-▲▲▲{
   width: ●●●px;
}

.tablepress-id-▲▲▲

の▲▲▲部分には、TablePressで作成したときのIDを入力します。

【例】IDが1のときは、「.tablepress-id-1」となります。

width: ●●●px;

の●●●部分には指定したい横幅の値を記入します。

これはお使いのテーマによって適切な横幅が異なるので、640px～720px辺りで丁度良い数値を見つけてください。

これで横スクロール出来るようになるはずです。

横スクロールできずに悩まれている方はぜひお試しください。