TopMovable Typeカスタマイズカテゴリー > 2009年11月
2009年11月 2日

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

November 2,2009 1:33 AM
Tag:[, , ]
Permalink

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項以降と同様です。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3