【解決】WordPress で投稿にアニメーションGIF を貼っても動かない

スポンサーリンク

前回投稿した記事の中でアニメーションGIF を使ったのですが、

ブログやウェブサイトの上の方にずっと出ている固定ヘッダー(帯)を消すブックマークレット「Kill sticky headers」
パソコンでブログやWebサイトを見てるとき、スクロールとかどうしてますか?マウスについてるスクロールホイールを使う派?それとも矢印キーを地道に押す派?私は親指でスペースキーをスパーンと叩く派です。そんなスペースをスパーン派の私に...

またもや動かなかったので解決方法を覚え書きしときます。

はい、またもや なんです(;´∀`)
解決方法は簡単なんですけど、ちょっと忘れがちなので。

手順1 投稿画面からアップロードする

WordPress に画像を投稿する方法は

  1. メディア画面からアップロードする
  2. 記事投稿画面からアップロードする

の二通りあります。
このとき、二番目の「記事投稿画面からのアップロード」で画像をアップしましょう。

メディア画面からのアップロードだと、この画面ですが、アニメーションGIF の場合は使いません。
メディアのアップロード

記事投稿画面からだと、「メディアを追加」ボタンから画像を添付できます。
記事に貼り付けたいのがアニメーションGIF の場合、こちらの方法で画像をアップロードです。
投稿画面

手順2 挿入時には「フルサイズ」を選ぶ

WordPress はデフォルトのままだと、様々なサイズの画像を自動生成する仕様になっています。

ここでうっかり自動生成された画像を使ってしまうと、静止画になってしまいます。

なので、WordPress 側がいじってない元データである、フルサイズを選びましょう。

投稿画面

それでもダメなら、ファイルサイズの問題かも

大抵はこれでバッチリ表示されるようですが、なにげにもう一つ落とし穴があります。

それはファイルサイズの大きさ。

ファイルサイズが大きいと、どうやら静止画になる模様です。

初めてアニメーションGIF の貼り付けに挑戦したときには、これで引っかかったんですよねー…ワクワクしてたのに(´Д`;)

なので、何度やっても動かない場合はサイズダウンするといいでしょう。
アニメーションGIF を圧縮できる無料 Web サービスを、いくつかご紹介しておきます。
いずれも会員登録とかしなくても使えました。

オンラインでGIFとアニメーションGIFを圧縮 | iLoveIMG

ドラッグアンドドロップで圧縮開始、その後 保存画面が表示、とシンプル。
参考までに、前回の記事で使ったアニメーションGIF のサイズが

748.59 KB ⇒ 530.87 KB

になりました。
ダウンロード時のファイルネームは、元のまま。

Compressor.io – optimize and compress JPEG photos and PNG images

英語ですが、よく見ると使い方はこれもシンプル。
「TRY IT !」と書かれたボタンをクリックすると、ドラッグアンドドロップできる画面に移ります。

ファイルサイズは

766.56 KB ⇒ 494.70 KB

と先ほどの iLoveIMG より小さめ。
ダウンロード時のファイルネームは、末尾に「-compressor」が付くようになってます。

Optimize animated GIF

ファイルサイズの圧縮以外にもクロップ(不要な部分を落として切り抜き)やリサイズ(画像の大きさ変更)、回転やエフェクト、テキスト追加や再生スピード変更などなど、恐ろしく色々なことができる高機能な編集サイト。

高機能な上に英語なので、よくわからなかったら以下のサイトの解説を読んでみてください。

参考:GIFアニメの容量圧縮はOnline GIF optimizerが最適!

Bloggif : Resize an image

GIFアニメをリサイズできるサイト。

他の3つと違ってファイルサイズの圧縮はできません。
でも Optimize animated GIF より機能と画面がシンプルな分、リサイズだけでどうにかなりそうな場合には便利かも。

まとめ

WordPress でアニメーションGIF がうまく動かない場合は、

  1. 投稿編集画面からアップロード
  2. フルサイズを選択
  3. それでもダメならファイルサイズを落とす

を試してみましょう。

WordPress の画像の扱いは なかなかクセがありますが、動いてるのを見たときにはやっぱりちょっとテンション上がりますね(笑)

Digiprove sealCopyright protected by Digiprove © 2018

コメント