WordPressでGIFアニメーションを貼り付けるやり方

どうも段田です。

今日はWordPressでGIFアニメを貼り付けるやり方を備忘録として書いておきます。

AAスポンサーリンク
目次

ポイントは「フルサイズ」

WordPressで画像アップロードをする時、内部で元の画像からいくつかの別サイズの画像を生成します。
別サイズの画像は「サムネイル」「中」「大サイズ」とあり、WordPressの本文内でサイズを選択して画像を挿入することができます。
これ以外にも自分で好みのサイズを指定した画像を生成することができるのですが、今回説明は省略します。

そして、WordPressでGIFアニメを貼り付ける場合は、「サムネイル」「中」「大サイズ」を使った場合、アニメは動きません


「サムネイル」


「中」


「大サイズ」

実際に貼り付けてみました。

 

それぞれ別サイズで画像として貼り付けられていますが、アニメーションは動きません。
WordPressで画像アップロード時にリサイズしたGIFアニメはアニメーション部分が無効になってしまいます。

ですが、元サイズの画像はリサイズ処理がされないので、アニメーション部分は有効になっています。
そのため、WordPressでGIFアニメを貼り付けるには元サイズの画像である「フルサイズ」を使えば大丈夫です。

WordPressで画像を本文内に挿入する時に赤枠にあるように「フルサイズ」を選択しておきます。

そうするとこのようにアニメーションが有効になっています。

アイキャッチ画像は?

WordPressでアイキャッチ画像を有効にしている場合のお話です。

アイキャッチ画像は記事投稿画面からだとサイズ指定ができませんので、
WordPressのテーマファイルでアイキャッチ画像を呼び出しているthe_post_thumbnailもしくはget_the_post_thumbnailを確認します。

the_post_thumbnail('large');

このようにサイズでlaerge、mediumなどサイズ指定している場合は、

 

the_post_thumbnail('full');

このように「full」と指定しておきましょう。

参考

https://wpdocs.osdn.jp/%E6%8A%95%E7%A8%BF%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB

最後に

手順は以上になります。

WordPressでリサイズした画像はアニメーションが効かなくなりますので、リサイズしてアニメーションを有効にしたい場合は
PC側で専用のソフトを使ってリサイズしてからアップロードするのが良いと思います。

さて最後にぱくたそさんのGIF画像アニメをいくつか貼って終わりにしたいと思います。
是非ご利用ください(宣伝)

ぱくたそ(PAKUTASO)
LGTMに使いやすい写真素材|フリー素材のぱくたそ デザイナーやエンジニアがGitHub上で「レビュー見ました!OK」の意味として用いり、テキストではなく画像を貼り付けて返答するユーモアから爆発的に拡がった気軽なコミニケ...

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次