How-to-move-gif

WordPressでGIFが動かない?画像サイズと設定を変更したら動くよ

How-to-move-gif

WordPress で作ったサイトに GIF アニメを挿入したのですが、まったく動きません。

原因は画像サイズの設定でした。無事に解決したので、GIF アニメを動かす方法と動かない原因などをメモしておきます。

GIF が動かなくて困ったときにはお試しあれ。

メディア設定の画像サイズ(寸法)を変更する

WordPress-media-settings

WordPress ダッシュボード 設定 メディアと進み、WordPress のメディア設定から画像サイズ(寸法)を変更します。

挿入する GIF のサイズが設定数値の範囲外だと GIF アニメは動きません。

したがって赤枠のどちらかを挿入する GIF 以上の大きさの数値に変更します。

高さは一律 9999px(フリーサイズ的なかんじ)で OK ですが、画像に合わせてきっちり設定するもよしです。

作業後はキャッシュを削除するかファイル名を変更してからアップロードし直します。

そして GIF 挿入時にはフルサイズを選びます。

Display-settings-full-size

メディア設定を変更しても GIF アニメが動かない場合は次の方法へ。

画像関連プラグインの設定を変更する

メディアサイズの設定を変更しても GIF アニメが動かないときは、画像を自動リサイズするプラグインの影響かもしれません。

たとえば、以下のようなプラグインです。

  1. Imsanity
  2. Compress JPEG & PNG images
  3. EWWW Image Optimizer

以下、①と②の設定変更ケースです。

①Imsanityのリサイズ設定

Imsanity-settings

Imsanity のリサイズ設定数値を GIF 以上の大きさに変更します。

Imsanity(インサニティー) は、アップロードされた画像を自動でリサイズ(縮小)するプラグインです。

Imsanity を有効化しておけば、サイトに大きすぎる画像が表示される心配がありません。

名前はちょっとアレですが、画像を無加工でバンバン上げたい方にはもってこいのプラグインです。

しかし GIF アニメは作成時のサイズのままじゃないと動きません。

そこで Imsanity の設定数値を GIF 以上の大きさにすることで、自動リサイズを避けるというわけです。

リサイズ例

GIF サイズ:1024×768

*****

リサイズ設定:1100×800

リサイズ設定:1000×800

リサイズ設定:1100×700

*****

赤の数値ならリサイズ対象外。青の数値だとリサイズされる。

②Compress JPEG & PNG imagesのリサイズ設定

Compress-JPEG-&-PNG-images-settings

Compress JPEG & PNG images(コンプレスジェイペグアンドピングイメージズ)でも、リサイズ設定数値を GIF 以上の大きさに変更します。

もしくはリサイズしない設定を選びます。

GIF画像をアップロードできない場合

GIF アニメが動かないどころかそもそもアップロード自体ができない場合は、サイズ(容量)オーバーかもしれません。

まずはメディアの最大アップロードサイズ(容量)を確認します。

Basic- capacity

画像では 30MB が上限となっています。サイズオーバーのときにまず試したいのが、GIF の圧縮です。

GIFのサイズ(容量)を圧縮する

GIF を上限サイズ以下まで圧縮できればアップロード可能なはずです。お試しあれ。

まだサイズオーバーするなら次の方法へ。

メディアのアップロードサイズ上限を変更する

Basic- capacity

圧縮した GIF でも上限サイズを超えてしまうときは、上限の数値自体を変更します。

エックスサーバーから変更する方法

エックスサーバーユーザーはサーバーパネルからアップロードサイズ上限の変更が可能です。

こちらのサイトが参考になります

Let'sプログラミング

画像や動画を記事に追加するためにアップロードする時、アップロード可能なファイルの最大サイズは決まっています( 2MB だ…

FTPから変更する方法

FTP からアップロードサイズ上限を変更する方法です。作業自体は簡単ですが、作業前にはファイルのバックアップを忘れずに。

まず FTP ソフトで public_html .user.ini を開きます。

Open-file-from-ftp

そして post_max_sizeupload_max_filesize を GIF 以上の容量に変更します。

ここでは 50MB とします。

Change-capacity

.user.ini を更新し、アップロードサイズ上限が変更できているかを確認します。

Increased-capacity

これでデフォルトの 30MB から 50MB に変更できました。

GIFアニメをサイズ違いで表示する方法

Moving-Anji

GIF の扱いがわかれば、大きいサイズからサムネイルまで、好みの大きさで挿入が可能です。

まずは前項にならい、メディア設定やプラグインで任意の画像サイズを設定しておきます。

Moving-Anji-base

上の GIF のサイズは 768×768 です。設定は 1280×9999 なので、問題なく動きます。

次はサムネイルサイズを挿入してみます。

Thumbnail-150-size

サムネイルサイズは 150×150 です。アップロード前に GIF をリサイズします。

リサイズした GIF をアップロードし、表示設定はフルサイズを選びます。

Moving-Anji-sumbnail

動きました。表示設定をサムネイルにすると動きません。フルサイズのときだけ動きます。

ゆえに表示したい大きさで GIF を作成する必要があるのです。

GIFを動かすためのオンラインツールまとめ

A-dinosaur-appears

さて、GIF アニメは動いたでしょうか。最後に、今回の作業で利用したツールです。

愛用しているツールも一応、記録しておきます。

以上、WordPress で GIF アニメが動かないときの対処法でした。

\当ブログ使用テーマ/

How-to-move-gif
見ないで… |ω·`)