【WordPress】Gif動画を貼り付ける方法

WordPress

【やりたいこと】ブログにGif動画を貼り付けたい!

WordPressでGif動画を貼り付けようと思ったら、うまく表示されずに大分悩まされました。

「Gif動画が動くようになったけど、ループ再生されない。」

「そもそも、Gif動画が表示されない。」

Gif動画問題に1時間を費やしてしまいました、泣

なので、今回は、私がGif動画問題を解決した方法を紹介したいと思います(^^)/

【10分でできる!】Gif動画はGIPHYのリンクを使用

※ダウンロード時間は10分の中に含まれていません。

0.概要

「VideoSolo動画GIF変換」というフリーソフトで動画をGif動画に変換し、「GIPHY」というサイトにGif動画をアップロードします。最後に、アップロードしたGif動画のリンクをブログに貼り付けます。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman – WordPress テーマ | WordPress.org
Free WordPress Themes

2.手順

①Gif動画の作成

Gif動画作成ソフトのVideoSolo 動画 Gif 変換をインストールします。

インストール後、VideoSolo 動画 Gif 変換を開きます。

上記の画像のように、動画をドラッグ&ドロップします。

カットをクリックします。

Gif動画にする部分を決めます。

カット前の動画は消去します。

保存先を設定して、変換をクリックします。

プログレス合計が100%になったら、右下の完成をクリックします。

以上の手順で、Gif動画が完成しました。

②GIPHYの利用

こちらのリンクからGIPHYに移動します。

GIPHY | Search All the GIFs & Make Your Own Animated GIF
GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs, reaction GIFs, unique GIFs and more.

Uploadをクリックします。

BROWSE YOUR FILESをクリックし、①で作成したGif動画を開きます。

SOURCE URLADD TAGSを記入します。

アップロード後、Copy linkをクリックします。

Sourceのリンクをコピーします。

③確認

ビジュアルエディターに②でコピーしたリンクを貼り付けます。

下記の画像のように、表示されていれば成功です。

お疲れさまでした(^^♪

3.追記

WordPressのメディアからGif動画を追加する方法で一度試してみましたが、Gif動画がループ再生されませんでした。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

SHOWROOM(ショールーム)
SHOWROOMはアーティストやアイドル、タレント等の配信が無料で視聴でき、さらに誰でもすぐに生配信が可能な、双方向コミュニケーションの仮想ライブ空間です。

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

※無料版あり Unity学習100日記念本(0~30日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(Progate編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

タイトルとURLをコピーしました