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 テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた③

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

画像の下に隙間

背景画像の下に隙間ができる【WordPress】

HOME PAGE1 PAGE2 PAGE3     何が原因なのか?   HTMLでは、下記の様にしています。 <div class="haikei&q …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …