WordPressでScroll Hintを導入する方法

WordPressのホームページ制作案件で、「テーブルが横長なので、スクロールできることを利用者がわかりやすくしてほしい」という要望がありました。

今回はScrollHintを使って、要望を実装しました。

Scroll Hintのサンプル

こちらがPCで見た時のScroll Hintの挙動です。

このように、Scroll Hintはユーザーに対して「スクロールできますよ」と訴求できるため、横長のテーブルを使いたい場合に特に重宝するライブラリです。

Scroll Hintの導入方法

「テーブル1つずつに適用させないといけないのかな」と思われるかもしれませんがそんなことはありません。

この方法で実装すれば投稿済み記事のテーブルも横スクロールが適用されます。

Scroll Hintをダウンロードする(外部参照する場合はスキップ可)

Scroll Hintを導入するには、ライブラリ本体をダウンロードします。

公式サイトのDownloadボタンを押下すると、scroll-hint-master.zipファイルがダウンロードされます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

Scroll Hintは上記の通り、CDN方式でも使うことが出来ます。

ですが下記のデメリットがあるため、今回はダウンロードしてサイトにアップロードすることを推奨します。

  • このCDN経由で取り込めなくなることがあるかもしれない
  • ライブラリがバージョンアップして使えなくなるかもしれない

scroll-hint-master.zipファイルを解凍したら、テーマフォルダにlibフォルダ(libraryの略です)を作ります。

scroll-hintフォルダをlibフォルダに突っ込みましょう。

ドメイン名 > public_html > サイト名 > wp-content > themes > テーマ名 > lib >※ ココ ※

WordPressの場合は、テーマのfunctions.phpにてScroll Hintを読み込む

WordPressの場合はテーマのfunctions.phpに下記のコードを追加します。

// Scroll-Hint追加
function scroll_hint_scripts() {
	// Scroll Hintのcss読み込み	
	wp_enqueue_style('scroll-hint.css', get_stylesheet_directory_uri() . '/lib/scrollhint/css/scroll-hint.css');
	// Scroll Hintのjs読み込み
      wp_enqueue_script('scroll-hint.js', get_stylesheet_directory_uri() . '/lib/scrollhint/js/scroll-hint.min.js', [], "1.0.0", true);
}

add_action( 'wp_enqueue_scripts', 'scroll_hint_scripts' );

このコードはテーマフォルダのlibフォルダ内に解凍したScroll Hintを入れている場合に有効です。
CDN経由での取り込みには対応していません。

javascriptにてScroll Hintを呼び出す

続いてjavascriptを読み込みます。

jQuery(document).ready(function( $ ){
    // 記事本文内のtableタグ全てをスクロール出来るdivで囲む
$("#body table").wrap('<div class="js-scrollable"></div>');
  
  new ScrollHint('.js-scrollable', {
    suggestiveShadow: true,
    i18n: {
      scrollable: 'スクロールできます'
    }
  });
});

#bodyの部分はテーマによって変わるので適宜、適切なidに置き換えて下さい

これでホームページにある#body下のtableタグを .js-scrollable クラスのついたdivタグで囲むことができました。

また、横スクロール化させるようにScrollHintを呼び出すこともできました。

この時オプションで
suggestiveShadow: true
をセットしておくと、スクロールアイコンの背景に影を表現してくれます。

そのためスクロール出来ることをもっと強調することができます。

また、
i18n: { scrollable: 'スクロールできます' }
このコーディングによって日本語によるアイコン表示をしてくれます。

CSSにて表示を整える

/* テーブル関連のスタイル */
.js-scrollable{
  white-space: nowrap;  /* 文字の折り返しをなくす */
  max-height: 500px;
}

CSSにてテーブル内の文字列は折り返しを無しにしてあげる必要があります。

これがないと文字が収まってしまい、横スクロールになりません

CSSの追加はカスタマイズ⇨追加CSSでもいいですし、子テーマのstyle.cssでも構いません。

まとめ:Scroll Hintはユーザーに優しくテーブルを表示してくれる

テーブル表示はユーザーにとってすごくわかりやすく情報を伝えられて便利な反面、表示が崩れると見づらくて情報がインプットされにくくなってしまいます。

特にスマートフォンでは表示が崩れることもあり、「変なテーブルだなぁ。見づらい」と離脱されてしまう可能性もあります。

ScrollHintを使えば横スクロール出来ることを分かりやすく伝えてくれます。

「スクロールできる安心感」をユーザーに与えてくれるのです。

是非お試し下さいね。