ボタンクリックによるスタイル変更 ①

★　ボタンクリックによるスタイル変更


●　ボタンをクリックすると、ヘッダーや背景の画像が変わります。


図







◆　ヘッダー画像のみをボタンで変える場合

①　フリープラグインへ追記
(　.skinHeaderAreaにハッダー画像をしているしている場合です。）

<div id="skn1_chg">
<INPUT TYPE="button" VALUE="スキンを変える①" ONCLICK="Pattern1_set1();">
<INPUT TYPE="button" VALUE="スキンを変える②" ONCLICK="Pattern1_set2();">
<INPUT TYPE="button" VALUE="スキンを変える③" ONCLICK="Pattern1_set3();">
<INPUT TYPE="button" VALUE="スキンを変える④" ONCLICK="Pattern1_set4();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern1_set5();">
</div>

<script type="text/javascript">
function Pattern1_set1(){
$('.skinHeaderArea').css("background-image","url(画像のＵＲＬ①)");
}
function Pattern1_set2(){
$('.skinHeaderArea').css("background-image","url(画像のＵＲＬ②)");
}
function Pattern1_set3(){
$('.skinHeaderArea').css("background-image","url(画像のＵＲＬ③)");
}
function Pattern1_set4(){
$('.skinHeaderArea').css("background-image","url(画像のＵＲＬ④)");
}
function Pattern1_set5(){
$('.skinHeaderArea').css("background-image","url(画像のＵＲＬ⑤)");
}
</script>

　注意
　ＣＳＳに　!important の優先の指定をしている場合は、上記スクリプトでは
ＮＧなので、 ＣＳＳの!important　を外すか下記の様に.css部分を変える
必要があります。

.css("cssText","background-image:url(画像のＵＲＬ) !important);

以下同様です

　jQueryを使用しているため、フリープラグインの先頭に下記を１つ入れてください。
既にはいっていれば、不要です

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

以下同様


　ONCLICK="Pattern1_set4();　と　function Pattern1_set4(){～}　は対になっているので
増やしたい場合は、set4 の数字部分を変えて（数字をアップ）増やしてください
減らしたい場合は、対になっているのを、それぞれ消してください




②　フリープラグインへ追記
（　.skinBlogHeadingGroupAreaにヘッダー画像を設定している場合です。　）

<div id="skn1_chg">
<INPUT TYPE="button" VALUE="スキンを変える①" ONCLICK="Pattern1_set1();">
<INPUT TYPE="button" VALUE="スキンを変える②" ONCLICK="Pattern1_set2();">
<INPUT TYPE="button" VALUE="スキンを変える③" ONCLICK="Pattern1_set3();">
<INPUT TYPE="button" VALUE="スキンを変える④" ONCLICK="Pattern1_set4();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern1_set5();">
</div>

<script type="text/javascript">
function Pattern1_set1(){
$('.skinBlogHeadingGroupArea').css("background-image","url(画像のＵＲＬ①)");
}
function Pattern1_set2(){
$('.skinBlogHeadingGroupArea').css("background-image","url(画像のＵＲＬ②)");
}
function Pattern1_set3(){
$('.skinBlogHeadingGroupArea').css("background-image","url(画像のＵＲＬ③)");
}
function Pattern1_set4(){
$('.skinBlogHeadingGroupArea').css("background-image","url(画像のＵＲＬ④)");
}
function Pattern1_set5(){
$('.skinBlogHeadingGroupArea').css("background-image","url(画像のＵＲＬ⑤)");
}
</script>

◆　背景画像のみをボタンで変える場合

①　フリープラグインへ追記（body　で全体背景を指定している場合です）

<div id="skn2_chg">
<INPUT TYPE="button" VALUE="背景を変える①" ONCLICK="Pattern2_set1();">
<INPUT TYPE="button" VALUE="背景を変える②" ONCLICK="Pattern2_set2();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern2_set3();">
</div>

<script type="text/javascript">
function Pattern2_set1(){
$('body').css("background-image","url(画像のＵＲＬ①)");
}
function Pattern2_set2(){
$('body').css("background-image","url(画像のＵＲＬ②)");
}
function Pattern2_set3(){
$('body').css("background-image","url(画像のＵＲＬ③)");
}
</script>

①　フリープラグインへ追記（ .skinBody　で全体背景を指定している場合です）

<div id="skn2_chg">
<INPUT TYPE="button" VALUE="背景を変える①" ONCLICK="Pattern2_set1();">
<INPUT TYPE="button" VALUE="背景を変える②" ONCLICK="Pattern2_set2();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern2_set3();">
</div>

<script type="text/javascript">
function Pattern2_set1(){
$('.skinBody').css("background-image","url(画像のＵＲＬ①)");
}
function Pattern2_set2(){
$('.skinBody').css("background-image","url(画像のＵＲＬ②)");
}
function Pattern2_set3(){
$('.skinBody').css("background-image","url(画像のＵＲＬ③)");
}
</script>

◆　素材屋さん風スキン画像のケース

①　フリープラグインへ追記( #skn01 をスキンとして使っている場合です）

<div id="skn1_chg">
<INPUT TYPE="button" VALUE="スキンを変える①" ONCLICK="Pattern1_set1();">
<INPUT TYPE="button" VALUE="スキンを変える②" ONCLICK="Pattern1_set2();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern1_set3();">
</div>
<script type="text/javascript">
function Pattern1_set1(){
$('#skn01').css("background-image","url(画像のＵＲＬ①)");
}
function Pattern1_set2(){
$('#skn01').css("background-image","url(画像のＵＲＬ②)");
}
function Pattern1_set3(){
$('#skn01').css("background-image","url(画像のＵＲＬ③)");
}
</script>

●　ボタンの色・文字の色を調整


①　ＣＳＳへ追記する（skn1_chg　は、変えてください）

/* ------------------------------------------------------- */
/* ボタンの色を変える　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#skn1_chg INPUT[VALUE="スキンを変える①"]{
background-color:#ff00ff;/* 背景色 */
color:#ff0000;/* 文字色 */
}
#skn1_chg INPUT[VALUE="スキンを変える②"]{
background-color:#ff00ff;/* 背景色 */
color:#ff0000;/* 文字色 */
}
#skn1_chg INPUT[VALUE="元に戻す"]{
background-color:#ff00ff;/* 背景色 */
color:#ff0000;/* 文字色 */
}

注意　下記のVALUE= の値と対応しています


<div id="skn1_chg">
<INPUT TYPE="button" VALUE="スキンを変える①" ONCLICK="Pattern1_set1();">
<INPUT TYPE="button" VALUE="スキンを変える②" ONCLICK="Pattern1_set2();">
<INPUT TYPE="button" VALUE="元に戻す" ONCLICK="Pattern1_set3();">
</div>