Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでアニメーションGIFを追加する方法(正しい方法)

WordPressのブログ投稿にアニメーションGIFを追加したいですか?

GIF(グラフィック・インターチェンジ・フォーマット)は、訪問者の注意を引き、ブログ投稿へのエンゲージメントを高めるのに役立ちます。しかし、WordPressでアニメーションGIFを追加すると、アニメーションが失われ、ただの静止画像として表示される可能性があります。

この投稿では、WordPressでアニメーションGIFを適切に追加する方法を順を追って説明します。

How to add animated GIFs in WordPress

WordPressのGIFが正常に動作しないのはなぜですか?

WordPressは自動的に複数のサイズの画像を生成するため、GIFアニメーションが静止画像になることがありますが、これはアニメーションの最初のフレームからだけです。

なぜそうなるのか?

メディアアップローダーを使用してWordPressサイトに画像を追加すると、WordPressは自動的に異なるサイズの画像のコピーを複数作成します。

WordPressの初期設定には、サムネイル、ミディアム、ラージ、フルサイズの4種類の画像サイズがあります。

Image size in WordPress

しかし、アニメーションGIFの新しい画像サイズを作成すると、WordPressはGIFファイルの最初のフレームだけを保存してしまいます。

その結果、生成された画像サイズのいずれかを投稿やページに追加すると、静的な画像となり、WordPress GIFが機能しなくなります。

とはいえ、WordPressでアニメーションを失うことなくアニメーションGIFを適切に追加する方法を見てみましょう。

WordPressでアニメーションGIFを正しく追加する

まず、アニメーションGIFを追加するには、WordPress GutenbergエディターでWordPressの投稿またはページを編集または新規作成する必要があります。

WordPressのコンテンツエディターに入ったら、「+」ボタンをクリックし、Imageブロックを追加します。

Add image block

次に、ImageブロックにアニメーションGIFをアップロードする複数の方法があります。

まずは「アップロード」ボタンをクリックし、コンピューターからアニメーションGIFを選択してください。または、’メディアライブラリ’ボタンをクリックして、すでにアップロードされているメディアファイルをメディアライブラリに追加することもできます。

また、「Insert from URL」ボタンをクリックしてGIFへのリンクを入力するオプションもありますが、これは画像をサイトにアップロードしないため、使用はお勧めしません。

Upload your animated GIF

GIFをアップロードすると、ブロックエディターがコンテンツに挿入し、カスタマイズすることができます。

GIFを追加したら、右側のメニューから「Image size」の下にある「Full Size」オプションを選択する必要があります。

Choose full size as image size

フルサイズの画像は、WordPressにアップロードしたオリジナルのアニメーションGIFです。これを選ぶと、WordPressのGIFが静止画像として表示され、アニメーションが再生されないのを防ぐことができます。

コンテンツエディターですぐにアニメーションを見ることができます。

See GIF preview

ブログ投稿を公開または更新して、アニメーションGIFの動きをご覧ください。

WordPressでアニメーションGIFを使うためのボーナス・ヒント

ImagelyのGIF画像は通常、他の画像ファイルよりもファイルサイズが大きくなります。それは、アニメーションを作成するためのフレームとして使用される複数の圧縮画像を含んでいるからです。

WordPressのページで大きなGIFを使用したり、GIF画像を追加し過ぎたりすると、サイトの表示速度が遅くなり、検索エンジン最適化(SEO)に悪影響を及ぼす可能性があります。詳しくはWordPressのスピードとパフォーマンスを向上させる究極のガイドをご覧ください。

GIFアニメを探すのにGiphy.comを使っているなら、GIF Masterプラグインがとても便利です。WordPressダッシュボードからGiphyデータベースを検索し、WordPressサイトを離れることなくGIFを追加することができます。

同様に、EmbedPressを使ってGfycatのアニメーションGIFやミームを自動的に追加することもできます。GfycatからGIFのURLを入力するだけで、プラグインがコンテンツに埋め込んでくれます。

WordPressでアニメーションGIFを追加する方法について、この投稿がお役に立てれば幸いです。また、画像を管理するための優れたWordPressプラグインのリストや、より良いパフォーマンスのために最適なWordPressホスティングサービスを選択する方法についての完全なWordPressチュートリアルもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

26件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dana

    Thanks for this. Super helpful and easy to follow.

    • WPBeginner Support

      You’re welcome :)

      管理者

  3. Mike

    Is it better to embed some code or insert the gif as you describe above for site speed? Or does it not really impact anything?

    • WPBeginner Support

      As long as the gif is optimized then there shouldn’t be a major impact having the gif uploaded on your site instead of embedding it.

      管理者

  4. Evans Mary

    So grateful for this knowledge. Thankyou so much for sharing.

    • WPBeginner Support

      You’re welcome, glad you found our article helpful!

      管理者

  5. Lise

    This was a very helpful blogpost.

    I’ve been uploading gifs to giphy, but they became blurry in my page.

    However I now have high quality gifs.

    • WPBeginner Support

      Glad you found our guide helpful!

      管理者

  6. Karl Heinz Burkhardt

    This was very helpful. Thank you very much.

    • WPBeginner Support

      Glad our guide was helpful!

      管理者

  7. Melissa

    Thank you – lifesaver!

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      管理者

  8. Alexandre

    Doesn’t work for me? :(

    • WPBeginner Support

      You may want to ensure you don’t have an image optimization plugin that is attempting to modify the GIF

      管理者

  9. Giron

    How to make start and stop by clicking the mouse for gif animation?

    • WPBeginner Support

      While we don’t have a recommended method at the moment, we will certainly take a look for a possible addition to this article

      管理者

  10. Joy

    Thank you guys. This really helped.

  11. ed

    are there any user comment plugins out there that allow users to add gifs?

  12. Brian

    Any idea how to easily add a post with an iOS Live Photo? Thanks!

  13. Christophe

    Hi,

    I’ve added a animated gif on my WordPress site following your example. It worked but now the .gif has completely disappeared, even from my Media Library.

    Any idea where this could be coming from?
    Many thanks

  14. Christopher Eldridge

    Hi, in my case, the media uploader does not offer the option to change the size of the file. Is that because I’m using the free version of Wordpress? If so, which version must I purchase to be able to modify the size of the file and have a functioning GIF animation?

    Thanks!
    Chris

  15. Johnson

    I have an auto blog site in which I use to post to my social networks. I do not write posts I only upload images and use Auto Image Post and Draft Scheduler plugins to automate them.

    Admin please how do I make all my uploaded gif animate automatically?
    I have tried several plugins but none worked. i will greatly apreciate your help.

    Thanks.

  16. John Mauldin

    Great article and GREAT Timing! Just looked at and downloaded an animated gif I need to put on a wp site. Thanks so much for this information, wpbeginner.com!

  17. Rakesh kumar

    Thanks a lot!! It was very simple and yet very effective. Most of us will miss this trick.

  18. Donna Merrill

    To my knowledge I’ve always heard that adding a GIF will slow down my blog. This is why I haven’t used it as yet. However I do have some niche sites that it just may not be a problem.
    Thanks for clarifying it.

    -Donna

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。