法則67 ブログ記事ごとに自動でデザインを変更する

ブログ記事全体を表示するテンプレートソース

<div class="entry<$MTEntryDate format="%d"$>">
<h1><$MTEntryTitle$></a></h1>
<$MTEntryBody$>
</div>

出力される（X）HTMLソース

<div class="entry01">
<h1>1 束おまけキャンペーン実施中！ </a></h1>
～（略）～
</div>

class名ごとに背景画像を変えるCSSソース

div.entry01,

div.entry02,

div.entry03,

div.entry04,

div.entry05,

div.entry06,

div.entry07,

div.entry08,

div.entry09,

div.entry10 {

    background: url(/img/background_01.jpg) 100% 100% no-repeat;

}

div.entry11,

div.entry12,

div.entry13,

div.entry14,

div.entry15,

div.entry16,

div.entry17,

div.entry18,

div.entry19,

div.entry20 {

    background: url(/img/background_02.jpg) 100% 100% no-repeat;

}

div.entry21,

div.entry22,

div.entry23,

div.entry24,

div.entry25,

div.entry26,

div.entry27,

div.entry28,

div.entry29,

div.entry30 {

    background: url(/img/background_03.jpg) 100% 100% no-repeat;

}

div.entry31,

div.entry32,

div.entry33,

div.entry34,

div.entry35,

div.entry36,

div.entry37,

div.entry38,

div.entry39,

div.entry40 {

    background: url(/img/background_04.jpg) 100% 100% no-repeat;

}

div.entry41,

div.entry42,

div.entry43,

div.entry44,

div.entry45,

div.entry46,

div.entry47,

div.entry48,

div.entry49,

div.entry50 {

    background: url(/img/background_05.jpg) 100% 100% no-repeat;

}

div.entry51,

div.entry52,

div.entry53,

div.entry54,

div.entry55,

div.entry56,

div.entry57,

div.entry58,

div.entry59,

div.entry00 {

    background: url(/img/background_06.jpg) 100% 100% no-repeat;

}

• 第4章 Webサイトの価値を高めるデザインの法則