Home > Movable Type > タイトルにカテゴリー別アイコンを表示

タイトルにカテゴリー別アイコンを表示

エントリーのタイトルにカテゴリー別のアイコンを貼り付ける方法です。
自己満足カスタマイズかもしれませんがアクセントになっていいかなと思ってやってみました。

<参考元>
nlog(n): カテゴリ表示のアイコンをつけるには

今回このためにアイコンを自作してみました。

カテゴリー別アイコン

…といってもDingbatと呼ばれる絵やシンボルのフォントを使っただけですが…

以下導入方法です↓

1.)カテゴリー名の確認
*半角英数字になっているか?
*スペースは入っていないか?
以上を確認してください。
-(ハイフン),_(アンダーバー)はOKです。

2.)カテゴリーごとのアイコンを用意
このときアイコンのファイル名はカテゴリー名と同じにします。

3.)サーバーにUP
blogのルートディレクトリにアイコン用のディレクトリを作ってその中にUPします。
ワタシは「mticons」というディレクトリを作りました。

4.)テンプレートを修正
アイコンを表示したいテンプレートの中から<$MTEntryTitle$>を探してその直前に以下のソースを追加します。
ワタシはインデックス以外にも全てのテンプレートに追加しました。

アイコンをクリックするとそのカテゴリーページへ飛ぶようになっています。
alt属性はワタシの場合カテゴリーの説明を表示しているので<$MTCategoryDescription$>タグを使っています。
カテゴリーの説明を設定していない場合は<$MTCategoryLabel$>を使ってください。

後は保存してリビルドで完了♪

タイトルの表示例

↑こんな感じになりました。
アイコンが大きすぎて文字のバランスが悪いですね…

Home > Movable Type > タイトルにカテゴリー別アイコンを表示

Search
Feeds

Page Top