WordPressで簡単にtableが使える「TablePress」の慣性スクロール用CSS

小説家のためのブログ運営WordPress

TEXT FIELDに掲載されている「小説を応募できるコンテスト・公募一覧」というページがあります。これはクラシックエディタを使っていた際にWordPressのTableを使って作っていたものなのですが、WordPress5.0以降、編集が非常にやりにくくなってしまっていました（基本的にコードで打っていたのですが、5.0以降のコードエディタが使いにくい）。

ブロックエディタの「テーブルブロック」を使って作ろうとしていたのですが、こちらもやはりコードの扱いが難しく断念。そこでTableの管理が簡単そうなプラグイン「TablePress」を使うことにしました。
※テーブルブロックについてはこちらの記事をご覧下さい。TablePress自体の使い方は、それほど難しくもないので今回は割愛します。そのうちやるかもしれません。

スポンサーリンク

TablePressで作った表がスマホでスムーズにスクロールしない

TablePressでテーブルを作ること自体はそれほど難しくはありません。また、TablePressで作ったテーブルをレスポンシブ対応させることも、そこまで難しくもありません。

で、実際に作ってみたのですが、これのスマホ版で横スクロールさせたときの挙動に問題がありました。

スマホでウェブサイトを見るときなど、指でポンと弾くと画面がスムースにスクロールしていくじゃないですか。これを慣性スクロールと言うらしんですよね。

縦にスクロールするときは、キレイにスクロールします。しかし、横にはみ出た部分は「指で動かした分だけしか動かない」という挙動になってしまいました。

実用上は問題ないのですが、やはりスルスルっとスクロールして欲しい所。

この慣性スクロールをさせるには、CSSに以下のコードを記述すればOKなんですよね。

-webkit-overflow-scrolling: touch;

詳細は割愛しますが、要は「はみ出した部分のスクロールをtouchデバイスに特化した形にすること」という意味です。

元のテーブルもこのCSSを記述していたんですが、TablePressで記述するにはどうしたらいいのかがさっぱり分かりません。

TablePress自体にもCSSを記述する箇所はあるのですが、ここに入れても慣性スクロールしない。CSS（小テーマのstyle.css）に記述しても上手くいかない。

色々やってみて、ようやく解決しましたのでその方法を書いておきます。

TablePressで作ったテーブルで慣性スクロールさせるCSS

まず記述する場所ですが、小テーマの「スタイルシート（style.css）」になります。

そこに

.tablepress-scroll-wrapper {
	-webkit-overflow-scrolling: touch;
}

こう記述することで、慣性スロールするようになります。このクラス（.tablepress-scroll-wrapper）を指定してやることが大切だったのかな？

ちなみにテーブルが横に長い場合、それをスクロールさせるには、同じようにスタイルシートに

.tablepress td,
.tablepress th {
	overflow-x: auto;
	white-space: nowrap;
	font-size: 12px;
}

という記述を加えた上で、TablePressを挿入するコードを

[table id=** responsive=scroll /]

というようにします（**部分はID番号）。あ、「TablePress Extension: Responsive Tables」というプラグインも一緒に入れて有効化させる必要はありますので、お忘れなく。

「overflow-x: auto;」は、横にはみ出る場合どうするのかを記述しています。

「white-space: nowrap;」は、文字列を勝手に折り返さない指定です。Tableをはみ出させないために、文字列が折り返され見えにくくなるのを防いでいます。

「font-size: 12px;」は、ただのフォントサイズ（文字の大きさ）なので、お好きな数字に変えて下さい。

手順まとめ

少し手順がバラバラになったので、TablePress導入からの流れをまとめておきます。

  1. プラグイン「TablePress」をインストール・有効化
  2. プラグイン「TablePress Extension: Responsive Tables」をインストール・有効化
  3. 小テーマのスタイルシート（style.css）に、下記のコードをコピペする
  4. TablePress挿入コードを[table id=** responsive=scroll /]に変更

これでOKです。

スタイルシートに記述するCSSは

/* TablePress横スクロール用CSS*/

.tablepress td,
.tablepress th {
	overflow-x: auto;
	white-space: nowrap;
	font-size: 12px;
}
.tablepress-scroll-wrapper {
	-webkit-overflow-scrolling: touch;
}

こちらになります（上記に書いたものをまとめたもの）。

まとめ

今回、これに関して色々調べてみたのですが、あまり情報はありませんでした。もしかして、普通はTablePressを導入し、レスポンシブ対応しただけで慣性スクロールが働くものなのでしょうか？

もし私のように上手くいかないことで困っている方がいらっしゃいましたら、一度お試し下さい。

一応念のため書いておきますが、スタイルシートなどをいじる際には、元のものをバックアップしてからにしましょう。また、独自にCSSを付け足す場合はコメントアウト（/*コメント*/）で「何のCSSなのか」を書いておく方が、後々分かりやすくて便利です（いや、本当にね）。

蛇足ではありますが、今回の解決に至った経緯としては、（後から考えると）とても簡単で、TablePressを挿入した記事のソースを見たんですよ。

そしたらですね、コードにクラスが指定されているのが分かって、それをCSSで指定してみたら上手くいったというわけです。

テーマによってはCSSのクラス名などが違うこともあったりして、上手く当てられないときがあるのですが、こういう方法が一番簡単そうですね（それほど詳しい人間じゃないので「そう」としか言えないのですが）。

□　◇　□　◇　□　◇　□　◇　□　◇　□　◇　□　◇　□　◇　□　◇　□　◇　□
今日も最後までお読み頂きありがとうございました！

小説執筆関連の記事は　　　→「小説講座」
小説の投稿関連の記事は　　→「小説投稿記」
ブログ関連の記事は　　　　→「小説家のためのブログ運営」
読んだ本のレビューは　　　→「読んでレビュー」
デジタルガジェット関連は　→「デジタルもの」

に、ありますのでぜひ合わせてお読み下さいね！

小説家のためのブログ運営WordPress

Posted by しろもじ