186(guide)

説明

CSS関係のTipsとProxomitronのフィルタの話がメインです。

2000-02-04 Friアンテナを上に(ヘッドライン風)

[] アンテナをヘッドライン風に

template指定無し

アンテナやキーワードをヘッドライン風に表示するcss。色々な都合でh1は見えないようしている点注意。positionを上手く使えばh1を残して余分なh2を省略できるが、ま、そこはそれ。

ヘッダー部分に以下を記述。

<div class="headline">
<hatena name="antenna" listlimit="2" titlelength="15" dateformat="" template="hatena-module">
</div>
<h2>日記のタイトル</h2>

cssに以下を記述。

div.headline{
 width: 100%;
 height: 1.3em;
 padding: 0px;
 overflow :hidden;
 font-size: small;
 border-bottom: solid 1px #ff0000;
}
h1{
 display: none;
}
.headline .hatena-moduletitle {
 display: inline;
}
.headline .hatena-modulebody {
 display: inline;
}
.hatena-modulebody ul {
 display: inline;
}
.hatena-modulebody ul li {
 display: inline;
 list-style-type: none;
}

WinXP+(IE6.0|Opera6.05|Mozilla 1.2.1)で確認済。

datatime=""にすると見栄えが好い。

background-colorやcolorは適当に付け加えて改造すると宜し。

アンテナとキーワードと二つ以上作る場合は、p.recentitemの幅を決めておいて、右側にborderを入れるのも良いと思うね。僕は。

えーとtemplate指定がなかったときの話なので気にしないで.

以上186(n?) 2003/03/17 Like a Headlineより改変。