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

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で確認したところ、若干の差がありますが、全然許容範囲です(笑)
フォントサイズを変更しても、崩れることはないはずです。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/364

Comments