【はてなブログ】ページ読み込み中に表示させるローディング画面を実装してみた。やり方を解説！コピペでOK【カスタマイズ】

f:id:reilst:20161003060841p:plain

ロード画面でるのめっちゃオシャレじゃね！？！？！？

ロード画面ってなに？

ページを開いたときに、表示されるまでの待ち時間の間ぐーるぐる回ったりするやつです

▼少しだけ紹介

Infinite Preloader

Infinite Preloader (GIF) by Mantas Bačiuška - Dribbble
f:id:reilst:20161003053643g:plain

Flat Preloaders

Flat Preloaders — download free animation by PixelBuddha
f:id:reilst:20161003053738p:plain

ということで導入していきましょう

今回入れてみるロード画像はFlat Preloadersのこれ
シンプルでとてもオシャレベルが高いと思います
f:id:reilst:20161003052331g:plain

1.jQueryの読み込みタグを追加

下記のコードをコピーして、はてなブログのダッシュボードを開きましょう
設定＞詳細設定＞検索エンジン最適化＞headに要素を追加にコピーしたコードを貼り付けよう
※この際、既にjqueryのコードがある場合、貼り付ける必要はありません

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2.ローディング画面表示のJavaScriptを追加

先ほどコードを追加した欄に続けて下記のコードをコピーして貼り付けよう

<script>
 $(window).load(function(){//ロードが完了したら下記を実行
 $(".loadingWrap").fadeOut();//.loadingWrapをフェードアウトさせる
 });
</script>

3.ヘッダーにローディング画面のソースを追加

ダッシュボード＞デザイン＞カスタマイズ＞ヘッダにコードをコピペしよう
画像だけは自分で用意したものを入力する必要があります
自分の使いたいロード画像をどこかにアップロードして使ってください

<div class="loadingWrap">
 <img src="<b>ここにロード画面に使うGIF画像をいれてね</b>">
</div>

▼こんな感じです
f:id:reilst:20161003055135p:plain

4.最後にCSSを追加

ダッシュボード＞デザイン＞カスタマイズ＞デザインCSSにコードをコピペしよう

 .loadingWrap {
 width: 100%;/*100%で全画面表示*/
 height: 100%;/*100%で全画面表示*/
 background: #fff;/*背景色*/
 position: fixed;
 top: 0;/*画面上部からの位置*/
 left: 0;/*画面左部からの位置*/
 z-index: 9999;/*レイヤー(この他にpositionを使用していない場合は不要)*/
}
.loadingWrap img {
 position: absolute;
 top: 50%;/*中央表示*/
 left: 50%;/*中央表示*/
 margin: -69px 0 0 -69px;/*画像位置調整(-画像高さの半分 0 0 -画像幅の半分)*/
 width: auto;/*画像サイズをナチュラルに(レスポンシブデザインでない場合は不要)*/
}

▼こんな感じです
f:id:reilst:20161003055926p:plain