ブログ記事を生き生きとさせるのに最適なアニメーションGIFを見つけました。しかし、WordPressに追加すると、アニメーションはまったく表示されず、平坦で退屈な画像になってしまいます。
これは非常に一般的な問題です。WordPressが、異なる画像サイズを作成する際にGIFの最初のフレームのみを保存してしまうことがあるために発生します。
幸いなことに、これを修正するための簡単なトリックがあります。このガイドでは、アニメーションGIFを常に完璧に機能するように追加する正しい方法を示します。
WordPressのGIFが正しく機能しないのはなぜですか？
GIFアニメーションがWordPressで静止画像になることがあるのは、WordPressがアニメーションの最初のフレームからのみ画像の複数のサイズを自動的に生成するためです。
なぜそうなのですか？
メディアアップローダーを使用してWordPressウェブサイトに画像を追加すると、WordPressは自動的にその画像の複数のコピーを異なるサイズで作成します。
WordPressには、自動生成される3つのデフォルトのWordPress画像サイズがあります：サムネイル、中、大です。WordPressは元のアップロードも保持しており、「フルサイズ」オプションを選択することで選択できます。
ただし、アニメーションGIFの新しい画像サイズを作成すると、WordPressはGIFファイルの最初のフレームのみを保存します。
その結果、生成された画像サイズのいずれかを投稿またはページに追加すると、それらは静止画像になり、WordPressのGIFが機能しないという結果になります。
さて、WordPressでアニメーションGIFを追加してアニメーションを維持する正しい方法を見てみましょう。
WordPressでアニメーションGIFを適切に追加する
まず、アニメーションGIFを追加するには、WordPressのGutenbergエディターで新しいWordPress投稿またはページを編集または作成する必要があります。
WordPressコンテンツエディターに入ったら、「+」ボタンをクリックして画像ブロックを追加してください。
次に、画像ブロックでアニメーションGIFをアップロードする複数の方法を見つけます。
まず、「アップロード」ボタンをクリックして、コンピューターからアニメーションGIFを選択するだけです。または、「メディアライブラリ」ボタンをクリックして、既にメディアライブラリにアップロードされているメディアファイルを追加することもできます。
GIFのリンクを挿入するには「URLから挿入」ボタンをクリックするオプションもありますが、画像をウェブサイトにアップロードしないため、この方法は推奨しません。
GIFをアップロードすると、ブロックエディターがコンテンツに挿入し、カスタマイズできます。
GIFを追加した後、右側のメニューの「画像サイズ」の下にある「フルサイズ」オプションを選択する必要があります。
アップロードしたオリジナルのアニメーションGIFをそのまま使用するようにWordPressに指示するため、「フルサイズ」を選択することが重要です。他のサイズ（中やサムネイルなど）は、WordPressがアニメーションの最初のフレームから作成した静止画のコピーであり、アニメーションしない理由です。「フルサイズ」を選択することで、アニメーションが正しく機能することを保証します。👍
コンテンツエディターでアニメーションをすぐに確認できます。
アニメーションGIFが実際に動作するかどうかを確認するために、ブログ投稿を公開または更新してください。
WordPressでアニメーションGIFを使用するためのボーナスヒント
アニメーションGIF画像は、通常、他の画像ファイルよりもファイルサイズが大きくなります。これは、アニメーションを作成するために使用される複数の圧縮画像がフレームとして含まれているためです。
大きなGIFを使用したり、WordPressのページにGIF画像を多すぎると、ウェブサイトの速度が低下し、検索エンジン最適化（SEO）に悪影響を与える可能性があります。詳細については、WordPressの速度とパフォーマンスを向上させる方法に関する究極のガイドをご覧ください。WordPressの速度とパフォーマンスを向上させる方法。
アニメーションGIFを探すのにGiphy.comを使用している場合、GIF Masterプラグインが非常に役立つかもしれません。WordPressダッシュボードからGiphyデータベースを検索し、WordPressサイトを離れることなくGIFを追加できます。
同様に、EmbedPressを使用して、GfycatからアニメーションGIFやミームを自動的に追加することもできます。GfycatのGIFのURLを入力するだけで、プラグインがコンテンツに埋め込みます。
WordPressでのGIFに関するよくある質問
WordPressでアニメーションGIFを使用することに関して、よく寄せられる質問への回答を以下に示します。
アニメーションGIFはなぜ大きいのですか？
アニメーションGIFは、本質的に一連の静止画像、つまりフレームを単一のファイルにパッケージ化したものです。GIFのフレーム数や色が多いほど、ファイルサイズは大きくなります。
このため、標準のJPGまたはPNG画像よりもはるかに大きくなることがよくあります。
GIFを最適化してサイズを小さくするにはどうすればよいですか？
WordPressにアニメーションGIFをアップロードする前に、EZgifやGIMPのような無料のオンラインツールを使用して最適化できます。これらのツールは、余分なフレームを削除したり、GIFの色数を減らしたりすることで、多くの場合品質の低下に気づかれずにファイルサイズを削減するのに役立ちます。
1ページに多くのGIFを使用するのは悪いことですか？
はい、1つのページに多くの大きなGIFファイルをアップロードしすぎると、ウェブサイトの読み込み時間が大幅に遅くなる可能性があります。これはユーザーエクスペリエンスを低下させ、SEOランキングに悪影響を与える可能性があります。
重要なポイントを強調したり、最も重要な場所に視覚的な興味を追加したりするために、控えめに使用するのが最善です。
メディア管理のための追加リソース
このガイドが、WordPressサイトにアニメーションGIFを正しく追加するのに役立ったことを願っています。GIFをマスターした今、メディア管理に関する他の記事も役立つかもしれません。
- 画像を管理するための優れたWordPressプラグイン – 画像をより効果的に整理、最適化、表示するのに役立つツールを見つけましょう。
- WordPressに動画をアップロードしてはいけない理由 – 独自の動画をホストすることがサイトのパフォーマンスにどのように悪影響を与えるか、そして代わりに何をすべきかを学びましょう。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Derick Melander
ありがとう、気が狂いそうでした。
WPBeginnerサポート
Glad our guide was helpful!
管理者
ダナ
これ、ありがとうございます。とても役に立ち、わかりやすいです。
WPBeginnerサポート
You’re welcome
管理者
マイク
サイトの速度のために、コードを埋め込むのと、上記のようにGIFを挿入するのとでは、どちらが良いですか？それとも、実際には何も影響しませんか？
WPBeginnerサポート
GIFが最適化されている限り、サイトにアップロードしても埋め込むのと比べて大きな影響はないはずです。
管理者
エヴァンス・メアリー
この知識にとても感謝しています。共有してくれて本当にありがとう。
WPBeginnerサポート
どういたしまして、記事がお役に立てて嬉しいです！
管理者
リス
これは非常に役立つブログ記事でした。
GiphyにGIFをアップロードしていましたが、ページでぼやけてしまいました。
しかし、今では高品質のGIFができました。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
Karl Heinz Burkhardt
とても参考になりました。どうもありがとうございました。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
Melissa
ありがとうございます – 命の恩人です！
WPBeginnerサポート
You’re welcome, glad our guide could be helpful
管理者
アレクサンドル
Doesn’t work for me?
WPBeginnerサポート
画像最適化プラグインがGIFを変更しようとしていないことを確認してください。
管理者
ジロン
GIFアニメーションをマウスでクリックして開始・停止させるにはどうすればよいですか？
WPBeginnerサポート
現時点では推奨する方法はありませんが、この記事への追加の可能性について必ず検討します。
管理者
Joy
皆さん、ありがとうございます。本当に助かりました。
ed
GIFを追加できるユーザーコメントプラグインはありますか？
Brian
iOSのライブフォトを投稿に追加する方法について、何かアイデアはありますか？よろしくお願いします！
Christophe
こんにちは、
あなたの例に従ってWordPressサイトにアニメーションGIFを追加しました。機能しましたが、今では.gifがメディアライブラリからも完全に消えてしまいました。
これがどこから来ているのか何か考えはありますか？
どうもありがとうございます
クリストファー・エルドリッジ
こんにちは、私の場合は、メディアアップローダーでファイルサイズを変更するオプションが提供されていません。これは無料版のWordPressを使用しているためですか？もしそうなら、ファイルサイズを変更して機能するGIFアニメーションを表示するには、どのバージョンを購入する必要がありますか？
ありがとうございます！
クリス
Johnson
ソーシャルネットワークに投稿する自動ブログサイトを持っています。投稿は書かず、画像のみをアップロードし、Auto Image PostおよびDraft Schedulerプラグインを使用して自動化しています。
管理者様、アップロードしたGIFをすべて自動的にアニメーションさせるにはどうすればよいですか？
いくつかのプラグインを試しましたが、どれもうまくいきませんでした。ご協力いただければ幸いです。
ありがとう。
John Mauldin
素晴らしい記事で、タイミングも最高です！ちょうど、wpサイトに載せる必要のあるアニメーションGIFを探してダウンロードしました。この情報、wpbeginner.comさん、本当にありがとうございます！
Rakesh kumar
本当にありがとうございます!! とてもシンプルでありながら非常に効果的でした。ほとんどの人がこのトリックを見逃すでしょう。
Donna Merrill
私の知る限り、GIFを追加するとブログが遅くなるという話をずっと聞いてきました。そのため、まだ使用していません。しかし、問題にならない可能性のあるニッチなサイトもいくつかあります。
明確にしていただきありがとうございます。
-ドナ