nlog(n): アーカイブにカテゴリ表示のアイコンをつけるには

Sun May 16, 2004

アーカイブにカテゴリ表示のアイコンをつけるには

カテゴリアーカイブにカテゴリ表示のアイコンをつけたいときは <$MTArchiveTitle$> タグを使うとよい。

■ ■ ■

カテゴリを表示するのにアイコンを使いたい場合、カテゴリ表示のアイコンをつけるにはの方法が有効。しかし、カテゴリアーカイブのテンプレートに <$MTCategoryLabel$> タグを使うと再構築に失敗してしまうことがある。サイドバーなどにそのアーカイブが何のアーカイブかを表示したい時である。そして、リビルド時のエラーには原因が表示されないのが結構キビシイ。

エントリーの作成に失敗

このサイトのカテゴリアーカイブテンプレートには次のように書いてある。画像ファイル名を<$MTArchiveTitle$>.gif としているところがポイント。実際の動作は、タイトルの右のアイコンをクリックするか、

から確認できる。左側の「Category Archives」メニューの直ぐ下にアイコンが表示される。

<div class="sidetitle">
Category Archives
</div>
<div class="button">
<img src ="<$MTBlogURL$>mticons/<$MTArchiveTitle$>.gif" alt="<$MTArchiveTitle$>"
border="0" width="80" height="15" />
</div>
<div class="side">
<MTEntries>
<a href="#<$MTEntryID pad="1"$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

各エントリへのリンクは、個別エントリへのリンクではなく、カテゴリページ内のタイトルへのリンクとしている。

アイコン用の「button」クラスのスタイルシートでの記述は次のようになっている。

.button {text-align: center; margin: 3px; border: 0px;}

各エントリにカテゴリ表示を付けたい場合は、<$MTCategoryLabel$> タグが使える。これはカテゴリ表示のアイコンをつけるにはと同じものである。

<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif" alt="<$MTCategoryLabel$>"
border="0" width="80" height="15" align="right" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>

2005年1月22日追記:
img 要素の中では、border 属性と align 属性は推奨されていません。XHTML 1.0 Transitional では許されていますが、XHTML 1.0 Strict 以降では間違いとなります。nlog(n): カテゴリ表示のアイコンをつけるにはと同様に、border="0" と align="right" はスタイル属性として style="border: none; float: right;" とすることで同様の効果が得られ、文法的にも正しくなります。最後の例は次のようになります。

<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif" alt="<$MTCategoryLabel$>"
style="boder: none; float: right;" width="80" height="15" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>

2005年5月3日追記:
インラインスタイルはスタイルシートに移すことができ，そうした方が(見た目は変わりませんが)より美しくなるのでお勧めです(nlog(n): 画像のインラインスタイルをスタイルシートへ移す)。img 要素のスタイルは全てスタイルシートに持ち込むことができます。

<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif" alt="<$MTCategoryLabel$>" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>

Posted by n at 2004-05-16 15:29 | Edit | Comments (1) | Trackback(2)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

出来た！かゆいところに手が届いた！カテゴリアーカイブ内にカテゴリアイコンを表示させる
まずは　nlog(n)さんに感謝しなければならない。ずっと、エラーで苦しんでいた私は、心底感動した。更新したのは、微妙なところなのだがマガジーンズの方で、カテゴリアーカイブに飛ぶとカテゴリーアイコンが、表示されないという問題を解決することが出来た。 ... Trackbacked from: マガジーンズ・技術フォーラム at June 17, 2004 00:47

カテゴリーをアイコンで表示
今回のデザイン変更で、カテゴリーをアイコンで表示してみた。うん。なんかいいかんじ、かも。自己満足ですが。... Trackbacked from: CROQUE★MONSIEUR at September 02, 2004 17:54

Comments

はじめまして。
nさん（nさんで良いのですよね？）のをヒントに設置させていただきました。勉強にもなりました、ありがとうございます。

Posted by: hanamara at May 02, 2005 19:49