超簡単!WordPressでGIFアニメをブログ記事に埋め込む方法

[Last Updated]2017/11/25

WordPress GIF アニメ 動画

文字だけや画像だとちょっと説明が足りない、かといって動画で撮るほどのことでもない

あなたは普段WordPressなどで記事を書いていてこんなふうに思ったことはありませんか?

こんな時に大活躍をするのがGIF(ジフ)と呼ばれる簡単なアニメーション。

ネットサーフィンをしているとたまに見かけるこのGIFという言葉、今回は動画と画像からGIFアニメを作成し、それをWordPressに埋め込む方法までを解説してみました。

画像と動画に加えてGIFを使っていけば記事のクオリティがかなり上がるので、ぜひ試してみて下さい。

 

GIF(ジフ)とは?

WordPress GIFアニメ 埋め込む

実際にGIFをブログに埋め込んでいく前に、軽くGIFとはなんなのかについて説明をしておきます。

“GIF”とは、”Graphics Interchange Format”の頭文字をとって付けられた名称で、”JPEG”とか”PNG”と同じく、画像ファイルフォーマットの種類の一つです。

ファイルのフォーマットは画像なのですが、パラパラマンガに近いアニメーションなので動画のように見えます。

まあ画像と動画の中間に位置するくらいに捉えておけば良いでしょう。

ちなみに”GIF”の読み方ですが、このファイル形式を作った方の公式の発表で「ギフ」ではなく「ジフ」と読むということが明かされています。

思わず「ギフ」と言ってしまいそうですが(僕もそうでした)、ちょっぴり恥ずかしい思いをするかもなので「ジフ」と呼んでおくことがオススメです笑

 

GIFの特徴やメリット

  • 動きがあるので目をひきやすい
  • 動きがあるので説明が分かりやすくなる
  • 画像を小さくすればかなり軽い
  • 再生ボタンを押す必要がない
  • 無限にループできる
  • どのブラウザでも見られる

文字だけや画像だとちょっと説明が足りない、かといって動画で撮るほどのことでもない。

こんな時に大活躍するのがGIFです。

 

GIFアニメの作り方

GIFアニメを作る方法は様々ありますが、PCからならGIFメーカーのサイトを使うと大変便利です。

こちらのサイトからGIFを作っていきます。

GIFメーカー

GIFは動画から作る方法と画像から作る方法の二通りがあるので、それぞれに関して解説をしていきますね。

 

 

動画からGIFを作る

動画からGIFを作成する場合は、次のように動画をドラッグ&ドロップでアップします。

GIF 作成

あとは下の方にいって

  • テキストの挿入
  • 画像のサイズ

を設定し、「GIFを作成」のボタンを押しましょう。

 

出来上がったら右クリックで「保存」を押せば完了です。

GIFアニメ WordPress

 

こちらが完成したGIFです。

WordPress GIFアニメ 埋め込む

動画から作る時に注意したいのが

  • 長すぎる動画を使わないこと
  • 画像のサイズを「小」くらいにしておくこと

です。

動画が長すぎたり、画像のサイズを「中」や「大」にすると動画の尺が長い場合は途中で切れてしまいます。

僕の感覚としては2秒程度の動画が元になっているのであれば、「中」でも最後までしっかりGIF化できるくらいですね。

 

ちなみに僕はパソコンで動画を撮影する場合は”Camtasia Stadio”のMac版を使っています。

Camtasia Stadio

 

画像からGIFを作る

画像から作る場合も同様にまずはGIFにしたい画像を全てドラッグ&ドロップでアップします。

WordPress GIF 埋め込む

 

アップが出来たら、それを動画で表示したい順に並べましょう。

WordPress GIF 埋め込む

あとは動画と同様に

  • 切り替わりの速さ
  • テキストの挿入
  • 画像のサイズ

を設定し、「GIFを作成」のボタンを押します。

画像から作る場合は切り替わりの速さも設定できるので、こちらも好みに合わせて設定しましょう。

 

こちらが完成したGIFです。

WordPress GIF 埋め込む

使った画像の枚数が少なかったので、動画から作ったものと比べるとカチカチしていますね。

 

WordPressでGIFアニメをブログ記事に埋め込む方法

作ったGIFアニメをWordPressのブログ記事に埋め込む方法は画像と全く同じです。

「メディアを追加」からGIFアニメをアップして、記事に挿入しましょう。

WordPress GIF 埋め込む

 

ただし気をつけたいのが必ず「フルサイズ」で埋め込むこと。

WordPress GIF 埋め込む

これが他のサイズだとうまく動きません。

・サムネイル(150 × 150)

WordPress GIF 埋め込む

・中(300 × 187)

WordPress GIF 埋め込む

・カスタムサイズ(400 × 249)

WordPress GIF 埋め込む

GIFを入れたのに「あれ動かないぞ?」ということでしたら、しっかりフルサイズになっているかどうか確認をしてみて下さいね。

 

まとめ:ちょっとしたアニメーションで記事のクオリティをアップ

ということで今回は動画や画像からGIFアニメを作成し、それをWordPressの記事で埋め込む方法までを解説してみました。

やはりただ画像で説明をするよりも、たとえ数秒でも良いのでアニメーションで見せたほうが分かりやすいですし、記事のクオリティもグッと上がります。

特に何かツールの解説する時などにはかなり役に立つ方法だと思いますので、ぜひ参考にしてみて下さい。

     
nomadic wood

[Created]2017/05/17[Last Updated]2017/11/25 | Posted in WordPress
   

Related Posts