個別記事

前後の記事

エントリー毎のカテゴリをCSSで調整

この記事が属するカテゴリー
CSS Movable Type

BLOG質問箱さんの各エントリーにカテゴリ名を表示するに各エントリにカテゴリを表示する方法がのっていました。

BLOG質問箱さんのは、カテゴリ毎エントリタイトルの次の行に右寄せするものでしたが、このサイトではタイトルと同じラインに右寄せで設置してみました。

まず、Stylesheetテンプレートにカテゴリ用のclassを指定します。（フォント・サイズ・色はお好みで）

.content p.category {
        font-family: Verdana, Arial, sans-serif;
        font-size: x-small;
        color:#666666;
        text-align:right;
        margin:0 0 -2em 0;
}

マージンの下部にマイナス指定しているのがミソです。
追加するカテゴリはブロック要素の<div>で囲み、さらに挿入する位置もブロック要素の<h2>タグと<h3>タグの間です。

<h2><$MTEntryDate format="%x"$></h2>
</MTDateHeader>

<p class="category">[ <MTEntryCategories glue=", ">
<ahref="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
</MTEntryCategories>]</p>

<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>

<$MTEntryBody$>

ここで、カテゴリの下部をCSSでマイナス指定することにより、エントリタイトルの横にくると言う仕組みです。
NN7.1とIE6.0で確認したところ、若干の差がありますが、全然許容範囲です（笑）
フォントサイズを変更しても、崩れることはないはずです。

2004-10-05T12:48:03+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/15

"エントリー毎のカテゴリをCSSで調整"へのトラックバックはまだありません。

コメント

"エントリー毎のカテゴリをCSSで調整"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)