読み込み中
今回は、このブログで使うために、読み込み中のグルグルを作ってみます。作る理由は、このブログではガジェットのレビューなどで画像を多用することが多いので、あった方がいいかなぁと思った... というのは建前で、なんとなく作ってみたくなったからです。
GIFアニメーションをいくつか置いておいたので、作るのが面倒な方はダウンロードしてお使いください。
素材を作る
頑張れば、回転するアニメーションはHTML/CSSでも作れるのですが、筆者はそこまで正確に位置を動かす技術を持っていないので、今回はGIFを画像の後ろに挿入するという雑な手法を使います。この位置関係だと、画像が読み込まれると隠れて見えなくなります。
先ず、GIFの素材を作る必要があります。これはてきとうに動画編集ソフトで作れます。
GIF自体が重くなってしまっては本末転倒なので、解像度はかなり落としています。それでもアニメーションは滑らかに動いてほしいので、フレームレートは24FPSにしました。
あとは、てきとうに「Loading」という文字と回転する図形を用意して、書き出しました。1秒程度の動画なのですぐにできました。使用した動画編集ソフトはAviUtlです。フリーソフトなのでインストールする気力があれば誰でも使えます。（インストールは結構めんどくさい）
GIF化
動画編集ソフトで作成したアニメーションはmp4形式だったので、これをGIFに変換しました。GIFを作る方法については、過去に書いているのでそちらをご覧ください。
作成したGIFは42.8KBでした。かなり軽いので、負担にはならないでしょう。
GIFをアップロード
どこからでもいいのでアップロードして、そのGIFのリンクをコピーしておきましょう。筆者はてきとうな記事編集画面に貼り付けて"HTML編集"からリンクを探しました。
CSSの設定
画像要素の背景画像としてGIFを設定します。使うのは"background-image"です。img要素の"background-image"に先程コピーしたリンク先のGIFを設定すると、画像の背景にGIFアニメーションが挿入されます。大きさ（background-size）はてきとうです。画像の比率に合わせてアニメーションを作成したので"cover"以外でもうまくハマったと思います。
img {
background-image: url(https://ここを書き換える.gif);/*カッコの中にリンクを入れる*/
background-size: cover;/*coverでなくてもいい*/
}
ちなみに、筆者はHTMLがそこまで得意ではないので、正しいかどうかは知りません。とりあえずこれで動作しました。
はてなブログにCSSを書き込む
はてなブログはCSSをいじるのには向いていませんが、設定のデザインCSSを使うか、ヘッダーに"style"で埋め込む方法でCSS要素を追加できます。このブログではヘッダーに先程書いたCSSを埋め込みました。パソコンで読んでいるならキーボードの"Ctrl"＋"U"を押す（又は右クリックして"ページのソースを表示"）と見れると思います。
グルグル
これで画像の背景にアニメーションが挿入されました。画像が読み込まれると、隠れて見えないので、読み込み中にのみ見えるアニメーションの出来上がりです。
注意点ですが、先ず、GIFが重くなると、その読み込みに時間がかかり本末転倒です。できるだけ軽く作りましょう。また、この方法だと透過PNGには使えません。
