wordpress

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

投稿日:

カスタムスクロールバー

 

WordPressでスクロールバーをカスタマイズ

別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、

実は、あるサイトを作っていて変えたくなったんです。

それは、画面全体を見ているときに右側に出ている縦スクロールバーではなく、(たまに下にも横スクロールがあるけど)

ページのコンテンツ部分にスクロールして見てもらう部分を作りたかったんです。

スクロールバー

 

あくまでもスクロールバーを説明したかったのでデザインや中身のテキストは無視してください 🙂

スクロールバーをカスタマイズするJSは色々ありますが、ブラウザによって対応していないものもあり、結局これが一番よかったのでご紹介します。

導入方法

jQuery custom content scrollerのサイトから必要なファイルをダウンロードします。

こちらからもダウンロード先に行けます。

Project on GitHub

最低限必要なファイルは、

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ファイルに書き込めばヘッダー内に反映されます。

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
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

プレビュー

WordPressのプレビューで変更されていない時にチェックすること

WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

きれいに拡大したい

小さい画像をきれいに拡大する

  小さい画像(写真)をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』   普通に拡大してしまうと、どうしても画像が …