ワードプレスで画像が動く!フリーソフトを使った簡単な作り方

目安時間:約 4分

何かのサイトでこのようにぴょこぴょこ動くバナーや画像を見かけたことはありませんか?

→→

「こ、これヤリタイ!!(゚▽゚*)!!」

と思った私はどんなふうにやればいいのか気になっていたのですが、いつも使っている画像編集ソフト(もちろん無料ツール)で簡単にできることが判明しました!

このツールってモザイクや文字入れ、ウォーターマーク入れなど色々できて便利なんですよー^^

WordPressで動く画像の簡単な作り方について図解でご紹介しますね♪

WordPressで画像が動く!超簡単な作り方

動く画像は「Photo Scape(フォトスケープ)」というフリーソフトで超簡単に作ることができます。

(ちなみに動く画像はgif画像とかアニメーションgifとかって呼ばれています。gif=ギフです。)

早速動く画像の作成方法を図解でご紹介しますね。

まずPhoto Scapeをサイトにダウンロードし、(無料ダウンロードはこちらから♪)
立ち上げたら一番上にある「GIFアニメ」を押します。

右上にある「追加」を押して「写真を追加」をクリック。組み合わせて動かしたい画像を選びます。

ちなみにこのとき、シフトキー(shift)を押しながら画像をクリックすると複数選択できますよ^^

画像を選択したら「開く」をクリック。

2枚の画像が取り込まれました。

あとは設定を変えて保存するだけ。

好きな速さを見つけよう

デフォルトでは動く時間が0.5秒となっているのでまずはこの速度でどのくらい動くのか「▶」ボタンで試してみましょう。

0.5秒ってこんな感じ。

チカチカ画像w 結構はやいですw

ちなみにgifアニメがうまく動かないときは画像のサイズが勝手にリサイズされていることが原因の場合がありますので、「フルサイズ」で画像を表示させるようにしましょうね。

画像がかわる速度を変えたいときは右にある「時間の変更」をクリックし、好きな数字を入れ「OK」を押すだけ。

次は100を入れて1秒の設定にしてみました。

1秒だとこんな感じ。

うーん。これでも若干早い気が??

2秒。

遅い?

結局私は1.5秒に落ち着きました。

いろいろと試してみてご自身で好きな速さを見つけてみてくださいね。

画像が変化するときの効果もいろいろ選べる

PhotoScapeのいいところは画像が変化するときの効果もいろいろ選べるところです。

上に移動(下・右・左もあり)

アニメーション画像が上にスライドして動きます。

下や右、左にスライドさせることもできます。

容量が大きめなので小さい画像でつくったほうがサイトを圧迫しなくていいかもです。

背景色に移動

ふぉわーっと画像が消えて切り替わる仕様です。

 

黒色or白色に移行

一旦背景が黒に変わって違う画像に切り替わります。

白に移行もありますよ。

使いすぎるとうざいかもしれませんが

「ココは!!」

というところに使うと良いかもしれません^^

フリーソフト(無料のソフト)で簡単にできるのも嬉しいですよねー♪


ブログランキングに参加しています♪

「へぇー!」っと思っていただけたらクリックしていただけるととっても嬉しいです♪



にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
ランキング何位かな?

マウスを近づけるとイイコトあるかも??
↓↓↓

にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ

カテゴリー
アーカイブ
メタ情報