テーマ単位に背景色・文字色などを変える

★　テーマ単位に背景色・文字色などを変える

●　内容

①　テーマ単位で記事の背景色や文字色や背景画像などを変えます。


●　やり方

①　テーマのテーマ番号を求めます。

　■　テーマ番号を得る（ブラウザがＩＥの場合で説明しています）

　　　・　自分のブログの該当のテーマを右クリックして、プロパティを
　　　　　クリックします








　　　　　・　表示されたプロパティのアドレス（ＵＲＬ）をコピーします。







　■　得たテーマのＵＲＬからセレクタ名（場所の名前）を得ます



例

下記のテーマのＵＲＬを

http://ameblo.jp/new-blue-777/theme-10040499959.html


下記の様にします( .themeNumber に　テーマのＵＲＬの番号を追加する）

.skinArticle.themeNumber10040499959



②　ＣＳＳへ下記の様に追加します

.skinArticle.themeNumber10040499959{
background-color:#ffccff;/* 背景色 */
color:#000000;/* 文字色 */
}
.skinArticle.themeNumber10040499959 a{
color:#ff0000;/* リンク文字色 */
}

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

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

●　自動的にテーマ番号のセットされたCSSを作成したい場合は、
下記を一時的にフリープラグインへ入れて、テーマのCSS作成の
ボタンをクリックしてください

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
function theme_css_dx(){
$(document).ready(function(){
var css_data="";
$(".themeMenu .skinSubList li").each(function(){
css_data+=".skinArticle."+$(this).attr("class")+"{/* "+$("a",this).html().replace(/(.+)\((.+)/gi, "$1")+" */\n";
css_data+="background-color:#ffffff;/* 背景色 */\n";
css_data+="}\n";
});
$(".theme_css_dxd").append('<textarea cols="80" rows="30" readonly onmouseover="this.select();" style="width:90%;height:200px;">'+css_data+'</textarea>');
});
}
</script>
<input type="button" onclick="theme_css_dx();" value="テーマＣＳＳ作成">
<div class="theme_css_dxd"></div>