★スクロールバー表示

プラグインにスクロールバーを表示するのをやってみたかったんです。
ただ、大して記事も書いて無いし、スクロールバーなんて表示するほどの何者もないのが現状でして・・・。
それでも、先日はてなアンテナのプラグイン表示設定をした折に、「ここには使えるかも」と思い立ってやってみることにしました。


★スクロールバーの設定★

[目標] スクロールバーをプラグインコンテンツ内に表示する。
[難易度感] 思ったよりあっさり。

・忍ブログ利用でのスクロールバー表示のサイトを検索。今回利用させて頂いたのはカスタマイズin忍者ブログさんです。
・単なるスクロールバーを表示するだけではなく、表示のON/OFF切り替えができるという優れモノです。

<script type="text/javascript">
<!--
size = 1;
sizeHeight = new Array("100%","200px");
function scrollbox(c) {
boxID = document.getElementById('scrollbarbox'+c)
size = ( size == 1) ? 0 : 1;
boxID.style.height = sizeHeight[size];
}
//-->
</script>

・上記の部分のjavascriptを説明にあるとおり貼り込みます。貼り込む場所はテンプレートHTMLでもプラグインHTMLでも良いそうです。あたしはプラグインHTMLに貼り込みました。
・判りやすくオレンジ表記になっている所が、スクロールバーを表示する長さ（ボックスの高さ）。これは自分の好みに合わせて変更します。

<div id="scrollbarbox1" style="height: 200px; overflow:auto;">
--スクロールバーが表示される中身の部分--
--（あたしの場合は、はてなアンテナ）--
</div>

・スクロールバーを表示させる部分に上記の部分を貼り込みます。
・あたしの場合は、どちらも同じプラグインHTMLの中での設定となりました。さらにこの中にはてなアンテナの設定があるので、もうごちゃごちゃです。
・オレンジの200pxのところは、最初のスクリプトと同じ値にするとのこと。ふむふむ・・・。
・プラグイン表示させるのに左右の幅と色を自分のブログのもの用に設定して設置完了。
・あっ、忘れてた。スクロールバーのON/OFF切り替えようのスイッチを下記のように設定。場所はどこでもいいらしいです。

<a href="#scrollbarbox1" onclick="scrollbox(1)" title="スクロールバーの表示・非表示の切り替えをします">Scrollbar ONorOFF</a>

[感想]
・やってみるとあっさりできちゃった。すごいです、説明が完璧。あるふぁさん、ありがとう～。
・気を良くしたので、アンテナをいくつか追加設定。あとでアンテナ先に挨拶周りしておかないと・・・。