スマホ表示で横スクロールするかっこいいテーブルをFlexible Table Blockで簡単に作成する方法

Flexible Table Blockは自由自在にかっこいいテーブルを作ることができるワードプレスのプラグインです。

その便利な機能につきましては「自由自在にかっこいいテーブルがつくれるWPプラグイン「Flexible Table Block」便利な機能を8個解説」という記事の中でご説明させていただいております。

通常、横幅の広いテーブルを作成すると、スマホ表示では窮屈なテーブルになってしまうか、横幅を固定してもページ自体の表示が崩れてしまいます。

そんな時に、テーブルに横スクロールする機能を付けたい!と感じている方は非常に多いのではないでしょうか?

しかし、テーブルに横スクロール機能を付けるにはHTMLやCSSの知識が必要なので簡単に作成することは出来ません。

そんな悩みをお持ちの方に、この記事では、 Flexible Table Block の便利な機能の中でも、私が一番気に入っているテーブルに驚くほど簡単に横スクロール機能をつけるという部分について詳しく解説させていただきます。

この記事は、以下のような方に参考になります。

  • スマホ表示でも表示が崩れないかっこいいテーブル(表)が作りたい
  • スマホ表示で横長のテーブルに横スクロールする機能をつけたい
  • HTML・CSSの知識はないがテーブルに横スクロール機能をつけたい

Flexible Table Block でテーブルに横スクロール機能を付ける手順

Flexible Table Block を導入して、テーブルに横スクロール機能をつける手順を順に解説していきます。

手順01.テーブルの幅を決めて固定する

まず初めにテーブルに横幅を指定して横幅を固定する必要がありますので、作成したテーブルがスマホでもキレイに表示される横幅を指定して横幅を固定しましょう。

Flexible Table Block のテーブルの全幅はデフォルトでは画面の幅に対して100%になっています。つまり画面の幅が広くなればテーブルも広くなるし、逆に画面の幅が狭くなればテーブルも狭くなります。

テーブルの横幅の設定・固定方法が分からない場合は、 「自由自在にかっこいいテーブルがつくれるWPプラグイン「Flexible Table Block」便利な機能を8個解説」 の中で解説していますので参考にしてください。

手順02.テーブルに横スクロール機能をつける

それではテーブルに横スクロール機能をつけます。驚くほど簡単なので安心してください。

手順01でテーブルの横幅を決めて固定しました。

そのテーブルを選択して「テーブル設定」を選択してください。

テーブル設定メニューの中に「デスクトップでスクロールする」「モバイル表示でスクロールする」というメニューがあります。

Flexible Table Blockでテーブルにスクロール機能をつける

「デスクトップでスクロールする」「モバイル表示でスクロールする」 を両方ONにしましょう。

Flexible Table Block でテーブルにスクロール機能をつける手順

たったこれだけで、テーブルにスクロール機能をつけることができました。本当に簡単ですよね!

ちなみに、なぜ「デスクトップ表示でスクロールする」にもチェックを入れたのか?という点についてですが、上の画像でお分かりいただけると思いますが、 Flexible Table Block はデフォルトの状態でブレークポイントが768pxに設定されています。

もし、「モバイル表示でスクロールする」だけにチェックを入れた場合、画面幅が768pxを超えた場合、テーブルがスクロールしなくなり表示が崩れてしまします。

テーブルの横幅が768pxを超えない場合は問題ないのですが横幅の広いテーブルに場合は注意しましょう。

手順03.スマホでの表示を確認する

手順01と手順02でテーブルに横スクロール機能をつけることができましたが、必ずスマホでの表示確認をしてください。

表示を確認してテキストに対してセルの余白が多いなど、問題がありましたらセルの幅を変更したりテーブル全体の幅を変更したり調整しましょう。

Flexible Table Block ブレークポイントの変更方法

前項でブレークポイントの話が出たので、 Flexible Table Block でのレスポンシブブレークポイントの変更方法についても補足として解説しておきます。

ブレークポイントは右サイドメニューのグローバル設定から変更します。

Flexible Table Blockグローバル設定

グローバル設定を開くとブレークポイントの変更メニューがあります。

ブレークポイントの変更が必要な方は、グローバル設定⇒レスポンシブブレークポイントで変更してください。

 

まとめ

Flexible Table Blockで横長テーブルにスクロール機能をつける方法と、それに付随して必要になるレスポンシブブレークポイントの変更方法をご説明させていただきましたが、いかがだったでしょうか?

Flexible Table Block の使いかたが非常に簡単で便利なプラグインであることがお分かりいただけたのではないでしょうか?

尾道WEBサービスでは、ワードプレスやワードプレスのプラグインに関する様々な役立つ情報を発信していますので、興味のある方はご覧になってください。