GIFアニメを使ってスライドショーを作ってみよう!

アメブロのSSL化に伴って、以前はプラグインを使って、アメブロのサイドバーにスライドショーを貼ることが出来ていたんですけど、出来なくなってしまったんですよね。。。

私がカスタマイズしたお客様もSSL化の仕様変更により、スライドショーがただの画像の羅列になってしまいました。

もっと簡単にスライドショーを作ることができないかな?っと考えていたら「GIFアニメ使えるんじゃね?」ってことで試してみたら、上手い事できたので、その方法をご紹介します!!

GIFアニメって

簡単に言うと、複数の画像をパラパラマンガのように連続して表示することで動きを表現できるファイル形式です。


こちらは高速連写で撮影した画像をGIF化したものです

どうやって作るの?

今回はアメブロのサイドバーに貼るためのGIFアニメ作成方法です。アメブロでは、大容量のファイルは保存することができないので、先にGIFアニメに使う画像の大きさを小さくしておく必要があります。

アメブロのサイドバーの幅が300pxなので、最初から画像を幅300pxにしておいた方が良いでしょう!!

 

例えば、こちらの画像は和処Re楽さんの女将さんのアメブロに使っている画像です。

この画像を使って、こちらのサイトでGIFアニメを作ることができます!!


1枚目から順番に画像を参照し、選んでいきます。


点滅の間隔を選んで、GIFアニメを作成するをクリック。

※早い動きの場合は感覚を狭くし、スライドショーのようなゆっくりとしたものは間隔を長く設定すると良いでしょう

そうすると、ダウンロード画面に切り替わるので、出来上がったGIFアニメをダウンロードすればOK!

 

アメブロに設置

まずは、ブログを書くからダウンロードした画像を保存しよう!


本文にGIFアニメを挿入し、HTMLに切り替える。

ここで、画像のURLを取得してください。


こちらの https://・・・.gif の部分になります。


こちらのコードに、先ほど取得した画像URLを「ここに画像URLを入れる」部分に入れ、アメブロのフリースペースに入れると設置できます。

<center><img src="ここに画像URLを入れる" ></center>

 

設置した画像はこんな感じになります。

 

まとめ

今回の方法はアメブロに限っているわけではありません。WordPressでも、HTMLが使えるメルマガでも対応可能です!!ちょっとGIFアニメを作るまでが面倒かもしれませんが、以前のアメブロスライドショープラグインよりは簡単な方法かな?って思います。

是非GIFアニメで遊んでみてください。LINEでも送れるし、最近ではFacebookでも投稿できるようになっていますよ!!

 

コメントを残す

ABOUTこの記事をかいた人

伝説プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。