SWELLのリッチカラムやテーブルのスクロール表示は、「」という表示が標準機能で搭載されています。
スクロールできる要素は、スマホの表示で重要になります。
縦長になりそうな要素を横スクロールにすることで、長さを減らしてUX改善も見込めます。
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/スクリーンショット-2023-11-29-22.30.13.png)
しかしscroll-hint.jsのJSライブラリの方がよりスクロールできるという表示がわかりやすいので、こちらを好む人もいます。
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/スクリーンショット-2023-11-29-22.32.39-812x240.png)
本記事では、scroll-hint.jsのJSライブラリを導入するカスタマイズを紹介いたします。
目次
サンプル
最初にカスタマイズした後のサンプルを表示します。
テーブルの横スクロール
食べ物 | 原産地 |
---|---|
りんご | 青森産 |
パイナップル | フィリピン産 |
リッチカラムの横スクロール
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_01.jpg)
ここに説明を入れる
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_02.jpg)
ここに説明を入れる
![](https://motoki-design.co.jp/wordpress/wp-content/uploads/gallery_03.jpg)
ここに説明を入れる
SWELLでscroll-hint.jsを表示するカスタマイズ
カスタマイズ方法は簡単です、外観>テーマエディタ>functions.phpに下記のコードを挿入しましょう。
もしエラーが怖い場合はCode Snippetsのプラグインを入れて、そこにコードを入れると安全です。