「テーブル」ブロックのスクロールヒントを変更する方法

はじめに
完成イメージ
実装手順
参考
さいごに

はじめに

以下の内容をスキンで実現します。

【SWELL】リッチカラムの「スクロールできます」のテキストをデバイスごとに変更するカスタマイズ｜かんた🌊SWELLマニア

WordPressテーマSWELLのリッチカラムブロックについてです。リッチカラムには、「横スクロールで表示する」というオプションがあります↓ リッチカラムブロック「横スクロール」このオプションを有効化すると、リッチカラムに「スクロール...

Cocoonのスキンでは、画面幅が834px以下になると、「テーブル」ブロックが自動的にスクロール可能になる仕様が設定されています。

この記事では、タッチデバイスの場合にヒントテキストを「スクロールできます→」から「スワイプできます→」に変更する方法を説明します。

完成イメージ

項目	Cocoon	Xwrite
エディター	ブロックエディター対応（ウィジェットは標準クラシック対応）	ブロックエディター完全対応
ブロック	オリジナルブロックが26種類。他所であまり見ないブロックも搭載。	カスタマイズ性の高いオリジナルブロックが20種類以上。リストやテーブルなどの標準ブロックの使い勝手も抜群。

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定をします。

Cocoon設定
設定大項目項目設定値
本文テーブル設定横幅の広いテーブルは横スクロールするオン

設定	大項目	項目	設定値
本文	テーブル設定	横幅の広いテーブルは横スクロールする	オン

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

@media (hover: none) {
  :root {
    --hvn-table: 'スワイプできます→' !important;
  }
}

参考

WordPressにはwp_is_mobile()という関数がありますが、この関数では iPadがモバイルとして扱われるため、意図しない動作が発生する場合があります。
Cocoonではis_mobile()という独自関数が実装されており、HTTP_USER_AGENTをもとにモバイル判定を行っています（現在は未使用）。

cocoon/lib/utils.php at 24a3bd0480a6d52b5d24784a6583b945c829eb83 · xserver-inc/cocoon

100％GPLの無料WordPressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - xserver-inc/cocoon

さいごに

今回紹介した方法を使えば、「テーブル」ブロックのスクロールヒントを自由に変更できます。
デバイスごとに適切な表示を設定することで、より使いやすいサイトを作成できます。
ただし、CSSによるデバイス判定はあくまで簡易的なものであり、環境によっては意図通りに動作しない場合がある点にご注意ください。