INTEREST

スクロールバーの色や太さ等をカスタマイズ

 

2014.11.06

「jScrollPane」 スクロールバーをちょっとオシャレにしてみる♪

一定のスペース内で沢山の情報を表示したい場合等に、スクロールバーを表示して縦や横にスクロールする事で全ての情報を見れるようにする事がありますが、デフォルトのスクロールバーだとデザインが合わないって場合や、表示範囲が狭い場合はスクロールバーの太さ自体が結構邪魔だったりする事もあります...
今回まさにその問題にぶち当たったので「jScrollPane」と言うjQeryプラグインを導入してスクロールバーをカスタマイズしました♪


「jScrollPane」の使い方


  1. 1.デフォルトのスクロールバーと比較
  2. 2.必要なファイルをダウンロード
  3. 3.ファイルを読み込む為の記述
  4. 4.スクロールバーを表示する記述例
  5. 5.スクロールバーの色や太さを変更
  6. 6.オプションを使用する場合


1.デフォルトのスクロールバーと比較


まずは、デフォルトのスクロールバーと、今回カスタマイズしたスクロールバーを比較出来るように左右に並べてみました。（デフォルトのスクロールバーの見え方は、ブラウザによって若干異なります。）

▼ デフォルトのスクロールバー ▼
  • 【 メリット 】
  • 1.デフォルトなので簡単に表示出来る
  • 2.スクロールする部分と言うのがすぐ分かる
  • 3.動きがスムーズで滑らか（特にFirefox）

  • 【 デメリット 】
  • 1.ブラウザによって表示が若干異なる
  • 2.サイトやブログによってはデザインが合わない場合がある
  • 3.スクロールバー自体の大きさ(太さ)が邪魔になる場合がある

  • 【 おまけ 】
  • もちろんこの中に画像も入れれます♪
  • スクロールエリア内のサンプル画像
  • リンクも入れれます♪
  • このブログのトップページは こちら　
▼ カスタマイズしたスクロールバー ▼
  • 【 メリット 】
  • 1.CSSで自由にカスタマイズ出来る
  • 2.スクロールバーの大きさ(太さ)も変更可能
  • 3.色んなオプションも用意されてます
  • 4.オリジナルのスクロールバーで、ちょっとオシャレに見えるかも！？ｗ

  • 【 デメリット 】
  • 1.Qeryプラグインの設置・設定が必要なのでその分ちょっとだけ手間
  • 2.カスタマイズの内容次第では、スクロール部分と言うのが分かり難い場合がある
  • 3.Firefoxのデフォルトのスクロールバーの方がスムーズで滑らかに感じるｗ
    （これは閲覧者次第なのでアレですがｗ）

  • 【 おまけ 】
  • もちろんこの中に画像も入れれます♪
  • スクロールエリア内のサンプル画像
  • リンクも入れれます♪
  • このブログのトップページは こちら　


サンプルを兼ねて、それぞれのスクロールバーのメリット・デメリット等を書いてみました。

一概にどちらが良いって訳では無く、表示する箇所もしくは好みの問題？なので正直、私自身どっちにしようか結構悩んだのですが “オリジナル感” と “太さを変えれる” と言う点が決め手になり、今回シンプルなデザインで、角を丸くした細いスクロールバーにカスタマイズしてみました♪



2.必要なファイルをダウンロード


「jScrollPane」を使ってスクロールバーをカスタマイズするには、jQuery本体（今回Google AJAX APIを使用）と「jScrollPane」の 公式サイト から必要なファイルをいくつかダウンロードします。

【 必要なファイル 】
① jQuery本体 … ダウンロードの必要は無く、head要素に読み込む記述をするだけです。
② jquery.jscrollpane.min.js … 「jScrollPane」のJavaScriptファイル
③ jquery.mousewheel.js … マウスホイールによる操作に対応させるファイル
　 改行やスペースを省いてファイルを軽量化した「jquery.mousewheel.min.js」の最新バージョンは
　 こちら からダウンロードできます。(よく分からない場合は「jquery.mousewheel.js」でもOKです)
④ jquery.jscrollpane.css … 「jScrollPane」のCSSファイル（スタイルシート）

ダウンロードするのは②～④の３つのファイルなのですが「jScrollPane」の公式サイトは説明が英語でよく分からん... って場合は、上記ファイル名のリンク上で「右クリック」をして「名前を付けてリンク先を保存」で任意の場所にファイルを保存すればOKです。

▼こんな感じです♪（簡単にダウンロード出来るので、英語が読めなくても全然大丈夫 ）
ファイルのダウンロード


「jScrollPane」の公式サイトから「 GitHub 」のページに行くと様々なファイルをまとめてzip形式でダウンロードする事も出来ますが、必要なファイルを１つずつダウンロードする方が簡単だと思います。

一応「 GitHub 」のページからファイルを１つずつダウンロードする方法もご説明♪
まずは「jScrollPane」公式サイトのダウンロードにある「github」をクリックします。
githubをクリック

すると以下のような画面になります。
ここから必要なファイルを探しても良いのですが、念の為に最新のバージョンを確認してダウンロードをする場合は「 branch: master 」の部分をクリックし「Tags」を選択します。 GitHubの画面

「Tags」を選択すると、各バージョンが表示され現時点では「v2.0.20」が最新と言う事が分かります。
なので最新バージョンの「v2.0.20」の部分をクリックし、ここからファイルを探せば良いのですが、
例えば「jquery.jscrollpane.min.js」の場合、上から４つ目の「 script」をクリックし、その中の「jquery.jscrollpane.min.js」をクリックします。 最新バージョンを確認

すると以下のような画面になるので、「Raw」を右クリックし「名前を付けてリンク先を保存」で任意の場所にファイルを保存します。

※保存したファイルの名前が「jquery.jscrollpane.min.js.txt」となってたら、ファイルを右クリックし「名前の変更」で「.txt」の部分だけを削除します。
その際「拡張子を変更すると、ファイルが使えなくなる可能性があります。」とポップが表示されますが「OK」をクリックしてファイルのダウンロードは完了です。

「jquery.jscrollpane.min.js」のダウンロード

他２つのファイルに関しても、同じように１つずつダウンロードする事が出来ます。
「jquery.jscrollpane.css」は「 style」の中にあるので、上記と同じ手順でダウンロードし、
「jquery.mousewheel.min.js」は こちら からダウンロード出来ます。

長々と説明しましたが... 現時点では最初の【必要なファイル】にあるファイル名のリンクを「右クリック」して「名前を付けてリンク先を保存」で最新バージョンがダウンロード出来ます...ｗ

※「jquery.mousewheel.min.js」を使用する場合は、上記の方法でダウンロードして下さい。
（その場合「jquery.mousewheel.js」は必要ないです。）


他のスクリプト等でも「GitHub」からファイルをダウンロードして使う際の参考になればと言う事で...ｗ



3.ファイルを読み込む為の記述


上記の手順では無駄に説明が長くなってしまったので、難しく感じるかもですが、要は３つのファイルをそれぞれ右クリックしてファイルを保存すればOKなので簡単です♪

そしてダウンロードした３つのファイルをサーバーにアップロードしたら、以下のようにhead要素（<head> ～ </head>の間）に記述します。（FC2ブログではちょっとだけ手順が異なります。）

<link rel="stylesheet" type="text/css" href="○○○/jquery.jscrollpane.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="○○○/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="○○○/jquery.mousewheel.min.js"></script>

※2行目はjQuery本体で「Google AJAX API」を利用してます。（記述するだけでOK）
※ファイルの種類別等でディレクトリを分けてる場合は○○○の部分にディレクトリ名を入れて下さい。


3-1.FC2ブログでのhead要素への記述


　 FC2ブログの場合は、ファイル名に「.（ピリオド）」が入ってるとアップロードが出来ないので
「.（ピリオド）」の部分を「_（アンダーバー）」や「-（ハイフン）」に変更する必要があります。


以下では、それぞれ「jquery_jscrollpane_min.js」と「jquery_mousewheel_min.js」に変更したとして説明します。（「.js」の部分は拡張子なので変更しちゃダメです。）

また、CSSファイルについては外部ファイルで読み込むより「テンプレートの設定」から「スタイルシート編集」の末尾にでもソースを丸々貼り付けた方が何かと楽チンです。

なので「jquery.jscrollpane.css」をメモ帳などで開き、中身を全選択してコピーしたら「テンプレートの設定」から「スタイルシート編集」の末尾に貼り付けます。↓こんな感じになりますｗ
「スタイルシート編集」の末尾にコピペ

貼り付けたままの状態では余白などが気になるって場合は、自分で分かり易いように整理してもOKですし
それぞれにコメントを付けて、どの部分を指してるかを分かり易くすると良いと思います。
※「5.スクロールバーの色や太さを変更」の項目でコメントを付けたソースを貼ってます♪

以上を踏まえて、FC2ブログではhead要素（<head> ～ </head>の間）に以下のように記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/jquery_jscrollpane_min.js"></script>
<script type="text/javascript" src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/jquery_mousewheel_min.js"></script>

※1行目はjQuery本体で「Google AJAX API」を利用してます。（記述するだけでOK）

※src=の「http://～ 省略 ～/jquery_jscrollpane_min.js」の部分は、このブログの場合のURLなので、ここにはアップロードしたご自分のファイルのURLを記述します。



3-2.スクリプトを実行する為の記述


上記の記述をしたら、次はその下に以下のようにファイルを実行する為の記述をします。
（同じくhead要素（<head> ～ </head>の間）に記述）

$(function(){
　$('.scroll-area').jScrollPane();
});

※「.scroll-area」の部分は、カスタマイズしたスクロールバーを適用させる要素のクラス名を入る。
（クラス名は任意のものでOKなので、今回は「.scroll-area」としています。）


あとは実際にスクロールバーを表示したい箇所に、上記のクラス名を指定すればOKです♪



4.スクロールバーを表示する記述例


スクロールバーを表示するには、表示領域の縦や横の幅を指定して「overflowプロパティ」を使い、表示領域からはみ出た部分の表示の仕方を指定します。（縦幅は「height」、横幅は「width」で指定）

▼例えばこんな感じ♪（リスト表示で縦のスクロールを表示する場合）
<ul style="width:300px; height: 100px; overflow:auto;" class="scroll-area">
<li>1：ああああああああああああああああああ</li>
<li>2：ああああああああああああああああああ</li>
<li>3：ああああああああああああああああああ</li>
<li>4：ああああああああああああああああああ</li>
<li>5：ああああああああああああああああああ</li>
<li>6：ああああああああああああああああああ</li>
<li>7：ああああああああああああああああああ</li>
<li>8：ああああああああああああああああああ</li>
<li>9：ああああああああああああああああああ</li>
</ul>

※分かり易いようにstyleの部分もHTMLに記述してますが、スタイルシートに分けて記述してもOKです。


※「overflow:auto;」だとブラウザが自動的に判断してスクロールバーを表示してくれます。
「overflow:scroll;」とすると、縦横のスクロールバーが常時表示されます。


※今回の場合「class="scroll-area"」を付けるとカスタマイズしたスクロールバーが表示されます。
逆に「class="scroll-area"」を付けない場合はデフォルトのスクロールバーが表示されます。


※上記はシンプルにスクロールバーの表示だけを行う記述なので、余白を調節したり、背景や枠線を付けたい場合は、お好みでスタイルシートで装飾して下さいｗ


このブログでは、上記のソースを貼り付けると以下のような表示になります。
※スタイルシートの設定次第で、リストの左にスペースが出来る場合があります。
（左側はデフォルトのスクロールバー、右側はカスタマイズしたスクロールバー）

  • 1：ああああああああああああああああああ
  • 2：ああああああああああああああああああ
  • 3：ああああああああああああああああああ
  • 4：ああああああああああああああああああ
  • 5：ああああああああああああああああああ
  • 6：ああああああああああああああああああ
  • 7：ああああああああああああああああああ
  • 8：ああああああああああああああああああ
  • 9：ああああああああああああああああああ
  • 1：ああああああああああああああああああ
  • 2：ああああああああああああああああああ
  • 3：ああああああああああああああああああ
  • 4：ああああああああああああああああああ
  • 5：ああああああああああああああああああ
  • 6：ああああああああああああああああああ
  • 7：ああああああああああああああああああ
  • 8：ああああああああああああああああああ
  • 9：ああああああああああああああああああ




5.スクロールバーの色や太さを変更


今回「jScrollPane」を使って表示したスクロールバーは、cssファイルの「jquery.jscrollpane.css」を編集する事で色や大きさ(太さ)等を変更する事ができ、変更前のデフォルトは「jScrollPane」公式サイトの「 デモページ 」で表示されてるスクロールバーと同じです。（薄い紫色っぽい感じ）

▼ 編集する際の参考になればと「jquery.jscrollpane.css」の中身にコメントを付けてみました。
　 各設定値はデフォルトの状態なので、以下を参考に色や大きさを変えてみると良いと思います。

/* ▼ 本体 ▼ */
.jspContainer{ overflow: hidden; position: relative; }
.jspPane{ position: absolute; }
/* ▼ 縦のスクロールバー ▼ */
.jspVerticalBar{
position: absolute;
top: 0;
right: 0;
width: 16px;/* 縦スクロールバーの太さ */
height: 100%;
background: red;/* 縦スクロールバー背景色 */
}
/* ▼ 横のスクロールバー ▼ */
.jspHorizontalBar{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;/* 横スクロールバーの太さ */
background: red;/* 横スクロールバー背景色 */
}
.jspCap{ display: none; }
.jspHorizontalBar .jspCap{ float: left; }
/* ▼ スクロールバーのトラック部分 ▼ */
.jspTrack{
background: #dde;/* ←ここで色を変更（このブログの場合、グレーっぽい色になってます） */
position: relative;
}
/* ▼ スクロールバーの移動する部分 ▼ */
.jspDrag{
background: #bbd;/* ←ここで色を変更（このブログの場合、黒っぽい色になってます） */
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{ float: left; height: 100%; }
/* ▼ 矢印部分（デフォルトでは非表示） ▼ */
.jspArrow{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
/* ▼ 矢印部分にスクロールがくっついてる時 ▼ */
.jspArrow.jspDisabled{
cursor: default;
background: #80808d;
}
/* ▼ 縦スクロールの矢印部分 ▼ */
.jspVerticalBar .jspArrow{
height: 16px;/* 縦スクロールバーの矢印部分の縦幅 */
}
/* ▼ 横スクロールの矢印ボタン部分 ▼ */
.jspHorizontalBar .jspArrow{
width: 16px;/* 横スクロールバーの矢印部分の横幅 */
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus{ outline: none; }
/* ▼ 右下の角 ▼ */
.jspCorner{
background: #eeeef4;
float: left;
height: 100%;
}
/* ▼ IE6用のCSSハック ▼ */
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner{ margin: 0 -3px 0 0; }

※難しそうな感じですが、シンプルな表示なら数箇所変更するだけなので、そう難しくないと思いますｗ



6.オプションを使用する場合


「jScrollPane」では沢山のオプションがあるので、その一部をご紹介♪
オプションを使用する場合は、上記の「スクリプトを実行する為の記述」に以下のように、
使いたいオプションと設定値を追加で記述します。

▼ 矢印部分を表示する場合の記述（デフォルトでは「false」になってます。） 
$(function(){
　$('.scroll-area').jScrollPane({
　　showArrows:true// 矢印部分を表示（true）
　});
});

▼ 矢印部分にマウスを乗せると自動的にスクロールする記述 
$(function(){
　$('.scroll-area').jScrollPane({
　　showArrows: true,// 矢印部分を表示（true）
　　arrowScrollOnHover: true// マウスホバー時にスクロールする（true）
　});
});

その他、オプションの詳細は こちら をご確認下さい。（但し、説明は英語です...ｗ）

「jScrollPane」の公式サイトでは デモページ（サンプル） がたくさん用意されてますし、それぞれどのような設定がされてるかも記述されてるので、それを参考にカスタマイズするのも良いと思います。
（これまた説明は英語ですが... それぞれソース部分の記述もあるので見れば大体分かると思いますｗ）

▼こんな感じでデモページの下部に記述されてます。
デモページでの説明部分

その他、矢印部分を画像にしたり等など、とにかく色々出来ますが...
今回はこの辺でとりあえず終わりますｗ（シンプルな表示だとオプションとか無しでOKですし...ｗ）

以上、スクロールバーの表示をカスタマイズする方法でした。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ
B!

関連記事
2014-11-06 | プラグイン | コメント(8) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/48-6ea27674

「スクロールバーの色や太さ等をカスタマイズ」へのトラックバック

- TrackBack -


「スクロールバーの色や太さ等をカスタマイズ」へのコメント

- Comment -

No title

あると♪さん　こんばんは＾＾

いやー相変わらずさすがですね＾＾
私もカスタマイズする際はあると♪さんのようにできればいいんですが、多分無理ですね＾＾；

今後とも宜しくお願いします。　
  • 2014-11-07 00:27
  • T.Oさん@管理人
  • 編集

No title

今、記事を読んだ後でにほんブログ村ボタンをぽちってしたら。。。

あると♪さんのブログが1位になってました！！

すごいすごい！！！快進撃です！！
  • 2014-11-07 09:07
  • ひーさんさん@管理人
  • 編集

Re: No title

> T.Oさん

T.Oさんのブログ、すごくイイ感じにイメージチェンジされてるじゃないですか♪

私のカスタマイズはお勉強と言うか、趣味と言うか、遊びと言うか...ｗ
まぁでも、何かの際に少しでもお役に立てれば嬉しい限りです♪^^

こちらこそヨロシクですっ!!Σd(≧∀≦*)
  • 2014-11-07 10:46
  • あると♪さん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもありがとうございますっ!!ｗ

1位になってたの、自分でもビックリしましたｗ
他２つのランキングでも2位だったので、前回見た時より上がってる♪

ホント皆様には感謝ですっ!!ｍ( ≧Д≦ )ｍ
  • 2014-11-07 10:50
  • あると♪さん@管理人
  • 編集

No title

コメントありがとうございます(^^)
いろんなブロガーさんにいい刺激をもらってます^ ^
毎日更新してると、書くことの苦手意識もなくなりました（≧∇≦）
これからもよろしくです(^^)
  • 2014-11-11 16:47
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

こちらこそ、いつもお世話になってます♪

色んなブロガーさんとの繋がりってホント刺激になりますよね^^
そして、毎日ちゃんと更新して日々進化されてる
ひーさんさんのブログは、いつも楽しく拝見させて貰ってます♪（≧∇≦）ｂ

ホント見習わなくては＞＜

って事で、今後共こちらこそ宜しくお願いしますっ!!
  • 2014-11-11 22:41
  • あると♪さん@管理人
  • 編集

スクロールバー

あると♪さん

スクロールバーって結構幅とるんですよねぇ。
それでもって、記事と、ブラウザーのスクロールバーが
隣同士になったりすると・・・むむむむ
って、感じ・・・
こやって、カスタマイズすると見分けも付くので大変便利かも・・・
何時か使わせてもらいますねぇ。（大丈夫か？）
いつも、お騒がせですみません。
これからも宜しくです。
  • 2014-12-07 01:16
  • girigiri26さん@管理人
  • 編集

Re: スクロールバー

> girigiri26さん

先程はありがとうございました♪

そうなんですよねｗ　スクロールバーって結構幅がね。。。ｗ
1px単位を気にしちゃう人なら特にｗｗ(￣▽￣;)

是非チャレンジしてみて下さいね♪
色や形も色んな感じに出来ますよΣd(≧ω≦*)
  • 2014-12-07 01:37
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます 　
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author：あると♪
ブログ開始： 日目
公開記事数： 件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【 当ブログのご案内は こちら♪ 】

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ