Blogger:fleXcrollでスクロールバーをカスタマイズ

前の関連記事:Blogger:投稿本文でスクロールバーを表示させる

ブラウザに依存しないスクロールツールバーのカスタマイズツールのfleXcrollを使います。

fleXcrollを使えばブラウザごとの設定不要。まずflexcroll.jsファイルをアップロード。

fleXcroll: Cross Browser Custom ScrollBar script by Hesidoではブラウザ毎に設定不要でスクロールバーをカスタマイズできます。

外部ファイル置き場にはBlogger:Googleドライブにjsファイルを置いて自動更新コピーライトを表示させるで共有設定したGoogleドライブを使います。

fleXcrollのページのDownload the script hereからflexcrolljs.zipファイルをダウンロードします。

You can use the script to enhance your personal site or implement it in non-profit community sites without paying a dime. A link to hesido.com is much appreciated, but not required. These type of websites include: Charity websites, personal sites, blogs, etc.fleXcroll: Cross Browser Custom ScrollBar script by Hesido

商用サイトでの利用は有料ですのでご注意ください。

flexcrolljs.zipを解凍してscriptフォルダにあるflexcroll.jsをGoogleドライブにアップロードします。（いまはGoogleサイトにしています。詳しくはこちらへBlogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更）

flexcroll.jsファイルの共有するリンクのIDを確認してhttps://www.googledrive.com/host/の後ろにIDをくっつけてflexcroll.jsのURLを作ります。

管理画面→テンプレート→HTMLの編集、で</head>の上行に以下を入力してテンプレートを保存します。

<script type='text/javascript' src="flexcroll.jsのURL"></script>

2013年8月8日追記　外部ファイル置き場はGoogleドライブからGoogleサイトへ変更しました

詳しくは外部ファイル置き場をGoogleドライブからGoogleサイトへ変更へ

画像ファイルを用意しなくてもよい一番単純な方法（基本スタイリング）

flexcrolljs.zipを解凍してできたrecommended_stylesフォルダの中に設置方法の例があります。


-commentedとついているフォルダの中のCSSファイルには設定方法の解説が載っているものです。

全部で4種類の方法があるということになりますが、newstylingmethodはベータバージョンで登録者のみ利用可能とReadMe.txtに書いてありますので普通に使えるのは3種類ということになります。

このうち一番簡単そうなminimalを試してみることにします。

flexcroll.jsは各方法で共通ですので方法を変えるごとにアップロードし直す必要はありません。

設定はflexcrollstyles.cssでするのですがminimalフォルダにあるflexcrollstyles.cssには解説が書いてありません。

そこでfullimage-commentedのflexcrollstyles.cssに解説がありますのでそちらを参考にします。

/* 基本スタイリング設定開始 */

/* 重要:
横スクロールバーを使うつもりがなくても、最低でも色は設定しといてください。
*/

/* .scrollgenericは変更する必要はないですが省略してはいけません。*/
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* 縦スクロールバーの背景の設定(この中を.vscrollerbarで設定したバーが動きます） */
.vscrollerbase {
width: 15px;
background-color: white;
}
/* 縦スクロールバーのバーの設定 */
.vscrollerbar {
width: 15px;
background-color: black;
}
/* 横スクロールバーの背景の設定(この中を.hscrollerbarで設定したバーが動きます） */
.hscrollerbase {
height: 15px;
background-color: white;
}
/* 横スクロールバーのバーの設定 */
.hscrollerbar {
height: 15px;
background-color: black;
}

/*基本スタイリング設定終了。これらの設定は画像を使う方法でも必須です。 */

(超意訳by p--q)

minimalには.scrollerjogboxの設定もあります。これは縦スクロールバーと横スクロールバーの両方を表示させたときに挟まれる隅の四角形の設定です。

設定を終えたらflexcrollstyles.cssファイルをGoogleドライブにアップロードして先と同じようにしてflexcrollstyles.cssのURLを作成します。

テンプレートのHTMLで先ほど入力した<script type='text/javascript' src="flexcroll.jsのURL"></script>の上行に以下を入力してテンプレートを保存します。

<link href="flexcrollstyles.cssのURL" rel="stylesheet" type="text/css" />

そして今度は投稿編集画面に戻ってHTMLモードでスクロールバーをカスタマイズさせたい部分を<div class="flexcroll">と</div>ではさみます。


他になにも設定しないとブログの幅いっぱいに表示されます。

縦はどういう基準で決定されているのかは不明です。インデックスページと同じ高さになっています。

背景がwhiteにしているせいもあって、とてもシンプルなスクロールバーです。

設定試行錯誤時はflexcrollstyles.cssの中身を]]></b:skin>の前に入力した方が便利

<div class="flexcroll" style="width:520px;height:50px;overflow:auto;border:1px solid #000000;padding:10px;text-align:left;">
スクロールバーで表示される中身
</div>

こんなふうになります。

スクロールバーの背景色と枠線の色はもう少し工夫したいですね。

Googleドライブ上でcssファイルの編集ができたらよいのですがそれはできません。

ローカルで変更したものをアップロードして再度URLを設定しないといけません。

設定が落ち着くまではflexcrollstyles.cssのリンクはせずに中身をテンプレートHTMLの]]></b:skin>の上行にペーストして設定したほうが便利です。

色見本と配色サイト - color-sample.comで彩度別候補を参考に設定してみました。


IE10、Chrome、Firefox、Sleipnir、iOS Safari何れも同じように表示されました。

参考にしたサイト

fleXcroll: Cross Browser Custom ScrollBar script by Hesido
ブラウザ汎用のスクロールバーカスタマイズツールです。

fleXcroll | Webサイト制作支援 | ShanaBrian Website
日本語で紹介されているページです。

次の関連記事:Blogger:fleXcrollで画像ファイルを使ってスクロールバーをカスタマイズ