PhotoshopもいらないGIFアニメーションの作り方[ブログを飾ろう!]

前回のブログで、Photoshopを使ってのGIFアニメーションの作り方をご紹介しましたが、Photoshopなんて持ってない!という方も多いと思います。

 

そんな人には朗報かもしれない、GIFアニメーションの作り方。

 

自由度は低いけれど、とにかく簡単に作れてしまうので、自作のGIFをブログに貼っても面白いと思う。

 

因みに、htmlの編集ができる環境のみ。私は、Wordpressを使っています。

解説動画も作ってみた。

このウェブサイトを使って、GIFアニメーションを簡単に作る。

 

ウェブサイトのリンクはこちら: https://giphy.com/

 

用意するものは、

・使いたい画像や動画

・文字

 

たったこれだけ。

 

 

登録をしなくても作れるけれど、いくつか作る予定があるなら、会員登録をして自分専用のページを作ると良い。

GIPHYでオリジナルのGIFを作る

始めに、”Create”を選択。

2. ウェブサイトに画像か動画をアップロード

GIPHYで画像の取り込み方

使いたい画像をそのままアップロードもできるし、YouTubeなどからリンクを貼って作ることもできる。

 

動画をアップロードするときは、15分以内のものしか使えない。

 

画面上でどの部分を使いたいか、何秒のアニメーションにするか設定することが可能。

 

”CHOOSE PHOTO OR GIF”をクリック。

GIPHYで画像の取り込み方

使いたい素材をウェブ上にアップロード。

3. 使いたい文字を入れる

GIPHYでGIFの作り方

使いたい文字を、枠の中にタイピングする。

 

すぐ下に、装飾も選べる部分があるので、好きなものを選択。

4. フィルターもかけられる

GIPHYでGIFの作り方

フィルターのボタンを押すと、いろいろなフィルターが選ぶことができる。

 

フィルターだけではなく、スタンプツールなども充実していて、結構楽しめる。

GIPHYでGIFの作り方

ステッカーもクリックするだけで追加できて、私好みの怪しいものも多い。

5. デザインが決まったらアップロード

GIPHYで作ったGIFの貼り付け方法

ここまでGIFアニメーションの作り方は終了。気に入ったものができたらそのままアップロード。

 

“Upload GIPHY”をクリック。

6. アップロードが終わったら、リンクを取得

GIPHYで作ったGIFをブログに張り付ける

GIFアニメーションのアップロードが終了したら、このような画面になる。

 

この時点でブログに貼る用のhtmlリンクを作成する。

 

htmlコードを生成したいので、“Embed”をクリック。

GIPHYで作ったGIFのリンクをコピー

生成されたコードをコピーする。”Responsive”をオンにするかオフにするかはお好みで。

7. htmlリンクをブログに貼るだけ

エレメンターでhtmlを記事に入れ込む

あとは、それぞれの方法でhtmlコードを埋め込むのみ!!

 

先ほどGIFアニメーションのウェブサイトで作ったばかりのリンクを、そのままブログに貼ることができる。

サイト名が入ってしまうけれど、邪魔なら消してしまうことも可能。

 

コードの中に含まれているvia GIPHYを消すだけ。といっても、利用規約の中に、

 

Credit the Community: People work hard to make their GIFs, and we want to make sure they get their proper dues. Help us support the community by using GIPHY’s share tools to make sure that the original creator is getting credit for the work.”

 

 

という内容があるので、他の人の作ったGIFを貼るときは、クレジットを残しておくべきかと思います。

htmlコードviaの消し方

めちゃくちゃ簡単なので、オリジナルのGIFアニメーションを作ってみては?

 

背景を白くもできるんですが、下の方が切れてしまうエラーが出てしますので、FIrefoxでも試してみたけど、改善されず、ウェブサイト側の問題かもしれません。

 

多少問題はあるものの、簡単に楽しく作れるので、一度作ってみては?

 

 

それでは皆さん良い旅を!!

ブログ関係記事