記事単位に背景色・文字色などを変える

★　記事単位に背景色・文字色などを変える

●　内容

①　ブログのホームやブログホームから次のページをクリックするページは、
　　１ページに何件記事を表示するかによって１～１０件まで記事が表示できます。
　　その記事を記事単位に背景色などを変えます。

　　ブログ記事の表示数はアメブロの基本設定から１件、３件、５件、１０件を
　　選択することができます。

②　この記事では、記事の背景色と記事の文字色について紹介します。
③　Array部分の色の指定は、最大１０件指定できます。
　　色の指定数が記事数より少なければ、色の指定数以上の記事には設定されません。


●　やり方

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

<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'>
var ccolor = new Array("#000000","#000022","#000033","#000044","#000055","#000066","#000077","#000088","#000099","#0000aa");
Art_c_chg();// 記事毎に文字色を変える
var bcolor = new Array("#ffaaff","#0000aa","#ffaaff","#aa0000","#ffaaff","#00aa00","#ffaaff","#ffffff","#ffaaff","#cccccc");
Art_b_chg();// 記事毎に背景色を変える
</script>

●　説明

・　下記はフリープラグインに１つあれば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>



・　Art_c_chg();// 記事毎に文字色を変える
var ccolor = new Array("#000000","#000022","#000033","#000044","#000055","#000066","#000077","#000088","#000099","#0000aa");

var ccolor = new ArrayとArt_c_chg();は、１つの処理です。

１ページに表示する最大記事数が３件であれば、下記の様に設定できます。
var ccolor = new Array("#000000","#000022","#000033");





・　Art_c_chg();// 記事毎に文字色を変える
var bcolor = new Array("#ffaaff","#0000aa","#ffaaff","#aa0000","#ffaaff","#00aa00","#ffaaff","#ffffff","#ffaaff","#cccccc");

var ccolor = new ArrayとArt_c_chg();は、１つの処理です。

１ページに表示する最大記事数が３件であれば、下記の様に設定できます。
var bcolor = new Array("#ffaaff","#0000aa","#ffaaff");






②　記事と記事の隙間をなくしたい場合は下記をＣＳＳへ追加する

.skinArticle {/* 記事(個別) 記事と記事の隙間をなくす */
margin-top:0px;
margin-bottom:0px;
border:none;
}

●　ソース内容


function Art_c_chg(){// 記事単位に文字色を変える
$(document).ready(function(){
var c_i=0;
$(".skinArticle").each(function(){
$(this).css("color",ccolor[c_i]);c_i++;
if(ccolor.length>c_i+1){return true;}// 指定がなければ、その場で中止
});});}

function Art_b_chg(){// 記事単位に背景色を変える
$(document).ready(function(){
var bc_i=0;
$(".skinArticle").each(function(){
$(this).css("background-color",bcolor[bc_i]);bc_i++;
if(bcolor.length>bc_i+1){return true;}// 指定がなければ、その場で中止
});});}