BETA

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

投稿日:2019-01-26
最終更新:2019-01-26
※この記事は外部サイト(https://hk-ryukyu.club/hideto/archives/310)からのクロス投稿です

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


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

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

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

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

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

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


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

0.概要


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

1.使用したもの


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

https://lolipop.jp/

・WordPress 4.9.8

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

・テーマ Hueman

https://ja.wordpress.org/themes/hueman/

2.手順

①Gif動画の作成


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

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

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

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

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

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

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

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

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

②GIPHYの利用


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

https://giphy.com/

Uploadをクリックします。

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

SOURCE URLADD TAGSを記入します。

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

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

③確認


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

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

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

詳細

画像が見づらい場合は、以下のリンク先に移動することをおすすめします。

https://hk-ryukyu.club/hideto/archives/310

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

パソコン関連で役に立った情報を発信します

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!