小粋空間  -  a cheap joke and a play on words site

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

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

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

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

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

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

２．背景画像のアップロード

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

３．スタイルシートの修正

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

４．スタイルシートの修正

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

<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>

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

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