★ ヘッダー画像をランダム表示する（幅を指定可能）
● 概要
① ヘッダー画像の幅を指定してランダム表示が可能。
② ヘッダー画像は、画像フォルダから横幅800pxでアップロードして
このスクリプトを使って横幅を引き伸ばしが可能です。
③ 背景画像として設定していないので、ヘッダー画像を右クリック
すると画像の保存ができるので注意してください。
④ ヘッダー画像をクリックすると指定したリンクに飛ぶことが可能です。
芸能人ブログの様にヘッダーをリフレッシュする方法が可能です。
⑤ １画像指定しなければ、１画像のみヘッダー画像を横幅を広く設定可能です。
⑥ 背景画像でのヘッダーのランダム表示は下記の記事です。
ヘッダー画像・全体背景画像のランダム表示
http://ameblo.jp/new-blue-777/entry-11061244989.html
⑦ ヘッダー以外にも利用可能です。
● やり方
① フリープラグインへ下記を追記する
<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'>
image = new Array();
image[0]='画像ＵＲＬ１';
image[1]='画像ＵＲＬ２';
image[2]='画像ＵＲＬ３';
image[3]='画像ＵＲＬ４';
image[4]='画像ＵＲＬ５';
image[5]='画像ＵＲＬ６';
image[6]='画像ＵＲＬ７';
image[7]='画像ＵＲＬ８';
image[8]='画像ＵＲＬ９';
image[9]='画像ＵＲＬ１０';
rand_img_imge(".skinHeaderArea",980,'http://ameblo.jp/★/','Y');
</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>
・ 画像ＵＲＬ１～画像ＵＲＬ１０で画像のＵＲＬを入れなかった行は消してください。
・ rand_img_imge(".skinHeaderArea",980,'http://ameblo.jp/★/','Y');
".skinHeaderArea"・・・ヘッダー画像のセレクタ名（場所の名前）を設定
980 ・・・ ヘッダー画像の幅を設定。980px の意味。
'http://ameblo.jp/★/'・・・ 画像をクリックした時に自分のホームに飛ぶように
指定します。★はアメーバIDを設定してください。
'Y' ・・・ 画像をクリックした時に自分のホームに飛ぶように指定します。
もし、画像をクリックした時に自分のホームに飛ぶようにしない場合は
下記の様にします。
rand_img_imge(".skinHeaderArea",980,'','N');
② ＣＳＳの一番下に下記を追加します。
不要な部分は消してください。
.skinTitleArea{/* ブログタイトル */
display:none;/* 非表示 */
}
.skinDescriptionArea{/* ブログ説明 */
display:none;/* 非表示 */
}
.skinHeader_img a:hover{/* ヘッダーにカーソルを乗せた時 */
cursor:pointer;/* カーソルをポインター(指さし)にする */
}
.skinBlogHeadingGroupArea{
padding:0px;
}
◆ スクリプトのソース内容
function rand_img_imge(rand_img_sel,h_width,click_url,click_YN){// ヘッダーのランダム表示（width指定)
x=Math.floor(Math.random()*image.length);
if(click_YN=='Y'){
$(rand_img_sel).append('<div class="skinHeader_img"><a href="'+click_url+'"><img src="'+image[x]+'" width="'+h_width+'"></a></div>');
}else{
$(rand_img_sel).append('<div class="skinHeader_img"><img src="'+image[x]+'" width="'+h_width+'"></div>');
}
}