超簡単!WordPressの記事にLivePhotoや動画を埋め込む方法

iPhoneのLivePhotoは「jpg(画像)」と「mov(動画)」ファイルの2つに分かれているのです。動画は「mov」ファイル
つまり「mov」ファイルをWordPressの記事内に貼れれば解決ということなのですが、結構厄介だった。

2通りある。動画も同じように出来るよ。

①「mov」を直接記事に貼る
②「GIF」に変換して記事に貼る

iPhoneから動画ファイルをPCに移動する

WS000727-2

iPhoneを接続すると「ポータブルデバイス」のように認識してくれるので開きます。

開いていくとLivePhotoの場合「jpg(画像)」と「mov(動画)」があるのでPCに移動。

WS000728

今回はこのファイルでやっていきます。

WordPressにはMOVファイルをアップロードはできるのでとりあえずしちゃいましょう。

WS000729

こんな感じでちゃんとアップロードされます。

WS000730-1

「mov」を直接記事に貼る場合、URLを使うのでこれをコピーしておきましょう。


mov(動画ファイル)を直接記事に貼る

直接記事に貼ると

IMG_0857

このようにダウンロードになってしまい記事内で直接再生出来ません。

そこで登場するのがプラグイン「TinyMCE Advanced

デフォルトメニューがこんな感じ。

WS000736

TinyMCE Advanced導入後はこんな感じに!かなり色々出来るようになってます!

WS000737

 

フォント色やサイズなど色々変更出来るし入れておくのはオススメですよ!

「挿入」→「動画を挿入/編集」を押します。

WS000732 WS000733-1

先ほどのURLを貼り付けます。

サイズは300*300とかでいいかと。それで「OK」を押すと動画が埋め込まれます。

ちなみにサンプルはこんな感じになるよ!音もちゃんと出せるよ。(下の動画は音声なし)


「GIF」に変換して記事に貼る

これのほうがぶっちゃけ簡単です。

LivePhotoをGIFファイルに変換してくれるアプリがあるのでそれを使うのがもっとも簡単かつベストです。
色々あるのでどれを使うかはお好みに。

Lively - Export Live Photo to GIF and Movie
Lively – Export Live Photo to GIF and Movie
無料
posted with アプリーチ
ImgPlay - GIFアニメ画像動画が作成できるアプリ
ImgPlay – GIFアニメ画像動画が作成できるアプリ
開発元:Minkyoung Kim
無料
posted with アプリーチ
Live GIF
Live GIF
開発元:Priime, Inc.
¥240
posted with アプリーチ
IMG_0857
※注意:貼り付けするとき「フルサイズ」を選択しないと動きません。

絶対にGIFファイルはフルサイズで埋め込みましょう。他を選択すると動画じゃなくて普通の静止画になっちゃうよ。


まとめ

写真と同じで埋め込むだけで大丈夫かと思ってたら大変でした。
でも慣れてしまえばサクサク出来るのでブログのクオリティが上がると思いますよ!

この機会に是非GIF使ってみてはいかがでしょうか。

この記事を友達にシェアしよう!

Twitterで