カルーセルとnivo(4)カスタムスクロールバー(おまけ)cssを書き換えてデザインを変更jQueryではないのですが、付属のcssを変更してデザインを変えることに挑戦してみました。ドラッグバーを丸くしたサンプルとスクロールボタンを変更したサンプルの2つを紹介します。丸いドラッガーまずはカスタムスクロールが、どの様なcss構成になっているかを確認します。scrollbars」の項目にある画像をお借りしたものです。これを基にプラグインに添付されている「jquery.mCustomScrollbar.css」を変更します。ドラッグする部分(ドラッガー)を丸くしたサンプルを説明します。サンプル(scroll4/01.html)を開いてbody内の構成に変更がないことを確認して下さい。続いてjQueryを確認してください。以下の様にオプションのobjectオブジェクトにautoDraggerLengthプロパティが作成され、falseが設定されています。この設定を行うとコンテンツの長さにかかわらずドラッガーの長さが一定になります。false;htmlファイル内の説明はこれだけです。残りの変更はcssファイルを修正します。ドラッガーに関連するのは「.mCSB_dragger」と「.mCSB_dragger_bar」なのですが、cssファイルは文章量が多いので探すのが大変です。検索を上手く利用してください。cssの比較オリジナルのcssファイルサンプルscroll4/01.htmlで利用したcssファイル最初に検索するのは「mCSB_dragger_bar」で、検索すると以下の部分が見つかると思います。ここで着目するのはwidthとheightです。この値を両方とも15pxに変更します。この部分には角丸の設定がされているので、15pxの大きさであれば丸く表示されるようになります。.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_dragger{cursor:pointer;width:100%;height:30px;}引き続き「mCSB_dragger_bar」を検索すると横向き(horizontal)の設定が見つかりますが、今回は利用しないのでスルーします。続いて見つかるのが以下の様な色指定の部分です。色指定の部分は以下の記述に続いてhoverの設定と、ドラッグ中の設定があります。この3種類の設定を変更しなければなりません。*/}サンプルでは「デフォルトの状態が薄緑」「マウスオーバーでオレンジ」「ドラッグ中は白」と設定しました。これ以外のタイミングで色が変わるのに気付くと思います。このプラグインではコンテンツやスクロールバーなどにマウスオーバーした時にも色が変わります。これは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」で検索して画像を設定している以下の部分を探します。変更点は画像の変更と透明度の設定の削除です。-ms-filter:"alpha(opacity=40)";}以下の様にとてもシンプルな記述になります。.mCSB_buttonRight{background-image:url(button.png);background-repeat:no-repeat;}続けてマウスオーバーした時やクリック時の設定を変更します。記述場所は画像を設定しているすぐ後にありますが、これは全体的に変更しなければなりません。修正するよりも新しく作成した方が速いので以下の様に設定しました。画像の表示位置を変更しているだけです。-40px;}そしてサンプル(scroll4/01.html)と同じようにコンテンツにマウスオーバーした際の透明度の変更をやめます。以下の様に透明度の設定を両方とも1にします(デフォルトが1なので、削除してもOKです)。.mCustomScrollBox>.mCSB_scrollTools{opacity:1;}.mCustomScrollBox:hover>.mCSB_scrollTools{opacity:1;}cssの量が多いので最初は手間取ると思いましたが、検索を利用することで意外と手間は掛かりませんでした。これでカスタムスクロールに関する説明は終わりです。slider」について説明します。