サイドバーリスト部分と記事一覧などの変化（nth-child）

★　サイドバーリスト部分と記事一覧などの変化（nth-child）

●　内容

①　サイドバーのテーマ一覧・最近の記事一覧・月間アーカイブ・読者一覧などの
　　リスト部分を奇数、偶数単位などで背景色や文字色を変えます。
②　even(奇数） odd(偶数) 1(1件目) 2n(２の倍数） 3n(３の倍数）などの
　　指定が可能です。
③　ＩＥ8以下のブラウザでは、:nth-child()疑似クラスのＣＳＳは機能しないので
　　jQueryのスクリプトを利用します。
④　この記事では、サイドバー全体のリスト部分をターゲットに説明していますが、
　　テーマ一覧のみなど個別に指定も可能です。
⑤　この記事では、背景色と文字色で紹介していますが、文字の大きさや、
　　背景画像などのCSSでもできます。
⑥　例

●　やり方

①　フリープラグインに下記を追記する(j_css_setの不要な行は消してください）

●　説明

・　下記はフリープラグインに１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

・　下記は既にフリープラグインに書かれていれば不要です。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>

・　j_css_set(".skinSubList li:nth-child(even)","background-color","#111111");

　　形式：
　　j_css_set("ＣＳＳのセレクタ名","ＣＳＳのプロパティ","ＣＳＳの値");

".skinSubList li:nth-child(even)"・・・サイドバーのリスト部分で even （奇数）を指定
"background-color"・・・背景色
"#111111"・・・値（色コード）

・　j_css_set(".skinSubList li:nth-child(even) a","color","#3388aa");

".skinSubList li:nth-child(even) a"・・・サイドバーのリスト部分のリンクで even （奇数）を指定
"color"・・・文字色
"#3388aa"・・・値（色コード）

・　j_css_set(".contentsList li:nth-child(even)","background-color","#111111");

".contentsList li:nth-child(even)"・・・各種一覧（記事一覧など）のリスト部分で even （奇数）を指定
"background-color"・・・背景色
"#111111"・・・値（色コード）

・　nth-child(even)

even・・・奇数
odd・・・偶数
2n+1・・・偶数
1・・・1番目
2・・・2番目
2n・・・2の倍数
3n・・・3の倍数
4n・・・4の倍数

●　ソース内容

function j_css_set(j_selector,j_property,j_value){// jQuery CSS
$(function(){
$(j_selector).css(j_property,j_value);
});}

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

サイドバーリスト部分と記事一覧などの変化（nth-child）