小粋空間: BlogPeople のリンクリストにスクロールバーをつける

Top ＞ Movable Type ＞カスタマイズ＞サイドバー＞ BlogPeople のリンクリストにスクロールバーをつける

News

各種ブログテンプレート

2005年5月11日

エントリー本文

BlogPeople のリンクリストにスクロールバーをつける

Posted at May 11,2005 11:58 PM
Category：[BlogPeople, サイドバー]
Tag：[BlogPeople, Customize, Link, Scrollbar, SideMenu]

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern Syntax：BlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

１．CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
　　　　　：
　（メニューリスト）
　　　　　：
</div>

とクラス属性 hogehoge（青色）を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ（ここでは200px）にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード（青色）を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています（上記の表示用コードの状態では目視できません）。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
　　　　　　：
　　　（リンクリスト）
　　　　　　：
</div>
<div class="blogpeople-powered-by">
　　　　　　：
　（クレジットバナー）
　　　　　　：
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性（青色）が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

２．出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成／更新」をクリックします。

３．作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

４．CSS設定

１項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート（styles-site.css）に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
　　　　　　　：
　（クレジットバナー用のスタイル）
　　　　　　　：
}

この設定を行うことで３項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル（フォント等）を指定しています。クレジットバナーのスタイル（margin 等）を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

Posted by yujiro ReTweet This!

« BlogPeople 500 被リンク達成 | Main | Movable Type の第三者による不正アクセスを許す危険性の対策について »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ BlogPeople のリンクリストにスクロールバーをつけてみたよ。 from White*Dwarf
あれこれ変えてみました。フラッシュイメージも、Flashbucksさんにて、夏... [続きを読む]

Tracked on May 12, 2005 11:16 PM

≫ リンクリストにスクロールバーをつける・・・の巻。 from TOY COZY MUSEUM 別館
ヒトリ寂しく卑屈なブログでもやってない限り、リンクリストというのはリンクが追加され増えていくはずなので、当然縦に長〓いリ... [続きを読む]

Tracked on May 15, 2005 10:23 PM

≫ MyblogList と BlogPeopleリンクリストをチョコッと改良 from やむやむ
やむやむではリンクリストのページにまとめて表示させてる MyblogLis... [続きを読む]

Tracked on May 20, 2005 9:39 AM

≫ サイドバー内にスクロール from アルの足跡
どんどん長くなっていくサイドバーの月別エントリーやブログピープル・・・どうにか... [続きを読む]

Tracked on May 20, 2005 1:18 PM

≫ リンクリストにスクロールバーをつける方法 from LOVE×LOVE!?
これはMT以外にも使える小技です。リンクリストをサイドバーにはると、とてつもな... [続きを読む]

Tracked on May 27, 2005 10:52 PM

≫ 小粋なユーザーコミュニティ100人突破記念企画参加 from TENERE
このブログのカスタマイズドにあたっては、このブログにこれまで書いてきたTipsな... [続きを読む]

Tracked on June 27, 2005 1:45 AM

≫ BlogPeople リスト from サザンな？ブログ
リンクリストって自然と増えて来るのでスクロールバーを導入今回のカスタマイズは ... [続きを読む]

Tracked on July 17, 2005 9:16 PM

≫ いろいろ手直し、百足館 from 高知沢田マンション百足館通信
　ひさしくアップをさぼっていると、瞬く間にランキングでukikiさんのウキウキブギウギに遥かなる差をつけられてしまいました！　というわけで??? [続きを読む]

Tracked on August 14, 2005 11:06 AM

≫ パワーアップ？百足館通信（8/16追補） from 高知逍遥ブログ【百足館通信】
　ひさしくアップをさぼっていると、瞬く間にランキングでukikiさんのウキウキブギウギに遥かなる差をつけられてしまいました！　というわけで??? [続きを読む]

Tracked on August 16, 2005 11:05 AM

≫ 今更ながら。 from Zero Divide
BlogPeopleのリンクリストにスクロールバーをつけてみた。参考にしたのは... [続きを読む]

Tracked on September 4, 2005 3:44 PM

≫ BlogPeople導入記 from ネコの為に鈴は鳴る -After☆Taste Blog
小粋空間さんの「BlogPeople のリンクリストにスクロールバーをつける」を参考にさせていただいて、リストにスクロールバーが出るように設定してみた。 [続きを読む]

Tracked on October 13, 2005 7:37 PM

≫ BlogPeople from 永遠の風
webサイトの日記コンテンツにしていたこのブログですが、別館として独立させたのを... [続きを読む]

Tracked on November 10, 2005 8:55 PM

≫ BlogPeople のリンクリストにスクロールバー from ぼちぼちいこか
リンクリストをサイドバーに全表示させると登録サイトが増えるにつれて　びろ?んと縦長になってしまいますそれで　またまた小粋空間様のB... [続きを読む]

Tracked on December 23, 2005 5:34 AM

≫ [ ???B]Link List にスクロールバー from `ohana
また「小粋空間」さまを参考に設定しました。 realguuuは左下方にBlogp... [続きを読む]

Tracked on January 17, 2006 1:48 PM

≫ BlogPeopleをサイドバーに from showry's Blog
以前よりBlogPeopleやMyBlogListに登録はしていたのですが、リン... [続きを読む]

Tracked on January 30, 2006 10:30 PM

≫ BlogPeopleのリンクリストにスクロールバーをつける♪ from yozoのおすすめ本
この記事を書くにあたって、小粋空間のyujiroさんの記事 BlogPeople のリンクリストにスクロールバーをつけるを参考にさせていただきました。 ... [続きを読む]

Tracked on March 30, 2006 2:01 PM

≫ BlogPeopleにも登録してみた from クリュサオル@黄金の剣を持つ者
ドリコムRSSに続き、BlogPeopleにも登録してみました。ここでも小粋空... [続きを読む]

Tracked on August 21, 2006 5:18 AM

≫ BlogPeopleに登録 from CoffeeTime
いままで、ランキングサイトとか、そういったものに登録したことがなかった。だって... [続きを読む]

Tracked on September 4, 2006 12:14 PM

≫ カスタマイズいろいろ from Trash can::ver.2
ちょっと眠ったらすぐ目が覚めてしまった・・・。AM2時頃寝たのに4時には目が覚めてしまった(T_T)悔しいので起きた勢いでblogのカスタマイズ開始w... [続きを読む]

Tracked on October 31, 2006 9:19 AM

≫ BlogPeopleのリンクリストにスクロールバーを設置 from yolipの学舎
BlogPeopleのリンクリストにスクロールバーを設置します。CSS編集の画面で下のコードを追加するだけでＯＫです。 [続きを読む]

Tracked on December 13, 2006 12:53 AM

こんばんは。
ワタシのトコロではまだまだスクロールさせるまでもないリンク数なのですが、サイドバーでのスクロール表示は他にも応用できそうなのでお知恵を拝借させていただきました。有り難うございます。

[1] Posted by toycozy : May 15, 2005 10:19 PM

＞toycozyさん
こんばんはー。
コメント＆トラックバックありがとうございます。
どしどし応用してやってください。

せっかく設置したのにBlogPeopleが障害中とは。（笑）

[2] Posted by yujiro : May 15, 2005 11:19 PM

初めまして。質問です。

トラックバック・ピープルをスクロールさせる場合も、リンクバナーを外に追い出すことはできますか？

ちょっとやってみたんですけど、ならなくて…。
貴ブログもTBPはスクロールじゃなくて、折り畳みになっているので、できないのですかね？

[3] Posted by なつ : May 31, 2005 4:50 PM

＞なつさん
はじめまして。
ご質問の件ですが、後ほどエントリーにして公開したいと思います。

以上です。
それではどうぞよろしくお願い致します。

[4] Posted by yujiro : May 31, 2005 8:41 PM

こんばんは、yujiroさん
何時も、お世話になっています。

この前、BlogPeople リストのスクロールバーを
導入するにあたって参考に、させて頂きました。

CGIの設置とかは、HPを作る時に参考書を
購入して覚えたんだけど、ブログのカスタマイズって
ホント奥が深いと言うか難しいですね。

未だに、タグを変な場所に入れちゃって
再構築の時に、見つかりませんとか
その場所では、使えませんって言うエラーが・・・。(笑)

お礼が遅くなってすいませんでした。

[5] Posted by mituru : July 24, 2005 2:02 AM

＞mituruさん
こんばんは。
記事参照＆ご連絡ありがとうございます。
うまくできたようで良かったです。

あ、再構築のエラーは私も時々出してます。（笑）

[6] Posted by yujiro : July 24, 2005 2:13 AM

おはようございます(^^)
こちらのエントリーを応用して、当Blogのカテゴリーリストにスクロールバーを付けてみました。
当面はこれで様子を見たいと思っています。

[7] Posted by ねーさん : January 4, 2006 8:34 AM

＞ねーさん
こんばんはー。
ご利用＆ご連絡ありがとうございます。
うまくできたようでよかったです。
ではでは！

[8] Posted by yujiro : January 5, 2006 1:02 AM

yujiroさん、はじめまして。
showryさんのところから飛んできました。
まだリンクリストにスクロールバーをつけないということはないのですが、将来のため(勉強のため？)に設置させていただきました。
とてもわかりやすい解説で、大変参考になりました。ありがとうございます。　m(_ _)m
またちょくちょくお邪魔させていただきます。
これでエレガントにスクロールバーが自動設置されることになりましたよ（笑）

[9] Posted by yozoblog : March 24, 2006 5:30 PM

＞yozoblogさん
はじめまして。
記事参照ありがとうございます。
ということで BlogPeople 登録させて頂きました（笑）。
早くスクロールできる日が来ることを願ってます。

[10] Posted by yujiro : March 25, 2006 1:43 AM

yujiroさん、こんにちはー♪
うわぁ?♪ありがとうございます♪
ただいま、お礼と勝手ながらのリンクの
お断りにお邪魔したところですよ。
こちらからも是非リンクさせていただきますね♪
今後ともよろしくお願いします　m(_ _)m

不肖の弟子で申し訳ありませんでした。
（↑勝手に弟子入りです♪）
がんばってリンクリストを充実させて、
スクロールバーをエレガントに
表示させますねー♪　

[11] Posted by yozoblog : March 25, 2006 12:30 PM

＞yozoblogさん
こんばんは。
リンクありがとうございます。
早速スクロールできましたね。
ではでは！

[12] Posted by yujiro : March 25, 2006 9:58 PM

yujiroさん、こんにちはー♪
おかげ様で、BlogPeopleのリンクリストに
エレガントにスクロールバーをつけるだけでなく、
行間や大きさなども、さわれるいようになり、
改めてありがたい内容の記事だったと、しみじみ
思っています。
本当にありがとうございました。m(_ _)m

また、勝手にリンクした、他のブログにまで
リンクしていただき、ありがとうございます。
こちらの記事を参考にした、備忘録としての記事をUPしましたので、またまた勝手ながらトラバいれさせていただきました。　m(_ _)m

[13] Posted by yozoblog : March 30, 2006 2:09 PM

＞yozoblogさん
こんばんは。
トラックバックありがとうございました。
記事UPもありがとうございます。
ではでは！

[14] Posted by yujiro : March 31, 2006 12:13 AM

はじめまして。

しばらく前から拝見させていたいて
カスタマイズの方向を模索しています。

せっかくなので今回、リンクさせていただこうと思って、ご連絡を。BLOB PEOPLEにてやらせてもらいます。

そのうち
徐々にこちらの情報でカスタマイズさせていただくつもりなのでこれからもがんばってくださいね。

ではでは。

[15] Posted by iz : April 9, 2006 9:14 PM

＞izさん
はじめまして。
コメントありがとうございます。
BlogPeople登録ありがとうございました。
カスタマイズでご不明な点がございましたらご連絡ください。
それでは今後ともどうぞよろしくお願い致します。

[16] Posted by yujiro : April 10, 2006 11:57 AM

yujiroさん、こんばんは。はじめまして。yozoのおすすめ本様から、お邪魔しました。おかげ様でBlogPeopleのリンクリストのみにスクロールバーを設置することができました。ありがとうございます。勝手ながら、トラバいれさせていただき、リンクさせていだきました。今後ともよろしくお願いします。m(_ _)m

[17] Posted by yolip : December 13, 2006 12:51 AM

＞yolipさん
はじめしまして。
ご利用＆ご連絡＆リンクありがとうございました。
こちらこそ今後ともよろしくお願い致します。
ではでは！

[18] Posted by yujiro : December 13, 2006 1:03 PM

こんばんわ
いつも勉強させていただいています。
ブログピープルのスクロールバーですが、ブログのサイドカラム配置時にはスクロールバー付きで表示を行っています。
今回こちらのＬｉｎｋページのように記事内にもブログピープルの表示を行いました。
当然記事内に表示されたブログピープルリンクも、サイドカラム同様にスクロールバー付きになっていますが、記事内の表示だけスクロールバー無しの全表示を行う事は可能なのでしょうか？
可能でしたら記述方法を教えて頂ければ幸いです。

[19] Posted by fuku : May 30, 2009 7:10 PM

＞fukuさん
こんばんは。
ご返事おそくなってすいません。
ご質問の件ですが、記事内の表示だけスクロールバー無しの全表示を行うには、サイドカラムの表示のための script 要素を、次のように div 要素でくくります。div 要素には class="side" を設定します。

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

そして、スタイルシートを次のように変更します。

.side .blogpeople-main {
    height: 300px;
    overflow: auto;
}

これで記事内の表示はスクロールされず、全て表示されます。
それではよろしくお願い致します。

[20] Posted by yujiro

: June 7, 2009 1:41 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site

BlogPeople のリンクリストにスクロールバーをつける

１．CSSでスクロールバーを表示する方法

２．出力形式の選択とコード生成

３．作成コードをテンプレートに設定

４．CSS設定