TELOG. Powered by Blogger.
🔖アニメ感想リスト |🔖ゲーム記事リスト

2014年2月22日土曜日


旬な深夜アニメ感想
ゲーム攻略日記
想うことを 綴ったブログ

【HTML/CSS/Javascript】ローディングjQuery設置成功!後はマビのヘッダ画像だけですわ(´・ω・`)


どうですか!ローディングくるくる回ってますでしょ!←
gif-load.gifgif-load.gif
gif-load.gif gif-load.gif gif-load.gif 


ちょっとサムネにしてる画像のサイズが大きすぎてローディングのカクカク感がある…のかも知れませんが、以前のテンプレートを犠牲にしてまでも成功させておきたかったトコロだったので今めちゃくちゃ嬉しいです…( ・`ω・´)
後はもっとGIF画像で遊んでくっつけるだけですね!!←
ただの円型クルクルなんて面白く無いですしおすし!!!
何にしよっかなーwww
ジャイ子がくるくるまわってる画像でもいれてみようかしら?w
あぁブログ楽しいわーwwww
HTML、CSSがここまで面白いとはwwww
諦めなくてよかったよ!!
と言うわけで、一応バックアップはとってありますが、もしもの何かが起きてこのバックアップが消えてしまったとき専用にこのブログを見直せば大丈夫になるように手順も書いておきます( ・`ω・´)
あ...自分の為だけの記事なので…み、見てくれなくてもいいんだからねっ!!


HTMLの<body>直下にloaderとfadeを追加。loader部分に画像URLと高さ幅サイズを入力する。
/*--ローディング--*/
<
div id="loader"><img src="アニメーションgifまでのパス" width="画像の幅" height="画像の高さ" alt="Loading..." /></div>
<div id="fade"></div>/*--ローディング--*/

CSSの最後に追加し、画像の幅、画像の高さ、半分のマイナス値のみ使用する画像に合わせてカスタマイズする。   
/*--ローディング--*/
#loader {
    width: 画像の幅px;
    height: 画像の高さpx;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -XXpx; /* heightの半分のマイナス値 */
    margin-left: -XXXpx; /* widthの半分のマイナス値 */
    z-index: 100;
}
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
}/*--ローディング--*/

これをHTML側の一番最後に追加して前後を<スクリプト タイプ=" テキスト/ジャヴァスクリプト"></スクリプト>で埋め込む( ・`ω・´)

$(
'head').append(
    '<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
);
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
    var pageH = $("#container").height();
    $("#fade").css("height", pageH).delay(900).fadeOut(800);
    $("#loader").delay(600).fadeOut(300);
    $("#container").css("display", "block");
});

記事内にコードを入力させる方法を未だによく理解しておりませんが、これだけで自ブログに『なうろーでぃんぐ』を追加させちゃうとね!
後はヘッダ画像ですけども…。
適当に探して見つけた昔のデザドラ風景のSSを載せてるだけですが何に変えましょうかねぇ…。
元々デスクトップPCになる前のノートPCから画像をもってくればいいんですが立ち上げるだけに数十分…(´・ω・`)
昔のデザドラやレッドラとかわんさか群がってる画像がかなーりあると思うんですけども…(`;ω;´)
ブログが充実するっていいね!!←
0 件のコメント:
コメントを投稿



※コメント反映までに時間がかかる場合があります。

FF14歴3ヶ月のガチ🌱記事が読めるのはここだけ!!!



この記事を書いたりまとめた人
ʑ̸̀੭ੇㄝ゛੭ੇ

アドブロ推奨やめました♪ →管理人のTwitterアカウント
いつも多くの方々に訪問していただきありがとうございます( ◜◒◝ )更新の励みになってます((´^ω^)) 当ブログへのご意見やお問い合わせ・ネタ投稿などは《こちら》からご連絡いただけます。このブログでは古い記事が沢山あります。記事の投稿日時を参照しながらお読み下さい(。-人-。)

支援プラン
投げ銭
¥100円~
毎日更新を強制させる(10日)
¥500円
良いことをさせる
¥888円
関連記事
五十音順アニメ感想リスト

うずらインフォ 引用リンク

総合閲覧回数


FINAL FANTASY XIV - 記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。 Copyright (C) 2010 - 2020 SQUARE ENIX CO., LTD. All Rights Reserved.
今日の格言 トラベラーズ4期あくして