WordPress記事内にAfter Effects で作成した動画を表示する方法




WordPressの記事投稿内にAfter Effectsの動画を挿入したい!

After Effects使い、かつ、 WordPressブロガーはおそらく、

WordPress 記事内に After Effects で作成した動画を挿入したい

と思う時があると思います。

 

僕自身、ブログを運営していて、After Effects で作成した動画を挿入したいと思っていたんですが、なかなかできずにむしゃくしゃする日が続いていました。

その方法の1つとして、

「bodymovin」をAEに導入し、WordPress側で「WP bodymovin」 というプラグインを使う

という技があるみたいでした↓

この方法は良さそうに見えたんですが、最後の最後でできずにおじゃんに。

なんというか、プラグインがいかれちゃってましたね。WordPressのアップデートに対応していないみたいでした。

 

そこで、他のサイトを研究してみたところ、どうやらみんな、

GIF アニメーションで表現していることがわかりました。

そこで気を取り直し、 GIF で After Effects で出力して記事に挿入する方法を模索してみました。

 

 

After Effectsの動画をWordPress記事内にGIFアニメーションとして挿入する方法

ということで、WordPress内にAfter Effectsの動画を挿入するためには、

動画をGIF形式で出力する必要があります。

詳しくはこちらの「After EffectsでGIFアニメーションを書き出す方法」を参考にしてみてくださいね。

いったん、GIF形式で出力できたと仮定して話を進めていきます。

 

メディアを追加する

GIF ファイルをワードプレスに読み込みます。
Image from Gyazo
投稿画面の「メディア追加」を押して、GIFファイルを読み込んであげましょう。

 

GIF を挿入する

あとはGIF アニメーションを挿入するだけです。

ここでのポイントがサイズ。

必ずでフルサイズで挿入するようにしてください。

それ以外のサイズだと、アニメーションが再生されないのです。

中サイズで挿入するとこんな感じで止まってしまう

 

ループ形式でGIFの書き出しをしておこう

ただし、普通に何も考えずに After Effectsの動画を GIF 形式で書き出してしまうと、アニメーションが一発で終わってしまうことになります。

こちらの記事を参考にして、

ループになるように GIF 形式で書き出すようにしてみてください。

ポイントは1つで、

書き出すときにループオプションを「無限」にしておけばOKです。

 

After Effectsの動画をループ対応のGIFアニメーションで書き出して挿入すると、こんな感じになります↓

このように、GIF 形式で書き出しておけば大丈夫。

簡単にAfter Effects の動画を埋め込めるのでやってみてくださいね。

 

それでは!

Ken



AEの作業を効率化!
After Effectsのショートカットポスター

Adobe動画制作ソフトAfter Effectsで便利なショートカットキーを把握できるショートカットキーポスターをどうぞ。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です