BlogPeopleのパーツをCSSで修飾する
ブログパーツである、BlogPeople。ブログへの貼り付けはJavascriptとなっているが、そのまま貼り付けても、下の画像のようになんとも味気ない表示なってしまう。
そこで、この表示をCSSで修飾してみる。
実際にHTMLとして転送されてくるのは、以下のような内容になっている。
<div class="blogpeople-main">
<p><span class="blogpeople-linklist">リンクリスト</span>
<br/></p>
<div class="bp-ll2-blog-site">
<a title="サーバー障害？ 更新日:08年05月12日(月) 13時03分" target="_blank" href="http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fwww.h-fj.com%2Fblog">The blog of H.Fujimoto</a><br/>
</div>
<div class="bp-ll2-blog-site">
<a title="SubCategoryDepth/SubFolderDepth プラグイン 更新日:08年05月12日(月) 02時22分" target="_blank" href="http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fwww.koikikukan.com%2F">小粋空間</a><br/>
</div>
と言う感じになる。
ということで、以下のようなCSSを適用すると、
/*BlogPeaple*/
.blogpeople-main {
padding: 5px;
}
.blogpeople-linklist {
padding-top: 3px;
font-weight: bold;
color: #00f;
}
.bp-ll2-blog-site {
padding-left: 5px;
}
すると、こうなる。
クラス名が書いてあるので、他にもいろいろCSSで修飾はできそうですね。
コメントする