つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~GIFアニメーション張り付け

1. GIFアニメーション

 今回ははてなブログでのGIFアニメーション張り付けについて取り上げたい。基本的にはGIFアニメーションのファイル(.gif)を通常の画像と同じようにアップロードして張り付けだけで下のように動作する。 注意点としては、アニメーションを作成するときに、画像サイズxコマ数となるのではてなブログにGIF画像を貼る方法。慣れると、はてなブログにGIFの動画画像をアップロードするのは簡単です。 - りんごあつめにあるように画像サイズが10MBを超えるとアップロード自体ができない。特に写真を加工する場合やコマ数が多いアニメーションは10MB超えないように注意する必要がある。

GIFアニメーションテスト
GIFアニメーションテスト

2. GIFアニメーション作成方法例

 今回アップロードしたGIFアニメーションの作成方法を紹介したい。あらかじめ描画ソフトなどでGIF画像をコマ数(今回は4コマ)だけ用意しておく。4枚の画像からアニメーションを作成するには、簡易なフリーウェアなどいろいろ方法があるが、今回はGIF作成 - GIF画像(GIFアニメ)を無料で作成できるサイト!のサイト上で作成した。設定としてはコマ間隔の秒数やループする・しないぐらいで、作成したGIFコマ画像をアップロードするだけでよい。

3. その他

 GIFアニメーションはブログのヘッダー・フッターなどブログデザインに適用できると(実際に試していない)思うが、ブログページ全体の動作が重くなるので通常のブログでアニメーションが効果的なケースのみに限定した方がよさそうだ。