カテゴリーリストにカスタムフィールドの画像を表示する

カテゴリーリストにカスタムフィールドの画像を表示する

Posted at March 26,2008 2:05 AM
Tag:[Category, CustomField, MovableType]

Movable Type のカテゴリーリストに、カスタムフィールドの画像を表示するカスタマイズです。
次のように、カテゴリー別の画像を簡単に与えることができます。

カテゴリーリストにカスタムフィールドの画像を表示

1.カスタムフィールドの作成

カテゴリーにカスタムフィールドを作成します。ここでは CategoryImage という名前のテンプレートタグにします。

カテゴリーリストにカスタムフィールドの画像を表示

2.カテゴリーに画像の追加

各カテゴリーに表示されている「Imageを選択」をクリックして、画像を追加します。

カテゴリーリストにカスタムフィールドの画像を表示

画像を選択した後、必ず保存をクリックしてください。何回か試して正常に表示されないことがあったのですが、どうも保存をクリックするのを忘れていたようです。

カテゴリーリストにカスタムフィールドの画像を表示

3.サブテンプレートの追加

冒頭のサンプルは、デフォルトテンプレートのサイドバーに下記のサブテンプレートを追加しました。階層表示でない、MTCategories タグを久しぶりに使ってみました。

青色部分がカスタムフィールド用タグです。

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
  <h3 class="widget-header">カテゴリ</h3>
  <div class="widget-content">
    <ul class="widget-list">
    <mt:Categories>
      <mt:ifNonZero tag="mt:CategoryCount">
      <li class="widget-list-item"><MTCategoryImageAsset><img src="<$MTAssetURL$>" style="vertical-align:middle" /> </MTCategoryImageAsset><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
      <mt:else>
      <li class="widget-list-item"><MTCategoryImageAsset><img src="<$MTAssetURL$>" style="vertical-align:middle" /> </MTCategoryImageAsset><$mt:CategoryLabel$>
      </mt:ifNonZero>
      </li>
    </mt:Categories>
    </ul>
  </div>
</div>
</mt:IfArchiveTypeEnabled>

赤色部分は、画像の垂直方向の位置揃えのための style 属性です。サンプルでは img 要素に直接与えてしまっているので、適宜スタイルシートで設定するようにしてください。

関連記事
トラックバックURL


コメント

この機能、良いですよね。
カテゴリに画像。
ヘッダーメニューの下にそれぞれのカテゴリ画像を配置するだけで、
カテゴリ別なのに、コンテンツごとに
ページを作ったみたいで、素敵です。
 ↑
この説明、伝わるかどうか心配です(笑)

[1] Posted by shiihara : March 27, 2008 12:50 PM

>shiiharaさん
こんばんは。
コメントありがとうございました。
なんとなく伝わりました(笑)。

[2] Posted by yujiro logo : March 31, 2008 12:46 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)