今回はGIFを使ってアニメーション画像をはてなブログで使用する方法を紹介します！
GIFとは「ジフ」と読み、昔の2ちゃんねるなどでも多く使われていた画像形式です。
特徴はアニメーションと呼ばれる画像の連続再生により疑似的な動画のように見せることができる点です。
マンボウが泳いでいる姿ですが、これも何枚かの画像をパラパラ漫画のように再生したものになります。
画像を多く張り付けてしまったので記事が重いかもしれません…
GIF画像の作り方！
GIFアニメーションをはてなブログで使用する際に注意点が
・はてなブログにはアップロードできる画像ファイルサイズに上限があるので、上限以下になるようにGIFアニメーションを作成すること
です。
パラパラ漫画と言いましたが10枚の画像をGIFアニメーションにすると、画像ファイル10個分のサイズになるため画像ファイルが大きい場合や数が多い場合は事前に画像のサイズを小さくしておく必要があります。
下のようなファイルのサイズを変更するアプリや標準のペイントなどでもサイズ変更ができます。
今回使用する画像はアシカが陸から水中に飛び込むまでの9つの画像を連続再生したものです。(下はそのうちの3枚です。)
GIFを作成するためのサイトはいくつもありますが、
GIF作成 - GIF画像(GIFアニメ)を無料で作成できるサイト！
を今回は利用しました。
上のURLを開くと下のようなページに遷移します。
画像の最大枚数やループ、点滅間隔(画像切り替えの時間)などを設定できます。
動きを早くしたい場合は点滅間隔を短く設定します。
上の画像のように、再生させたい順番に画像ファイルを添付していきます。(画像ファイルが大きいので本当はもっと小さく圧縮する必要があります)
上のように使用する画像を添付してから「GIFアニメを作る」からGIFアニメーションを作成することができます。
GIFアニメーションを作るボタンを押下するとプレビュー画面に遷移するので、間隔の調整や画像の修正を行うことができます。
プレビューで問題がなければ「保存」ボタンで保存することができます。
GIFアニメーションの完成はこんな感じ！
今回は点滅間隔を変更した4パターンを紹介していきます！
点滅間隔1秒のパターン
デフォルト設定の点滅間隔1秒だとこのようになります。
動的な画像のスライドの場合はゆっくりに感じることが多いです。
点滅間隔0.5秒のパターン
半分の0.5秒にするとやや早く感じます。
少し遅くして間隔0.7秒に変更してみました。
点滅間隔2秒、0.1秒のパターン
極端に早くしたり、遅くするとこのようになります。
スライドショー的な感じで色々な写真を再生するならゆっくりでもいいかもしれません。
画像の粒度や対象によって間隔は調整してみてください！
ここまで
最後までお読みいただきありがとうございます。