以前、BlogPeopleなどのメモ欄で生成されるリストをCSSを使ってスクロールさせる方法について書いたのですが、マイリスト(私リスト/リンクリスト)をCSSだけで個別にスクロールバーをつけることが出来ませんでした。そこで、今回は、マイリストにスクロールをつけるJavaScriptを作ってみました。
リンク: [f-] サイドバーにあるリストをスクロールさせる方法.
----
▼設置方法
- スクロールさせたいマイリスト以降にあるマイリストのメモ欄をテキスト表示に設定する(適当なリストが無ければ新しく作る)
- 下記のコードをコピーしてメモ欄に貼り付ける
- 必要箇所を編集して保存し反映させる
# 「以降」というのは、HTMLソース的に以降という意味です(TypePad系ブログでサイドバーを左右両方使っている場合、右サイドバーは左サイドバーよりHTML的に下です)
▼貼り付け用コード
<script type="text/javascript">
<!--
function scrollLinkList(title, height) {
var h2s = document.getElementsByTagName('h2');
for (var i = 0, h2; (h2 = h2s[i]); i++) {
if (h2.innerHTML.replace(/<[^>]+>/g, '').indexOf(title) == -1)
continue;
var ul = h2.parentNode.getElementsByTagName('ul');
if (ul.length==0)
continue;
ul = ul[0];
ul.style.height = height;
ul.style.overflow = "auto";
break;
}
}
scrollLinkList("my utils", "150px");
//-->
</script>
▼編集箇所
上記のコードの下の方にある
scrollLinkList("my utils", "150px");
という一行を編集してください。書式は、
scrollLinkList("リストのタイトル", "高さ");
となっています。
# つまり、上記の例では、「my utils」というタイトルのマイリストの高さを150ピクセルに設定し、はみ出した部分をスクロールバーを使って見られるようにしています。
# 「my utils」は、今、このブログの右サイドバー下方にあります。
※なお、引用符内部は、大文字小文字など、小さな違いも区別しますので、リストタイトルは管理画面で作った通りに、高さは半角英数字(単位部分は小文字)で書くようにしてください。
# 例 : 「my utils」であれば "my utils" であって、"My Utils" でもなく、 "MY UTILS" でもなく、 " my utils" などでもないということです。また、150pxであれば、150PXでも150px(全角)などでもありません。
▼複数のマイリストにスクロールバーをつける場合
scrollLinkList("リストのタイトル", "高さ");の部分を繰り返してください。
----
以上です。不明瞭な部分がありましたらコメントしてください。
最近のコメント