スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた
投稿日:
WordPressでスクロールバーをカスタマイズ
別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、
実は、あるサイトを作っていて変えたくなったんです。
それは、画面全体を見ているときに右側に出ている縦スクロールバーではなく、(たまに下にも横スクロールがあるけど)
ページのコンテンツ部分にスクロールして見てもらう部分を作りたかったんです。
あくまでもスクロールバーを説明したかったのでデザインや中身のテキストは無視してください 🙂
スクロールバーをカスタマイズするJSは色々ありますが、ブラウザによって対応していないものもあり、結局これが一番よかったのでご紹介します。
導入方法
jQuery custom content scrollerのサイトから必要なファイルをダウンロードします。
こちらからもダウンロード先に行けます。
最低限必要なファイルは、
jquery.mCustomScrollbar.concat.min.js
jquery.mCustomScrollbar.css
この2つです。
基本的な使い方
まずは、自分のテーマファイルに「jQuery」が入っていることが前提です。
通常は入っていると思いますが、もしなければ、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
を読み込んでください。
ダウンロードしたjQuery.mCustomScrollbarのjsファイルとcssファイルを読み込みます。
テーマファイルのヘッダー内に、
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
記述してください。
子テーマを作っている人は、子テーマにあるfunctions.phpファイルに書き込めばヘッダー内に反映されます。
次に、スクロールバーを追加するdivなどにmCustomScrollbar関数を呼び出します。
<script>
(function($){
$(window).on("load",function(){
$("#content_1").mCustomScrollbar();
});
})(jQuery);
</script>
スクロールバーを適用したいdivなどに、
cssでoverflow:auto; または、overflow:hidden;
heightまたは、max-heightの指定をしてください。(もちろんテキストなどがはみ出すようにしないと意味がありません)
これが基本的な使い方になります。
簡単なカスタマイズ
先ほどの基本的な使い方にテーマをプラスしてあげることで複雑な設定なしで、私みたいな初心者でもカスタマイズできます。
例えば、こちらにあるようなデモを参考にテーマを選んで使うことができます。
使い方は、
<script>
(function($){
$(window).on("load",function(){
$(".contents-sample").mCustomScrollbar({
theme:"rounded-dots-dark"
});
});
})(jQuery);
</script>
こんな感じで、theme:"rounded-dots-dark"
を付け加えます。
その他設定
かなり複雑といいますか豊富なオプションがあります。
時間がある方や自身のある方はお試しください。
jQuery custom content scrollerのサイトに細かな設定方法が書かれています。(英語なので翻訳が必要かな?)
関連記事
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …