★ サイドバーリスト部分と記事一覧などの変化(nth-child)
● 内容
① サイドバーのテーマ一覧・最近の記事一覧・月間アーカイブ・読者一覧などの
リスト部分を奇数、偶数単位などで背景色や文字色を変えます。
② even(奇数) odd(偶数) 1(1件目) 2n(2の倍数) 3n(3の倍数) などの
指定が可能です。
③ IE8以下のブラウザでは、:nth-child()疑似クラスのCSSは機能しないので
jQueryのスクリプトを利用します。
④ この記事では、サイドバー全体のリスト部分をターゲットに説明していますが、
テーマ一覧のみなど個別に指定も可能です。
⑤ この記事では、背景色と文字色で紹介していますが、文字の大きさや、
背景画像などのCSSでもできます。
⑥ 例
![リアナのカスタマイズ日記(CSS編集用デザイン)](https://stat.ameba.jp/user_images/20130125/23/new-blue-777/e9/87/p/t02200313_0309044012391873766.png?caw=800)
● やり方
① フリープラグインに下記を追記する(j_css_setの不要な行は消してください)
<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>
<script type='text/javascript'>
j_css_set(".skinSubList li:nth-child(even)","background-color","#111111");
j_css_set(".skinSubList li:nth-child(even) a","color","#3388aa");
j_css_set(".contentsList li:nth-child(even)","background-color","#111111");
</script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
j_css_set(".skinSubList li:nth-child(even)","background-color","#111111");
j_css_set(".skinSubList li:nth-child(even) a","color","#3388aa");
j_css_set(".contentsList li:nth-child(even)","background-color","#111111");
</script>
● 説明
・ 下記はフリープラグインに1つあれば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("CSSのセレクタ名","CSSのプロパティ","CSSの値");
".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);
});}