Blogger:fleXcrollで画像ファイルを使ってスクロールバーをカスタマイズ

前の関連記事：Blogger:fleXcrollでスクロールバーをカスタマイズ

fleXcrollで画像ファイルを使わないシンプルなスクロールバーの変更をしましたが、ベタ塗りの設定しかできませんでした。今度は画像ファイルを使ってカスタマイズします。

スクロールバーに使う画像の部品は何個必要？

Blogger:fleXcrollでスクロールバーをカスタマイズでダウンロードしたflexcrolljs.zipを解凍してできたrecommended_stylesフォルダの中のfullimage-commentedをみてみます。

用意されている画像は とです。

これはCSSスプライトを利用して部品を一つの画像にまとめたものです。

これで出来上がるスクロールバーはこんなのです。


どのような部品を用意すればよいのかはfleXcroll V2.0 User Guideを見ればわかりますが結構たくさんあります。

.vscrollerbase         縦スクロール背景本体
.vscrollerbasebeg　　縦スクロール背景上端
.vscrollerbaseend    縦スクロール背景下端
.vscrollerbar          縦スクロールバー本体
.vscrollerbarbeg     縦スクロールバー上端
.vscrollerbarend     縦スクロールバー下端
.hscrollerbase        横スクロール背景本体
.hscrollerbasebeg   横スクロール背景左端
.hscrollerbarend     横スクロール背景右端
.hscrollerbar          横スクロールバー本体
.hscrollerbarbeg     横スクロールバー左端
.hscrollerbaseend   横スクロールバー右端
.scrollerjogbox　     角

全部で13個。さらに.scrollerjogboxをマウスオーバーで変化させるならもう1個必要です。

分解図を作ってみました。マウスポインターを上にもってくると名前がポップアップします。












縦と横は90度回転させるだけですのでデザインしないといけないのは最低7個でいけますね。

サンプル画像を使ったカスタマイズをBloggerに適用

どこかにfleXcroll用の画像集みたいなのがないか探してみましたが全然見つかりませんでした。

自分で画像を作ろうかとも思いましたが小さな画像を綺麗に作るのはかなり難しく断念しました。

とりあえずサンプルの画像を使ってスクロールバーをカスタマイズします。

 とを投稿本文に挿入後HTMLモードにして自分のBloggerでのURLをHTMLモードで確認します。

fullimageフォルダの中のflexcrollstyles.cssファイルをエクスプローラで、右クリック→編集、としてファイルの中身をみます。

メモ帳で開いたときは、編集→置換、でbasebarcaps_verticalbarbody.pngとhorizontalbarbody_cornerjog.pngをそれぞれ自分のBloggerでのURLに置換します。

置換し終わったらflexcrollstyles.cssを閉じて保存します。

Blogger:fleXcrollでスクロールバーをカスタマイズと同様にしてflexcrollstyles.cssとflexcroll.jsをGoogleドライブにアップロードして共有設定します。（いまはGoogleサイトにしています。詳しくはこちらへBlogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更）

flexcroll.jsはどの方法でも共通ですので既に設定済なら変更不要です。

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

<link href="https://www.googledrive.com/host/(flexcrollstyles.cssの共有ID)" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="https://www.googledrive.com/host/(flexcroll.jsの共有ID)"></script>

あとはスクロールバーを変化させたいところで投稿画面でHTMLモードにしてそのdivタグにclass="flexcroll"を加えるだけです。

縦横表示させるとこんなふうになります。


ページをロードした最初はデフォルトのスクロールバーが表示されちょっと待つとカスタマイズドスクロールバーに変化します。

iOS Safariでも表示されますね。

参考にしたサイト

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