jQuery入門講座：カスタムスクロールバー(おまけ)

カスタムスクロールバー（おまけ）

cssを書き換えてデザインを変更

jQueryではないのですが、付属のcssを変更してデザインを変えることに挑戦してみました。ドラッグバーを丸くしたサンプルとスクロールボタンを変更したサンプルの２つを紹介します。

解説

丸いドラッガー

まずはカスタムスクロールが、どの様なcss構成になっているかを確認します。下図は本家サイトの「Styling the scrollbars」の項目にある画像をお借りしたものです。
これを基にプラグインに添付されている「jquery.mCustomScrollbar.css」を変更します。

ではドラッグする部分（ドラッガー）を丸くしたサンプルを説明します。サンプル（scroll4/01.html）を開いてbody内の構成に変更がないことを確認して下さい。続いてjQueryを確認してください。以下の様にオプションのobjectオブジェクトにautoDraggerLengthプロパティが作成され、falseが設定されています。この設定を行うとコンテンツの長さにかかわらずドラッガーの長さが一定になります。

var csObj = new Object();
csObj.autoDraggerLength = false;

htmlファイル内の説明はこれだけです。残りの変更はcssファイルを修正します。ドラッガーに関連するのは「.mCSB_dragger」と「.mCSB_dragger_bar」なのですが、cssファイルは文章量が多いので探すのが大変です。検索を上手く利用してください。

cssの比較: オリジナルのcssファイル
サンプルscroll4/01.htmlで利用したcssファイル

最初に検索するのは「mCSB_dragger_bar」で、検索すると以下の部分が見つかると思います。ここで着目するのはwidthとheightです。この値を両方とも15pxに変更します。この部分には角丸の設定がされているので、15pxの大きさであれば丸く表示されるようになります。

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:4px;
	height:100%;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	text-align:center;

上記のcss設定のすぐ上に以下の様な「.mCSB_dragger」の設定があります。この値も同じ設定にします。

.mCSB_scrollTools .mCSB_dragger{
	cursor:pointer;
	width:100%;
	height:30px;
}

引き続き「mCSB_dragger_bar」を検索すると横向き（horizontal）の設定が見つかりますが、今回は利用しないのでスルーします。続いて見つかるのが以下の様な色指定の部分です。色指定の部分は以下の記述に続いてhoverの設定と、ドラッグ中の設定があります。この3種類の設定を変更しなければなりません。

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:#fff; /* rgba fallback */
	background:rgba(255,255,255,0.75);
	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}

サンプルでは「デフォルトの状態が薄緑」「マウスオーバーでオレンジ」「ドラッグ中は白」と設定しました。しかし、これ以外のタイミングで色が変わるのに気付くと思います。このプラグインではコンテンツやスクロールバーなどにマウスオーバーした時にも色が変わります。これはcssで以下の様に設定されているため、通常の状態では透明度が0.75、コンテンツなどにマウスオーバーすると透明度が1に変更されるためです。

.mCustomScrollBox>.mCSB_scrollTools{
	opacity:0.75;
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
	opacity:1;
}

この設定が嫌な場合は0.75を1に変更して下さい。これで丸いドラッガーの説明は終わりです。

スクロールボタンの変更

続いてスクロールボタンの画像を変更したいと思います。利用する画像はbutton.pngで左図のような画像になっています。このプラグインではボタンの幅は16pxなのですが、マージンを4pxとっているので少し変則的な配置となっています。サンプル（scroll4/02.html）を開いて下さい
そのかわりマージンを設定しなくてもスクロールバーから4pxのマージンができます。

cssの比較: オリジナルのcssファイル
サンプルscroll4/02.htmlで利用したcssファイル

ここでも検索を利用していきます。まずは「mCSB_buttons.png」で検索して画像を設定している以下の部分を探します。変更点は画像の変更と透明度の設定の削除です。

.mCSB_scrollTools .mCSB_buttonRight{
	background-image:url(mCSB_buttons.png);
	background-repeat:no-repeat;
	opacity:0.4;
	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)";
}

以下の様にとてもシンプルな記述になります。

.mCSB_scrollTools .mCSB_buttonRight{
	background-image:url(button.png);
	background-repeat:no-repeat;
}

続けてマウスオーバーした時やクリック時の設定を変更します。記述場所は画像を設定しているすぐ後にありますが、これは全体的に変更しなければなりません。修正するよりも新しく作成した方が速いので以下の様に設定しました。画像の表示位置を変更しているだけです。

.mCSB_scrollTools .mCSB_buttonUp{
	background-position:0 0;
}
.mCSB_scrollTools .mCSB_buttonUp:hover{
	background-position:0 -20px;
}
.mCSB_scrollTools .mCSB_buttonUp:active{
	background-position:0 -40px;
}
.mCSB_scrollTools .mCSB_buttonDown{
	background-position:-20px 0;
}
.mCSB_scrollTools .mCSB_buttonDown:hover{
	background-position:-20px -20px;
}
.mCSB_scrollTools .mCSB_buttonDown:active{
	background-position:-20px -40px;
}

そしてサンプル（scroll4/01.html）と同じようにコンテンツにマウスオーバーした際の透明度の変更をやめます。以下の様に透明度の設定を両方とも1にします（デフォルトが1なので、削除してもOKです）。

.mCustomScrollBox>.mCSB_scrollTools{
	opacity:1;
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
	opacity:1;
}

cssの量が多いので最初は手間取ると思いましたが、検索を利用することで意外と手間は掛かりませんでした。これでカスタムスクロールに関する説明は終わりです。次章ではスライドショーの定番？プラグインである「nivo slider」について説明します。

次のページ：アニメの一時停止/再開