★ ローディング画像（パーセント付き）
★（#amebaBar→#ambHeaderに変わりました）2014.04.13
● ローディング画像下または上などにローディング中の
進捗％を表示する。
◆ 下記２つの方法を用意しています。
① 指定された値のパーセントをアップして表示する方法。
② ランダムにパーセントをアップする方法。
■ 関連記事
ローディング中画像の表示
http://ameblo.jp/new-blue-777/entry-11312969233.html
◆ 利用上の注意点①
CSS編集ページの確認（プレビュー）でデザインを確認する場合、この記事の
CSSをいれると、画面が真っ白でローディング中ボタンのみ表示される現象に
なります。
この現象は、アメブロの仕様では、ＣＳＳ編集ページでのの確認（プレビュー）では、
フリープラグインがまったく機能しないためです。
よって、対策としては、ローディング中のＣＳＳは外した状態で
確認するしか方法はありません。
確認したあとに、ローディング中のＣＳＳを最後に入れて、保存する。
または、下記をCSSのに入れて確認して、下記を外して保存する
.skinBody,#amebaBar{display:block;}
body{background-image:none;}
◆ 利用上の注意点②
ＨＴＭＬが読み込まれてから、ブログを表示するようにしています。
ＨＴＭＬが読み込まれても、ブログパーツやアメブロの広告のスクリプトは
動いている状態の場合があるので注意してください。
◆ 利用上の注意点③
パーセントは１００％にならないうちにブログを表示してしまう場合があります。
この場合は、パーセントのアップする値をうまく調整してください。
◆ 使用するローディング中画像例
http://stat001.ameba.jp/user_images/20120728/09/new-blue-777/0e/59/g/o0100010012102606657.gif
◆ 設置方法
① ＣＳＳへ下記を追記する
(注意 htmlに背景画像を指定している場合は、NGなので下記の▲の部分を入れます）
黄色い部分を変更（間違えがありました f → g）
/* ------------------------------------------------ */
/* ◆ ローディング中画像の表示 */
/* ------------------------------------------------ */
.skinBody{/* 全体を非表示 */
display:none;
border:none;
}
#ambHeader{/* アメーババーを非表示 */
display:none;
border:none;
}
.skinFrame{/* フレームを非表示 */
display:none;
}
body{/* ロード画像 */
background-image:url(ローディング中の画像のＵＲＬ);
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
background-color:#000000;/* ローディング中画像表示中の全体背景色 */
}
/* ------------------------------------------------ */
html{background-image:none;}/* ▲ htmlに背景画像は設置しない */
/* ------------------------------------------------ */
/* ◆ ローディング中画像のパーセント表示の設定 */
/* ------------------------------------------------ */
#percent_Area{
text-align:right;/* 右寄せ */
width:70px;/* 幅 */
color:#ff0000 !important;/* 文字の色 */
font-size:16px !important;/* 文字の大きさ */
font-weight:bold !important;/* 文字の太さ(bold normal) */
margin-top:0px;/* 上余白(スクリプトでも指定可) */
margin-left:0px;/* 左余白(スクリプトでも指定可) */
}
② 下記をフリープラグインに追記する（指定された値のパーセントをアップして表示する方法）
（★には、必要に応じて画像のURLを入れてください）
<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 percent_count=0;var Timers;
function loading_disp(load_ftime,body_css){// ローディング画像とパーセント制御
$(document).ready(function(){
$("#percent_Area").html("100%");
$(function(){
$('#ambHeader,.skinBody,.skinFrame').fadeIn(load_ftime);
remove_per();clearInterval(Timers);
$('body').css("cssText",body_css);
});
});}
percent_set(-30,50);
var Timers=setInterval("percent_up(13);",75);
loading_disp(3000,"background-image:url(★);background-repeat:no-repeat;background-attachment:fixed;");
</script>
■ 説明
・ 下記はフリープラグインの先頭に１つあればＯＫです。（以下同じ）
<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>
・ percent_set(-30,50); -30はパーセント表示を左へ30px 移動させる指定です。（CSSで行なってもOK)
・ percent_set(-30,50); 50はパーセント表示を下へ50px 移動させる指定です。（CSSで行なってもOK)
(数字はマイナスの値も指定できます）
パーセントの位置は、スクリプトで中にセットするようにしています。
ローディング中画像の大きさによって、横と縦の位置を調整してください。
・ var Timers=setInterval("percent_up(13);",75); 13はパーセントを１３プラスして表示します。
75 は、0.075秒間隔で、実行して、パーセント表示を変化させます。(調整可能）
・ loading_disp(3000,"background-image:url(★);background-repeat:no-repeat;background-attachment:fixed;");
3000 は３秒の意味。HTMLを読み込んで3秒後にブログを表示します。
background-image:url(★);background-repeat:no-repeat;background-attachment:fixed;
ここにブログを表示させたあとのbodyのCSSを指定します。
③ 下記をフリープラグインに追記する（ランダムにパーセントをアップする方法）
（★には、必要に応じて画像のURLを入れてください）
<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 percent_count=0;var Timers;
function loading_disp(load_ftime,body_css){// ローディング画像とパーセント制御
$(document).ready(function(){
$("#percent_Area").html("100%");
$(function(){
$('#ambHeader,.skinBody,.skinFrame').fadeIn(load_ftime);
remove_per();clearInterval(Timers);
$('body').css("cssText",body_css);
});
});}
percent_set(-30,50);
var Timers=setInterval("percent_up_rand(10);",75);
loading_disp(3000,"background-image:url(★);background-repeat:no-repeat;background-attachment:fixed;");
</script>
■ 説明
・ var Timers=setInterval("percent_up_rand(10);",75);の 10は、0～10の範囲でランダムに
パーセントの数字をアップします。
◆ 処理内容
① パーセントを設置する（percent_set）。
初期値は、０％。
画面中央に配置させます。
画面の大きさを変えた場合は、再計算して中央に位置させます。
② パーセントの数字をアップさせます（percent_up percent_up_rand）
setIntervalで指定した時間ごとに繰り返しして実行します。
もし、１００％を超えたら、setInterval のタイマーを切って停止させます。
③ ブログを表示させて、bodyのＣＳＳをセットします。