まずは変化させるスタイルシートを２つ用意します。
Ninjaブログの通常テンプレートのEntryInnerBlockというclass指定で指定される記事部分を切り替えることにします。
(サンプルに挙げたテンプレートは違うclass指定を使用してます。)
/*記事表示部分の背景や余白等の設定*/
.EntryInnerBlock {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#99CCFF;
}
.EntryInnerBlock2 {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#FFCCFF;
}
通常のスタイルはEntryInnerBlockですが、EntryInnerBlock2としてもうひとつスタイルを指定しました。見て分かると思いますが、背景色の色が
水色と
桃色になるように指定してあります。
スタイルシートが用意できたら、次はHTMLにjavascriptを組み込みます。
HTMLから次の部分を探します。
<div class="EntryInnerBlock">
この部分を▼のようなスクリプトに書き換えます。
<script type="text/JavaScript">
<!--
if(<!--$entry_no--> % 2 == 0) document.write('<div class="EntryInnerBlock">');
if(<!--$entry_no--> % 2 == 1 || <!--$entry_no--> % 2 == 1/2) document.write('<div class="EntryInnerBlock2">');
// -->
</script>
<noscript><div class="EntryInnerBlock"></noscript>
水色の部分は、背景色を水色にするスタイルシートを組んでいる部分です。
意味としては、記事番号を２で割り、余りが0であれば
EntryInnerBlockというclassを表示するという意味になります。
また
桃色の部分は、背景色を桃色にするスタイルシートを組んでいる部分で、意味は、記事番号を２で割ったときの余りが1かもしくは２分の１であったときは
EntryInnerBlock2というclass指定を表示するという意味になります。
最後に
青色で表示している部分はjavascriptがOFFであった場合にはこのスタイルを指定するという意味になります。
これをそのまま忍者の通常テンプレートに使用したサンプル画像が以下のものになります。
共有テンプレートでは背景色に白(＃ffffff)と薄い緑(#f7fff0)を指定していますが、分かりやすいようにはっきりした色をここでは使いました。
応用編もし３つを切り替えるとすればこうなります。
.EntryInnerBlock3 {
width:500px;
margin: 0px 0px 0px 0px ;
padding:0px;
text-align:left;
background-color:#FFFFFF;
}
まずは上のように背景色が白のスタイルをさらにひとつ追加しておきます。
そしてスクリプトは次のようになります。
<script type="text/JavaScript">
<!--
if(<!--$entry_no--> % 3 == 0) document.write('<div class="EntryInnerBlock">');
if(<!--$entry_no--> % 3 == 1 || <!--$entry_no--> % 3 == 1/3 ) document.write('<div class="EntryInnerBlock2">');
if(<!--$entry_no--> % 3 == 2 || <!--$entry_no--> % 3 == 2/3 ) document.write('<div class="EntryInnerBlock3">');
// -->
</script>
<noscript><div class="EntryInnerBlock"></noscript>
これを忍者の新規テンプレートに当てはめたプレビューがこれ▼
いろいろ応用方法はあると思います。記事タイトルを入れ替えても良いと思いますし。
ただ、難点はあくまで記事番号に基づいているってところでしょうか？
非公開の記事があったり、カテゴリーページで記事番号が混ざってるとあんまり意味がないのです(＾-＾；)
使おうと思われた方はテキトーに使ってください♪
変なところとかありましたらこの記事にコメントください<(_ _)>
