前の関連記事: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>の上行に以下を入力してテンプレートを保存します。
1 |
<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に解説がありますのでそちらを参考にします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/* 基本スタイリング設定開始 *//* 重要:横スクロールバーを使うつもりがなくても、最低でも色は設定しといてください。*//* .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;}/*基本スタイリング設定終了。これらの設定は画像を使う方法でも必須です。 */ |
minimalには.scrollerjogboxの設定もあります。これは縦スクロールバーと横スクロールバーの両方を表示させたときに挟まれる隅の四角形の設定です。
設定を終えたらflexcrollstyles.cssファイルをGoogleドライブにアップロードして先と同じようにしてflexcrollstyles.cssのURLを作成します。
テンプレートのHTMLで先ほど入力した<script type='text/javascript' src="flexcroll.jsのURL"></script>の上行に以下を入力してテンプレートを保存します。
1 |
<link href="flexcrollstyles.cssのURL" rel="stylesheet" type="text/css" /> |
他になにも設定しないとブログの幅いっぱいに表示されます。
縦はどういう基準で決定されているのかは不明です。インデックスページと同じ高さになっています。
背景がwhiteにしているせいもあって、とてもシンプルなスクロールバーです。
設定試行錯誤時はflexcrollstyles.cssの中身を]]></b:skin>の前に入力した方が便利
1 2 3 |
<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
日本語で紹介されているページです。
0 件のコメント:
コメントを投稿