Movable Type でカテゴリ別にブログ記事の背景画像を切り替える(カスタムフィールド編)

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える(カスタムフィールド編)

Posted at November 2,2009 1:33 AM
Tag:[Category, CSS, MovableType]

Movable Type 4 以降のバージョンで、カテゴリ別にブログ記事の背景画像を切り替えるカスタマイズを紹介します。

先日エントリーした「Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」では、手動でアップロードした画像を利用する方法を紹介しましたが、このエントリーではカスタムフィールドを利用した場合の差分を示します。

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

ブログ管理画面の「カスタムフィールド」→「新規」で、次のようなカスタムフィールドを作成します。ここでは次のような設定にします。

  • システムオブジェクト:カテゴリ
  • カスタムフィールド名:背景画像
  • 種類:画像
  • テンプレートタグ名:CategoryBackgroundImage

カテゴリのカスタムフィールドの作成

2.背景画像のアップロード

カテゴリの編集画面の「背景画像」から、そのカテゴリの背景画像にしたい画像をそれぞれアップロードします。アップロード後は「変更を保存」をクリックするのを忘れないようにしてください。

カテゴリのカスタムフィールドの作成

3.スタイルシートの修正

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の2項と同じです。

4.スタイルシートの修正

Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の3項の代わりに、スタイルシートに以下の内容を追加します。

<mt:Categories>
  <mt:CategoryCustomFields>
    <mt:If tag="CategoryBackgroundImage">
      <mt:CategoryBackgroundImageAsset>
.img_<mt:CategoryDescription /> {
    background: url(<mt:AssetURL />) no-repeat left top;
}
      </mt:CategoryBackgroundImageAsset>
    </mt:If>
  </mt:CategoryCustomFields>
</mt:Categories>

追加後、スタイルシートの再構築を行ないます。これでカテゴリ別の背景画像用のセレクタが出来上がります。

5項以降の設定は「Movable Type でカテゴリ別にブログ記事の背景画像を切り替える」の4項以降と同様です。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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