WordPress で作ったサイトに GIF アニメを挿入したのですが、まったく動きません。
原因は画像サイズの設定でした。無事に解決したので、GIF アニメを動かす方法と動かない原因などをメモしておきます。
GIF が動かなくて困ったときにはお試しあれ。
メディア設定の画像サイズ(寸法)を変更する
WordPress ダッシュボード 設定 メディアと進み、WordPress のメディア設定から画像サイズ(寸法)を変更します。
挿入する GIF のサイズが設定数値の範囲外だと GIF アニメは動きません。
したがって赤枠のどちらかを挿入する GIF 以上の大きさの数値に変更します。
高さは一律 9999px(フリーサイズ的なかんじ)で OK ですが、画像に合わせてきっちり設定するもよしです。
作業後はキャッシュを削除するかファイル名を変更してからアップロードし直します。
そして GIF 挿入時にはフルサイズを選びます。
メディア設定を変更しても GIF アニメが動かない場合は次の方法へ。
画像関連プラグインの設定を変更する
メディアサイズの設定を変更しても GIF アニメが動かないときは、画像を自動リサイズするプラグインの影響かもしれません。
たとえば、以下のようなプラグインです。
- Imsanity
- Compress JPEG & PNG images
- EWWW Image Optimizer
以下、①と②の設定変更ケースです。
①Imsanityのリサイズ設定
Imsanity のリサイズ設定数値を GIF 以上の大きさに変更します。
Imsanity(インサニティー) は、アップロードされた画像を自動でリサイズ(縮小)するプラグインです。
Imsanity を有効化しておけば、サイトに大きすぎる画像が表示される心配がありません。
名前はちょっとアレですが、画像を無加工でバンバン上げたい方にはもってこいのプラグインです。
しかし GIF アニメは作成時のサイズのままじゃないと動きません。
そこで Imsanity の設定数値を GIF 以上の大きさにすることで、自動リサイズを避けるというわけです。
GIF サイズ:1024×768
*****
リサイズ設定:1100×800
リサイズ設定:1000×800
リサイズ設定:1100×700
*****
※赤の数値ならリサイズ対象外。青の数値だとリサイズされる。
②Compress JPEG & PNG imagesのリサイズ設定
Compress JPEG & PNG images(コンプレスジェイペグアンドピングイメージズ)でも、リサイズ設定数値を GIF 以上の大きさに変更します。
もしくはリサイズしない設定を選びます。
GIF画像をアップロードできない場合
GIF アニメが動かないどころかそもそもアップロード自体ができない場合は、サイズ(容量)オーバーかもしれません。
まずはメディアの最大アップロードサイズ(容量)を確認します。
画像では 30MB が上限となっています。サイズオーバーのときにまず試したいのが、GIF の圧縮です。
GIFのサイズ(容量)を圧縮する
GIF を上限サイズ以下まで圧縮できればアップロード可能なはずです。お試しあれ。
まだサイズオーバーするなら次の方法へ。
メディアのアップロードサイズ上限を変更する
圧縮した GIF でも上限サイズを超えてしまうときは、上限の数値自体を変更します。
エックスサーバーから変更する方法
エックスサーバーユーザーはサーバーパネルからアップロードサイズ上限の変更が可能です。
こちらのサイトが参考になります
FTPから変更する方法
FTP からアップロードサイズ上限を変更する方法です。作業自体は簡単ですが、作業前にはファイルのバックアップを忘れずに。
まず FTP ソフトで public_html .user.ini を開きます。
そして post_max_size と upload_max_filesize を GIF 以上の容量に変更します。
ここでは 50MB とします。
.user.ini を更新し、アップロードサイズ上限が変更できているかを確認します。
これでデフォルトの 30MB から 50MB に変更できました。
GIFアニメをサイズ違いで表示する方法
GIF の扱いがわかれば、大きいサイズからサムネイルまで、好みの大きさで挿入が可能です。
まずは前項にならい、メディア設定やプラグインで任意の画像サイズを設定しておきます。
上の GIF のサイズは 768×768 です。設定は 1280×9999 なので、問題なく動きます。
次はサムネイルサイズを挿入してみます。
サムネイルサイズは 150×150 です。アップロード前に GIF をリサイズします。
リサイズした GIF をアップロードし、表示設定はフルサイズを選びます。
動きました。表示設定をサムネイルにすると動きません。フルサイズのときだけ動きます。
ゆえに表示したい大きさで GIF を作成する必要があるのです。
GIFを動かすためのオンラインツールまとめ
さて、GIF アニメは動いたでしょうか。最後に、今回の作業で利用したツールです。
愛用しているツールも一応、記録しておきます。
以上、WordPress で GIF アニメが動かないときの対処法でした。