タイトルにカテゴリ表示の画像
をつける。
■ ■ ■
カテゴリを作成する。カテゴリ名として気をつける点は以下の2点。
画像ファイルを用意する。
- GIF, PNG など形式は何でもよいが、同じ形式にする
- ファイル名はカテゴリ名と同じにする
- 拡張子の大文字小文字を統一する
例えば、MovableType.gif, Linux.gif などである。GIF のライセンスが気になる場合は PNG 形式がお勧め。
画像ファイルをアップロードする。
- Main Index が置かれるディレクトリに mticons などの名前でディレクトリを作る
- 作ったディレクトリに画像ファイルをアップロードする
ディレクトリ名は「icons」や「images」など好きなものでよいが、注意が必要な場合もある。Web サーバが Apache の場合、デフォルトでは「icons」というディレクトリ名は Apache の画像ディレクトリとしてあらかじめ割り当てられており、別のディレクトリを参照するようになっている。画像ファイルが表示されない場合は、ディレクトリを直接参照してみるとよい。
カテゴリ名は <$MTCategoryLabel$> として参照できる。<$MTCategoryLabel$> タグは <MTEntryCategories> と </MTEntryCategories> で挟むことがポイントである。自分で用意した画像の大きさを width, height 指定し、alt 属性も指定した方がよい。
<MTEntryCategories>
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif"
border="0" width="80" height="15" alt="<$MTCategoryLabel$>" />
</MTEntryCategories>
このウェブログで使っているコードは次の通り。align="right" で右寄せをしている。画像の指定の後にタイトルをしているところがポイント。タイトルの後に align="right" で画像を指定すると、画像がタイトルより一行下に表示されてしまうのである。
<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif"
border="0" width="80" height="15" alt="<$MTCategoryLabel$>"
align="right" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>
<a>...</a> の間には改行を入れないのが正しい。
以前、タイトル部分に表を作って、左側をタイトル、右側を画像にして、幅を width="100%" と指定する方法を試してみたが、ブラウザによって表示が違ってしまった。Mozilla 1, Netscape 7 では予想通りの表示となったが、IE 6 では表が右側にはみ出てしまった。
Main Index のビルドに失敗する場合は、カテゴリページが作られているかをチェックする。カテゴリページがない場合、Main Index に書いたコードが正しくてもビルドに失敗してしまう。カテゴリページを作るには、メインメニュー→BLOGの設定→アーカイブの設定で、Category にチェックを入れてビルドすればよい。
ボタンを作るオンラインスクリプトは(アクセス集中のためか、よくダウンしている)
これを簡単に使うためのインターフェイスは
で公開されている。
カテゴリに日本語を表示したい場合は <$MTCategoryDescription$> タグを使う (カテゴリ別投稿数を表示するには)。
2005年1月9日追記:
img 要素の中では、border 属性と align 属性は推奨されていません。上の2つのコードの該当する部分は style 属性で記述した方がよいようです。
<MTEntryCategories>
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif"
style="border: none;" width="80" height="15" alt="<$MTCategoryLabel$>" />
</MTEntryCategories>
align="right" は style="float: right;" と書き直すことで同様の効果が得られ、書式的にも正しくなります。
<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif"
style="border: none; float: right;" width="80" height="15" alt="<$MTCategoryLabel$>" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>
2005年4月22日追記:
さらに，style="..." というインラインスタイルは削除し，これをスタイルシートに記述する方が，構造的に正しくなります(nlog(n): 画像のインラインスタイルをスタイルシートへ移す)。
<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>">
<img src="<$MTBlogURL$>mticons/<$MTCategoryLabel$>.gif"
alt="<$MTCategoryLabel$>" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>
スタイルシートには次を追加しておきます。
.title img { border: none; float: right; width: 80px; height: 15px; }
Posted by n at 2004-02-10 15:27 | Edit | Comments (2) | Trackback(3)
カテゴリ表示のアイコンをつけるには
この方法を使わせていただいております。
過去のエントリにコメントつけて申し訳ないのですが、
こちらのブログのように、カテゴリアーカイブの左側に
メニューがありますが、その一番上の「Category Archives」 の
すぐ下のアイコンのように、カテゴリアーカイブでアイコンを
カテゴリ名代わりに表示させるにはどうしたらよいのでしょうか。
ほかのアーカイブだったら大丈夫なのですが
こちらで紹介されているタグの記述をカテゴリアーカイブに使うと、リビルドに失敗してしまいます。
お時間があれば教えていただけませんか？
Posted by: pocco at May 16, 2004 01:39そういえば、これには悩んだ記憶があります。
Posted by: n at May 16, 2004 16:37http://nlogn.ath.cx/archives/000164.html
に詳細を書きました。