【WordPress】SVG画像をアップロードしてタイムラプスアニメーションが出来上がるまで

このエントリーをはてなブックマークに追加

Author

トッド(Todd)

What Content?

SVG画像で遊ぶ

ブログのロゴをSVG形式の画像に変更したついでに、SVG画像で遊んでみた。
デフォルトではSVG形式はWordpressではアップロード出来ない問題をプラグインで解決!!
そして簡単なのに、お洒落なタイムラプスアニメーションが出来るツール紹介。


SVG画像をブログのロゴに使用し始めたことをキッカケに他にもSVGを使って出来ることがあるんだということを知りました。

ちなみに、僕はWordPressを使ってブログをやっている身分ですから本当はSVG画像をメディア内にアップロードすることはできないはずなんですよ。

でもね、小難しいソースコードで触れば出来るようにする方法はあるんです。

けど、難しいのでプラグインで解決しました。

フゥ~

コレなら手間いらず【Safe SVG】で簡単アップロード

コレをインストールすれば、何の設定も必要なくSVG形式のファイルを通常のメディアをアップロードするのと同じ方法で入れる事ができます。

インストール手順

WordPress管理画面からプラグインをクリックし、新規追加画面へ。

そこで検索バーに「Safe SVG」を入力してインストールします。

設定する必要はなく、プラグインを有効化していればアップロードできる状態になっているはずです。

ラクラク

コードなんて分からなくてもコレなら簡単にタイムラプス・アニメーション!!

せっかくSVG画像が使えるのだから、何かしらヤッテみたいとそう思い、探したらこんなのありました。

Vivus Instant


Vivus Instantを使えば、あなたが作成したSVG素材をこんな風に動かすことが出来るんです。↓


ココからSVG素材の作成方法~アニメーション作成までの手順紹介です。

InkscapeでSVG素材を用意する

どうやって作るSVG素材?

SVG画像を作成するのに必要なものはドローソフトです。

有名なところで言うなら、illustratorとかでしょう。

でも、有料だから・・・

ってなる人はInkscapeオススメですよ。無料だから。

ここではInkscapeでのやり方で紹介

Vivus Instantでアニメーション化できるモノはアウトラインで完結している画像素材です。

だから、塗りつぶしてあるものはアニメーション化しないという事です。

分からん分からん画像で示して

1番は良いけど、2番はダメ



Inkscapeを開いて何かしらのベクター素材を用意します。

そしたら、Inksscape内のファイルから「ドキュメントのプロパティ」を選択し、以下の画像のようにページの設定を行っていきます。

今回は、「A」を使ってデモサンプルを作ってみたいと思います。

上記画像のように「ドキュメントのプロパティ」から設定したページ領域の枠内にアニメーション化したい素材を当てはめたら、.svg形式で保存します。

そうしましたらVivus Instantのページへ進み、ドロップ&ドラッグで先ほど作成したSVGファイルをアップロードします。

そしてタイムラプスの速度やパターンをお好みで設定していきます。

最後にダウンロードボタンを押して作業は終了です。

今回のデモサンプルの完成↓

あとはWordpressのメディアから普段画像をアップロードするように入れてやれば、記事内などで使えるタイムラプスアニメーション素材の完成です。

おわり。最後まで読んでくれてありがとう。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。