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