ブログ運営

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

  1. サンダー
    表作成プラグインのTablePressで作成した横長のテーブルがスマホで表示されずに困った事ありませんか?
あります!テーブルの途中までしか表示されずに困っています。
かみなりん
サンダー
そのような横長テーブルでも、スマホなどで読めるように横スクロールさせる方法を説明します。

今回は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からテーブル挿入ボタンからショートコードを挿入する】

TablePressからテーブルを挿入

 

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

テキストモードに変更

 

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

 

head1head2head3head4head5head6head7head8head9headA
td11td12td13td14td15td16td17td18td19td1A
td21td22td23td24td25td26td27td28td29td2A

 

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

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

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

 

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

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

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

 

スクロールさせるための方法(どちらか一方)

  1. divタグ内にstyle属性を適用する(非推奨)
  2. divタグにclass名を付け、CSSでそのclassにstyleを適用する(推奨)

 

1.divタグ内にsytle属性を適用する(非推奨)

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

テキストモードに変更テキストエディタ

 

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

 

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

 

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

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

 

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

TablePressからテーブルを挿入

 

 

【実際の例がコチラ】

データヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダ
データ11データ12データ13データ14データ15データ16データ17データ18データ19データ1A
データ21データ22データ23データ24データ25データ26データ27データ28データ29データ2A

 

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からテーブル挿入ボタンからショートコードを挿入する】

TablePressからテーブルを挿入

 

【実際の例がコチラ】

データヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダデータヘッダ
データ11データ12データ13データ14データ15データ16データ17データ18データ19データ1A
データ21データ22データ23データ24データ25データ26データ27データ28データ29データ2A

 

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

モニターサイズに 合わせてテーブルも狭くなる

 

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

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

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

 

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

 

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

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

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

 

TablePressプラグインオプション

 

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

.tablepress{
   width: ●●●px;
}

 

width: ●●●px;

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

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

 

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

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

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

 

TablePressプラグインオプション

 

 

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

 

.tablepress-id-▲▲▲

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

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

 

width: ●●●px;

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

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

 


 

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

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







人気の記事

1

サンダー直流(DC)と交流(AC)の違いって分かりますか? かみなりん家庭用のコンセントは交流(AC)だよね。乾電池はなんとなくDC(直流)というイメージです。 サンダー改めて聞かれると、交流と直流の ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

かみなりんオペアンプの反転増幅回路ってどういう特徴があるの? サンダー反転増幅回路は文字通り、入力電圧の符号を反転、増幅する回路になります。 かみなりん反転して、増幅するから反転増幅回路なんだね。じゃ ...

アノードコモンとカソードコモン 3

サンダー「アノードコモン」と「カソードコモン」の違い分かりますか? かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ? サンダー改めて聞かれると、どっちがどうだ ...

4

かみなりんアフィリエイトで成果が発生しない!? という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget= ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

サンダーバリューコマースから2019年6月5日に『MyLinkBox』がリリースされました! かみなりんその『MyLinkBox』ってなに? サンダー『カエレバ』や『Rinker』はご存知でしょうか? ...

miMind使いかたアイキャッチ 6

サンダーマインドマップはご存知ですか?   放射状に枝が伸びていくアレですよね?   頭の整理をするのに良く使います   私もよく情報を整理するためにマインドマップを作成 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

サンダー世界最大級のオンライン学習プラットフォームの【Udemy】はご存知ですか? アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPyth ...

ブレッドボード の使い方のアイキャッチ 8

サンダーブレッドボードって知ってる? かみなりん電子工作でハンダ付けせずに、手軽に電子回路が組めるボードだよね? サンダーそう、今回はそのブレッドボードの使い方を紹介します。ブレッドボードを使ってLE ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き数字有り箇条書 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-, , , ,