BlogPeople PEOPLE リンクリスト用 CSS

BlogPeople の新しいサービス PEOPLESerene Bach に住まう人々に参加してみました。
Serene Bach についてあまり書いてないじゃないか!というのは置いといて、試しにリンクリストを表示してみようとしたら謎なところがあったのでメモしつつ、リンクリスト用の CSS を作ってみます。

なんでこんなに div が・・・。

リンクリスト div タグ形式

ソースは以下の通り。

<div class="blogpeople-people">
	<div class="blogpeople-people-title">
		<a title="ウェブログツール「sb」または「Serene Bach」に関する記事や情報を共有するコミュニティです。他のブログツールでの参加も歓迎します。ただ、短すぎるのでキーワードに「sb」「SB」は入れません、ごめんなさい。" target="_blank" href="http://www.blogpeople.net/people/entry_69.html">Serene Bach に住まう人々</a>
	</div>
	<div id="ovrssll326-0" style="visibility: visible;">
		<div>
			<div class="blogpeople-tbp-link">
				<a title="画像や展示会情報満載。クリスチャンラッセンが贈る癒しのブログパーツ" onclick="overturePrClick('ovrssll326');" target="_blank" href="http://rc20.overture.com/d/sr/?xargs=15KPjg1%5F9Sn5amwr%2DrdLzISOqGxF4axca588hmD5F9GtFf5iMxXOZ5aqfEncV8T%2DVxv1PdzPWW9a4VL%5FPzkf2CEgqNQVaNGufpjdLJxYM%5FNqapWm1xv%2Dwhwe%5FgmY5GOHwGOlaLOd%2D%5Fm%2D7MINbvbj9G%2D9sy%5FTGPjqktzM6%5Fw%2DYYELzd0EQpqlGGfs9N%2D%5FF7jMiwKZgIQ8MgDNya5yKQBZ5Wmo94yNqULSATKSLU4Gt%2D2FuGIyYgrK%5FPeJEIub3vnY6GYevrzY1TuPc1J0f%2DO6wWGs08Gjnv5ck2n%2DIMkzs0DqqYUAMOOpb8Gz0MP3EImnbHiQCCytqIQXzzdxMscRctDfSpaQqeeTRTuF7oO8gaHor7q2HtWKfXSS0vdAJZ4tKiaZxe1jGLwz5uAmCOF9fasTkYP%2DNO4So%2E">[PR]ラッセンブログパーツ無料で提供</a>
			</div>
		</div>
	</div>
	<div>
		<div class="blogpeople-people-link">
			new<span class="blogpeople-people-date">08/05/16 05:57:</span><a title="2008/05/16 05:57:36:Riszw ここ最近の Serene Bach に関するニュースなどをご紹介します。BlogPeople PEOPLE「Serene Bach に住まう人々」the world loves the wannabees. のふうこさん..." target="_self" href="http://feeds.feedburner.jp/~r/riszw/~3/2245777/eid19.html">最近の Serene Bach 界隈の動きについて-<span class="blogpeople-people-site">Riszw</span></a>
		</div>
	</div>
	<div>
		<div class="blogpeople-people-link">
			<span class="blogpeople-people-date">08/05/15 08:14:</span><a title="2008/05/15 08:14:15:the world loves the wannabees. BlogPeople PEOPLE の話ばっかりですみません。観戦記も 5 件くらいたまってるのに〜(それは別に誰も期待していない)Serene Bach に住まう人々があま..." target="_self" href="http://wannabe.sweet-smile.org/ent/our_bach_started_to_run.htm">やっぱりか……-<span class="blogpeople-people-site">the world loves the wannabees.</span></a>
		</div>
	</div>
	<div>
		<div class="blogpeople-people-link">
			<span class="blogpeople-people-date">08/05/09 19:36:</span><a title="2008/05/09 19:36:50:the world loves the wannabees. BlogPeople でおなじみのアイビィ・コミュニケーションズさんから新しいサービスが公開されました。その名も BlogPeople PEOPLE。さっそく sb もしくは Serene Bach の「PEOPLE」として「Serene Bach に住まう人々」というのを立ち上げてみました。以下、続きにうんちく。" target="_self" href="http://wannabe.sweet-smile.org/ent/we_live_in_serenebach.htm">「Serene Bach に住まう人々」を立ち上げました-<span class="blogpeople-people-site">the world loves the wannabees.</span></a>
		</div>
	</div>
	<div class="blogpeople-people-credit">
		<a href="http://honda.jspeed.jp/cgi/sb/"><img id="bp-p-left-" style="border: medium none ; margin-right: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-left.gif"/></a><a target="_blank" href="http://www.blogpeople.net/people/entry_69.html"><img border="0" alt="現在の記事数: 5件" src="http://www.blogpeople.net/display/people/people00069.gif?pid=848"/></a><a href="http://atasinti.chu.jp/dad2/"><img id="bp-p-right-" style="border: medium none ; margin-left: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-right.gif"/></a><img src="http://www.blogpeople.net/people/images/0.gif?p=js&id=69&uid=7a659"/><br/>
	</div>
</div>
<div class="blogpeople-people-powered-by">
  <a href="http://www.blogpeople.net/people/">Powered by BlogPeople</a>
</div>

リンクリスト ul・li タグ形式

ソースは以下の通り。

<div class="blogpeople-people">
	<ul>
		<div class="blogpeople-people-title">
			<a title="ウェブログツール「sb」または「Serene Bach」に関する記事や情報を共有するコミュニティです。他のブログツールでの参加も歓迎します。ただ、短すぎるのでキーワードに「sb」「SB」は入れません、ごめんなさい。" target="_blank" href="http://www.blogpeople.net/people/entry_69.html">Serene Bach に住まう人々</a>
		</div>
		<div id="ovrssll326-1" style="visibility: visible;">
			<div>
				<div class="blogpeople-tbp-link">
					<a title="制作から配布までワンストップのバズマーケティングで!150万から" onclick="overturePrClick('ovrssll326');" target="_blank" href="http://rc20.overture.com/d/sr/?xargs=15KPjg15NSlpamwr%2DjfbTMT%2DKFxl4axca59sJsD5VxGtFc5iMxXON8b6HBnMNxTuxxv1PdyPGW%5F6MUJPT%5Fm%5FuCFQyJRFOBHfWugtjy%5FIw8Na8Zb%2DYYirUuxOjtm4ZPlE43ImOweYKOrvnacZf0NntL%5Fo8VvkXa8PBsxs%2DzwO8WFL7QzgMp9g6LddISvPIkhb%5FDK5sAO8cmetrtlyDjcooRmNE1p923PiETIV2m4B1%2Dq1yHMm9yoKzJYo4Jsav2m5GQYfWsyNSN2OJAR2mwWp5Fet9Oegawhc6U2OZa9W5BSM%5FMUBCLhQ85%2DfnS3q6Efpw24XDzHKODVx6%5FPB4UPxAgEPCxKgSaKGkqs0aKcYMXK5Gbw2CzAKfXTy0ndAIM7vKECA%2E%2E">[PR]ブログパーツ制作なら!</a>
				</div>
			</div>
		</div>
		<div>
			<div class="blogpeople-people-link">
				<li>
					<span class="blogpeople-people-date">08/05/16 05:57:</span><a title="2008/05/16 05:57:36:Riszw ここ最近の Serene Bach に関するニュースなどをご紹介します。BlogPeople PEOPLE「Serene Bach に住まう人々」the world loves the wannabees. のふうこさん..." target="_self" href="http://feeds.feedburner.jp/~r/riszw/~3/2245777/eid19.html"><span class="blogpeople-people-site">Riszw</span>-最近の Serene Bach 界隈の動きについて</a>
				</li>
			</div>
		</div>
		<div>
			<div class="blogpeople-people-link">
				<li>
					<span class="blogpeople-people-date">08/05/15 08:14:</span><a title="2008/05/15 08:14:15:the world loves the wannabees. BlogPeople PEOPLE の話ばっかりですみません。観戦記も 5 件くらいたまってるのに〜(それは別に誰も期待していない)Serene Bach に住まう人々があま..." target="_self" href="http://wannabe.sweet-smile.org/ent/our_bach_started_to_run.htm"><span class="blogpeople-people-site">the world loves the wannabees.</span>-やっぱりか……</a>
				</li>
			</div>
		</div>
		<div>
			<div class="blogpeople-people-link">
				<li>
					<span class="blogpeople-people-date">08/05/09 19:36:</span><a title="2008/05/09 19:36:50:the world loves the wannabees. BlogPeople でおなじみのアイビィ・コミュニケーションズさんから新しいサービスが公開されました。その名も BlogPeople PEOPLE。さっそく sb もしくは Serene Bach の「PEOPLE」として「Serene Bach に住まう人々」というのを立ち上げてみました。以下、続きにうんちく。" target="_self" href="http://wannabe.sweet-smile.org/ent/we_live_in_serenebach.htm"><span class="blogpeople-people-site">the world loves the wannabees.</span>-「Serene Bach に住まう人々」を立ち上げました</a>
				</li>
			</div>
		</div>
	</ul>
	<div class="blogpeople-people-credit">
		<a href="http://riszw.com/"><img id="bp-p-left-" style="border: medium none ; margin-right: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-left.gif"/></a><a target="_blank" href="http://www.blogpeople.net/people/entry_69.html"><img border="0" alt="現在の記事数: 5件" src="http://www.blogpeople.net/display/people/people00069.gif?pid=848"/></a><a href="http://riszw.com/"><img id="bp-p-right-" style="border: medium none ; margin-left: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-right.gif"/></a><img src="http://www.blogpeople.net/people/images/0.gif?p=js&id=69&uid=7a659"/><br/>
	</div>
</div>
<div class="blogpeople-people-powered-by">
	<a href="http://www.blogpeople.net/people/">Powered by BlogPeople</a>
</div>

リンクリスト table タグ形式

PEOPLE内ランダムリンク現在の記事数: 5件PEOPLE内ランダムリンク

ソースは以下の通り。

<table class="blogpeople-people" width="0" cellspacing="0" cellpadding="0" border="0">
	<tbody>
		<tr class="blogpeople-people-tr-title">
			<td class="blogpeople-people-td-title">
				<div class="blogpeople-people-title">
					<a title="ウェブログツール「sb」または「Serene Bach」に関する記事や情報を共有するコミュニティです。他のブログツールでの参加も歓迎します。ただ、短すぎるのでキーワードに「sb」「SB」は入れません、ごめんなさい。" target="_blank" href="http://www.blogpeople.net/people/entry_69.html">Serene Bach に住まう人々</a>
				</div>
			</td>
		</tr>
		<tr class="blogpeople-people-tr">
			<td class="blogpeople-people-td">
				<div id="ovrssll326-2" style="visibility: visible;">
					<div>
						<div class="blogpeople-tbp-link">
							<a title="女性にうれしいおしゃれな飲食ビル" onclick="overturePrClick('ovrssll326');" target="_blank" href="http://rc20.overture.com/d/sr/?xargs=15KPjg15NSn5amwr%2Dvfb%5FNTeSGy1gaxca598hqDJl5GtFc5iMxXON6Z6rDms1xTuxxv1PdxPOX%5F6MSJfv4m%5FyIEQeLTFeKGvWugoHByY07N66jWYlxsOwhwerpnI9JOHmyWl%5FxdNO%2Dzt78N8CofnND%5FY8DzQvqpbJjwM23wOEbEbPR3lJuqg3Zc8RQpLZ408HHWpoLS7skCqqckFKSdulC3Y0mna2TDjMSKSqrkmsI2CiBIjdp%5FqPMfosXuLX5hIiZd%2Dv1iogKZpcgUifQdc0kSa0uaFnQuqkxPaUIxV1he%2D7%5FBArtol0irLiO2%5F%2DJdYM0%5FmXwCZCMeCu3DgomICoyB%5FKrbw3IdCUx6gjWK5hFZ5j0ohaHQ7yGG3Flb1MXvt61GfY2">[PR]チョムチョム秋葉原OPEN</a>
						</div>
					</div>
				</div>
			</td>
		</tr>
		<tr class="blogpeople-people-tr">
			<td class="blogpeople-people-td">
				<div>
					<span class="blogpeople-people-date">08/05/16 05:57:</span><a title="2008/05/16 05:57:36:Riszw ここ最近の Serene Bach に関するニュースなどをご紹介します。BlogPeople PEOPLE「Serene Bach に住まう人々」the world loves the wannabees. のふうこさん..." target="_self" href="http://feeds.feedburner.jp/~r/riszw/~3/2245777/eid19.html"><span class="blogpeople-people-site">Riszw</span>-最近の Serene Bach 界隈の動きについて</a>new
				</div>
			</td>
		</tr>
		<tr class="blogpeople-people-tr">
			<td class="blogpeople-people-td">
				<div>
					<span class="blogpeople-people-date">08/05/15 08:14:</span><a title="2008/05/15 08:14:15:the world loves the wannabees. BlogPeople PEOPLE の話ばっかりですみません。観戦記も 5 件くらいたまってるのに〜(それは別に誰も期待していない)Serene Bach に住まう人々があま..." target="_self" href="http://wannabe.sweet-smile.org/ent/our_bach_started_to_run.htm"><span class="blogpeople-people-site">the world loves the wannabees.</span>-やっぱりか……</a>
				</div>
			</td>
		</tr>
		<tr class="blogpeople-people-tr">
			<td class="blogpeople-people-td">
				<div>
					<span class="blogpeople-people-date">08/05/09 19:36:</span><a title="2008/05/09 19:36:50:the world loves the wannabees. BlogPeople でおなじみのアイビィ・コミュニケーションズさんから新しいサービスが公開されました。その名も BlogPeople PEOPLE。さっそく sb もしくは Serene Bach の「PEOPLE」として「Serene Bach に住まう人々」というのを立ち上げてみました。以下、続きにうんちく。" target="_self" href="http://wannabe.sweet-smile.org/ent/we_live_in_serenebach.htm"><span class="blogpeople-people-site">the world loves the wannabees.</span>-「Serene Bach に住まう人々」を立ち上げました</a>
				</div>
			</td>
		</tr>
		<tr class="blogpeople-people-tr-credit">
			<td class="blogpeople-people-td-credit">
				<a href="http://neige.chu.jp/blog/"><img id="bp-p-left-" style="border: medium none ; margin-right: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-left.gif"/></a><a target="_blank" href="http://www.blogpeople.net/people/entry_69.html"><img border="0" alt="現在の記事数: 5件" src="http://www.blogpeople.net/display/people/people00069.gif?pid=848"/></a><a href="http://p15.jp/"><img id="bp-p-right-" style="border: medium none ; margin-left: 3px;" alt="PEOPLE内ランダムリンク" src="http://www.blogpeople.net/people/images/arrow-right.gif"/></a><img src="http://www.blogpeople.net/people/images/0.gif?p=js&id=69&uid=7a659"/>
			</td>
		</tr>
	</tbody>
</table>
<div class="blogpeople-people-powered-by">
	<a href="http://www.blogpeople.net/people/">Powered by BlogPeople</a>
</div>

CSS を書く

わかりやすいように色をつけただけですが、調整するときのひな形としてお使いください。

/* div タグと ul・li タグのリンクリスト用
=================================================================== */

/* 全体 ( div と ul・li ) */
div.blogpeople-people {
    padding: 10px;
    border: 3px solid #000000;
    background-color: #ffffff;
}

/* 話題のタイトル */
.blogpeople-people-title {
    background-color: red;
}

/* 広告部分 */
.blogpeople-tbp-link {
    margin-bottom: 10px;
    text-align: right;
}

/* リスト */
.blogpeople-people-link {
    margin-bottom: 10px;
    background-color: blue;
}

/* 日付部分 */
.blogpeople-people-date {
    background-color: yellow;
}

/* 記事のサイト名 */
.blogpeople-people-site {
    background-color: orange;
}

/* 話題への画像リンク */
.blogpeople-people-credit {
    text-align: center;
}

/* BlogPeople へのリンク */
.blogpeople-people-powered-by {
    text-align: right;
}


/* table タグのリンクリスト用
=================================================================== */

/* 全体 ( table ) */
table.blogpeople-people {
	
}

/* 話題のタイトル */
.blogpeople-people-td-title {
    background-color: red;
}

/* 広告部分 */
.blogpeople-tbp-link {
    margin-bottom: 10px;
    text-align: right;
}

/* リスト */
.blogpeople-people-td {
    background-color: blue;
}

/* 日付部分 */
.blogpeople-people-date {
    background-color: yellow;
}

/* 記事のサイト名 */
.blogpeople-people-site {
    background-color: orange;
}

/* 話題への画像リンク */
.blogpeople-people-td-credit {
    text-align: center;
}

/* BlogPeople へのリンク */
.blogpeople-people-powered-by {
    text-align: right;
}

div 多すぎね?

こんなに div ばっかりだったら、見通しの悪さはテーブルレイアウトと変わらんのではないかと思いました。
ul・li タグのリンクリストでは ul の中に div が!
システム的にこうしないとならない理由があるのなら是非伺いたいです。

かっちょいいスタイル作ってやろうじゃないのと始めたのですが、div の大群に押しつぶされてしまいました。と言い訳しておく。
言い訳ついでにもう一つ、</div> の手前に </p> が入っちゃっているのは WordPress さんのせいだと思います。ソース内のタブ文字と改行を取り除いたら大丈夫になりましたヽ(・ω・)ノ

最後に役に立たない豆知識。
最近更新されたリンクサイト名の前後に表示できるテキストやサイト名と記事タイトルのセパレータでは半角スペースが使えませんでした。
&nbsp; と入力したらいいのかなと思ってやってみましたが、&amp;nbsp; と変換されてしまうようでダメでした(´・ω・`)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です