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

  WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …

360カメラ

できた!360度カメラの画像をWordPressに

  プラグインで簡単に!   360度カメラで撮影した画像をWordPress(ワードプレス)の固定ページや投稿ページまたは、カスタム投稿タイプなどに使いたいときに便利なのが、 『 …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

選手一覧メンバー一覧

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

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

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …