Blogger:投稿本文でスクロールバーを表示させる

SyntaxHighlighterを使っていると頻繁にスクロールバーが登場します。スクロールバー自体をカスタマイズしたいと思ったのですがそう簡単にはいかず、まずはスクロールバーの設置方法から調べてみました。

スクロールバーを表示させる方法

【FC2ブログ】スクロールバーつきのボックスを追加する方法 【 AMGブログ 】

ここに紹介されている方法が一番簡単かと思います。

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

borderで枠線の幅を設定します。0pxにすると枠線は無しになります。

solidは線種、#000000は色です。

solidは普通の線、dashedは破線、dottedは点線になります。

色は色見本と配色サイト - color-sample.comなどで探してHEXというコードを記入します。

widthとheightで枠の幅と縦の長さを設定します。

padding:10px;は枠線からの中身の距離を設定します。

text-align:left;は中身を左詰にします。centerは中央揃え、rightは右詰です。

overflowでスクロールバーの表示の制御をします。

overflow:auto;では表示される中身が枠からはみ出すほどの大きさでないときはスクロールバーは表示されません。

中身の量に関係なく必ずスクロールバーを表示させたいときはoverflow:scroll;とします。

overflow:hidden;にするとスクロールバーが表示されません。

投稿画面の作成モードでは枠内にカーソルを置いて矢印で移動して中身全部がみれますが、公開してブログに表示させて見ると画面全体がスクロールするだけで表示されていない部分はみれませんでした。


overflow:visible;にするとスクロールバーが表示されませんが中身が枠を超えてすべて表示されます。


こんなふうになりますがなにか使い道があるのでしょうか？

横スクロールバーを表示させるのに一苦労

横スクロールバーの表示をチェックしようとしたのですがこれがなかなか苦労しました。

いくつか方法が書いてあるページがあったのですがどれも何かしら不都合がありました。

nowrap属性を使うものはブラウザによって表示されなかったり、あとの記事ででてくるfleXcrollのカスタマイズをするとスクロールバーが表示されなかったりしました。

Blogger:fleXcrollでスクロールバーをカスタマイズのfleXcrollのサンプルファイルをみてその方法がベターかなと思いました。

横スクロールバーを表示させたい<div>を表示させたいwidthを設定し、さらにその中にそれより大きいwidthを設定した<div>を入れ子にする方法です。

<div style="overflow: auto; width: 510px;">
  <div style="width: 520px;">
    ここに内容を書く
  </div>
</div>

ベストでなくてベターとしたのはこのように内容が少なくても横スクロールバーが表示されてしまうからです。

この方法で内側のwidthをうんと大きくするとスクロールバーを短く表示させれますね。

ブラウザによって方法が違うスクロールバーのカスタマイズ方法

スクロールバーはウィンドウのスクロールバーと同じものが表示されます。

投稿本文では目立ちすぎるのでカスタマイズしてもう少しなじむものにしたいと思いました。

簡単にやり方が見つかった、、、と思ったらブラウザによって表示特有の方法やウィンドウのスクロールバーも同時に変えてしまうものばかりでした。

スクロールバーの色サンプル

scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#ddbbc3;
scrollbar-shadow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-dark-shadow-color:#eeccd4;
scrollbar-3dlight-color:#eeccd4;

これをstyleに設定する方法。IE10可、Chrome不可、Firefox不可。

How to Add Custom Scroll Bar To Blogger? - Smart Blogging Methods（ブログが削除されています）

::-webkit-scrollbar {
background:#fff;/* Scroll Barground*/
width:13px;
}
::-webkit-scrollbar-thumb { /* Scroll Bar Thum Codes */
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #41B7D8 10%, #41B7D8 51%);
}
 /* If You Don't Want Buttons You Can Remove This Code */
::-webkit-scrollbar-button {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background:#B8B8B8;
}

これを]]></b:skin>の前に置く方法。IE10不可、Chrome可、Firefox不可。
ウィンドウのスクロールバーも変化します。

これらは併用できます。

各ブラウザ向けの方法を探して似たような見た目に設定してもいいかもしれませんが、とっても手間です。

いろいろ探した結果ブラウザに左右されずに表示できるfleXcrollというツールを見つけました。

参考にしたサイト

【FC2ブログ】スクロールバーつきのボックスを追加する方法 【 AMGブログ 】
Bloggerでも全く同じ方法が使えます

色見本と配色サイト - color-sample.com
色のコードを入力すると色を表示してくれます。さらに配色候補まで表示してくれます。

スクロールバーの色サンプル
たくさんサンプルがありますが、scrollbar-arrow-colorプロパティはIEしか反映されません。

How to Add Custom Scroll Bar To Blogger? - Smart Blogging Methods(ブログが削除されています）
ブラウザのスクロールバーも変化します。Webkitを使っているブラウザのみに反映されます。

横スクロールバーつきのソース引用 - 子連れひつじBLOG
横スクロールバーの表示のさせ方

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