超簡単！WordPressでGIFアニメをブログ記事に埋め込む方法
「文字だけや画像だとちょっと説明が足りない、かといって動画で撮るほどのことでもない」
あなたは普段WordPressなどで記事を書いていてこんなふうに思ったことはありませんか？
こんな時に大活躍をするのがGIF（ジフ）と呼ばれる簡単なアニメーション。
ネットサーフィンをしているとたまに見かけるこのGIFという言葉、今回は動画と画像からGIFアニメを作成し、それをWordPressに埋め込む方法までを解説してみました。
画像と動画に加えてGIFを使っていけば記事のクオリティがかなり上がるので、ぜひ試してみて下さい。
Contents
GIF（ジフ）とは？
実際にGIFをブログに埋め込んでいく前に、軽くGIFとはなんなのかについて説明をしておきます。
“GIF”とは、”Graphics Interchange Format”の頭文字をとって付けられた名称で、”JPEG”とか”PNG”と同じく、画像ファイルフォーマットの種類の一つです。
ファイルのフォーマットは画像なのですが、パラパラマンガに近いアニメーションなので動画のように見えます。
まあ画像と動画の中間に位置するくらいに捉えておけば良いでしょう。
ちなみに”GIF”の読み方ですが、このファイル形式を作った方の公式の発表で「ギフ」ではなく「ジフ」と読むということが明かされています。
思わず「ギフ」と言ってしまいそうですが（僕もそうでした）、ちょっぴり恥ずかしい思いをするかもなので「ジフ」と呼んでおくことがオススメです笑
GIFの特徴やメリット
- 動きがあるので目をひきやすい
- 動きがあるので説明が分かりやすくなる
- 画像を小さくすればかなり軽い
- 再生ボタンを押す必要がない
- 無限にループできる
- どのブラウザでも見られる
文字だけや画像だとちょっと説明が足りない、かといって動画で撮るほどのことでもない。
こんな時に大活躍するのがGIFです。
GIFアニメの作り方
GIFアニメを作る方法は様々ありますが、PCからならGIFメーカーのサイトを使うと大変便利です。
こちらのサイトからGIFを作っていきます。
GIFは動画から作る方法と画像から作る方法の二通りがあるので、それぞれに関して解説をしていきますね。
動画からGIFを作る
動画からGIFを作成する場合は、次のように動画をドラッグ＆ドロップでアップします。
あとは下の方にいって
- テキストの挿入
- 画像のサイズ
を設定し、「GIFを作成」のボタンを押しましょう。
出来上がったら右クリックで「保存」を押せば完了です。
こちらが完成したGIFです。
動画から作る時に注意したいのが
- 長すぎる動画を使わないこと
- 画像のサイズを「小」くらいにしておくこと
です。
動画が長すぎたり、画像のサイズを「中」や「大」にすると動画の尺が長い場合は途中で切れてしまいます。
僕の感覚としては2秒程度の動画が元になっているのであれば、「中」でも最後までしっかりGIF化できるくらいですね。
ちなみに僕はパソコンで動画を撮影する場合は”Camtasia Stadio”のMac版を使っています。
画像からGIFを作る
画像から作る場合も同様にまずはGIFにしたい画像を全てドラッグ＆ドロップでアップします。
アップが出来たら、それを動画で表示したい順に並べましょう。
あとは動画と同様に
- 切り替わりの速さ
- テキストの挿入
- 画像のサイズ
を設定し、「GIFを作成」のボタンを押します。
画像から作る場合は切り替わりの速さも設定できるので、こちらも好みに合わせて設定しましょう。
こちらが完成したGIFです。
使った画像の枚数が少なかったので、動画から作ったものと比べるとカチカチしていますね。
WordPressでGIFアニメをブログ記事に埋め込む方法
作ったGIFアニメをWordPressのブログ記事に埋め込む方法は画像と全く同じです。
「メディアを追加」からGIFアニメをアップして、記事に挿入しましょう。
ただし気をつけたいのが必ず「フルサイズ」で埋め込むこと。
これが他のサイズだとうまく動きません。
・サムネイル（150 × 150）
・中（300 × 187）
・カスタムサイズ（400 × 249）
GIFを入れたのに「あれ動かないぞ？」ということでしたら、しっかりフルサイズになっているかどうか確認をしてみて下さいね。
まとめ：ちょっとしたアニメーションで記事のクオリティをアップ
ということで今回は動画や画像からGIFアニメを作成し、それをWordPressの記事で埋め込む方法までを解説してみました。
やはりただ画像で説明をするよりも、たとえ数秒でも良いのでアニメーションで見せたほうが分かりやすいですし、記事のクオリティもグッと上がります。
特に何かツールの解説する時などにはかなり役に立つ方法だと思いますので、ぜひ参考にしてみて下さい。
