WordPressでGiphyからGIFを追加する方法(簡単な2つの方法)

アニメーションGIFを追加することは、ブログ記事にユーモアと個性を加える素晴らしい方法です。WPBeginnerでは、読者にとってコンテンツをより魅力的で共感しやすいものにするために、それらを使用しています。

しかし、大きなGIFファイルがウェブサイトを遅くするのではないかと心配になるかもしれません。読み込みの遅いページはユーザーエクスペリエンスやSEOランキングに悪影響を与える可能性があるため、これはもっともな懸念です。

幸いなことに、Giphyから直接GIFを埋め込むことで、この問題は完全に解決します。この方法により、サーバーの帯域幅が節約され、サイトの高速な動作が維持されます。

プラグインを使用する場合と使用しない場合の、WordPressサイトにGiphyからGIFを追加する2つの簡単な方法をご紹介します。

WordPressにGiphyからGIFを追加する方法

WordPressでアニメーションGIF画像を使用することの長所と短所

アニメーションGIF(Graphics Interchange Format)を使用することは、コンテンツを強化するための楽しく魅力的な方法になり得ます。

これらは、アニメーションのリアクション、ミーム、ポップカルチャーの参照を WordPressサイト に追加するのに最適です。これにより、ページビューを増やし、ブログの直帰率を減らすことができます。

ただし、いくつかの欠点もあります。GIFファイルは大きいです。WordPressメディアライブラリに多くのスペースを占有し、ウェブサイトを遅くし、帯域幅を使い果たす可能性があります。これはユーザーエクスペリエンスにとって悪いニュースであり、検索エンジンのランキングやトラフィックにも影響を与える可能性があります。

Giphyが役立つのはこのためです。Giphy経由でアニメーションGIF画像を配信することで、ウェブホスティングプランの帯域幅を節約できます。また、WordPressの読み込み時間とパフォーマンスへの影響も少なくなります。

さらに、Giphyには面白くて共感できるGIFがたくさんあり、コンテンツにユーモアと個性を加えるのに最適です。

それを踏まえて、WordPressでGiphyのGIFを使用するための、初心者向けの2つの方法を見てみましょう。お好みの方法にジャンプするには、以下のリンクをクリックしてください。

  1. Giphyから埋め込みコードを使用してGIFを追加する方法(プラグインなし)
  2. EmbedPressを使用してGiphyからGIFを追加する方法
  3. WordPressでGIFを使用することに関するよくある質問

注意: このチュートリアルは、GiphyからGIF画像をインポートする方法に関するものです。独自のGIF画像をメディアライブラリに追加したい場合は、WordPressにアニメーションGIFを追加する方法のステップバイステップガイドを確認してください。

方法1:Giphyの埋め込みコードを使用してGIFを追加する方法(プラグインなし)

1つの方法は、Giphyの埋め込みコードを使用してGIFをページまたは投稿に追加することです。 

埋め込みコードを使用しているため、特別なWordPressプラグインは必要ありません。ただし、埋め込みコードを取得するには、いくつかの追加の手順が必要です。 

ウェブサイトに少数のGIFのみを追加したい場合は、これらの追加の手順は問題にならないかもしれません。しかし、多くのGIFを使用する予定がある場合は、このプロセスを容易にするプラグインをインストールする価値があるかもしれません。

埋め込みコードを使用してGIFを追加するには、Giphy.comウェブサイトにアクセスします。次に、使用したいGIFを見つけます。

これで「埋め込み」ボタンをクリックできます。

Giphy埋め込みボタン

Giphyは、このGIFの埋め込みコードを表示します。

この時点で、「レスポンシブオフ」と「レスポンシブオン」のどちらかを選択できます。

レスポンシブコンテンツは、訪問者のデバイスにより適した表示に変化します。これは、サイトがスマートフォンやタブレットでデスクトップコンピューターと同じくらい見栄え良く表示されるようにするために重要です。

例えば、レスポンシブWordPressテーマは、ユーザーの画面サイズに合わせて自動的に調整されます。 

これを踏まえると、「レスポンシブオン」を選択するのが良いでしょう。

WordPressウェブサイトにレスポンシブなGiphy GIFを追加する方法

決定したら、「コードをコピー」ボタンをクリックして埋め込みコードをコピーします。

さて、WordPress管理エリアに切り替える時間です。ここでは、GIFを埋め込みたいページまたは投稿のGutenbergエディターを開くだけです。

次のタスクは、新しいカスタムHTMLブロックを作成することです。開始するには、「+」アイコンをクリックします。 

次に、表示されるポップアップで「カスタムHTML」と入力して、適切なブロックを見つけます。カスタムHTMLブロックをクリックすると、WordPressはこのブロックをページに追加します。

カスタムHTMLブロックを投稿に追加する

次に、GIFの埋め込みコードをカスタムHTMLブロックに貼り付けるだけです。 

このようになります。

GIPHY埋め込みコードをHTMLブロックに追加する

このGIFを公開する前に、訪問者にどのように表示されるかを確認したい場合があります。これを行うには、画面上部にある「プレビュー」ボタンをクリックするだけです。WordPressは新しいタブでページを表示します。

GIFに満足したら、このWordPressの投稿またはページを公開できます。ブロックエディターの「更新」または「公開」ボタンをクリックするだけです。

GIFはこれでWordPressブログに表示されます。

方法2:EmbedPressを使用してGiphyからGIFを追加する方法

ウェブサイトに多くのGIFを追加する予定がある場合、埋め込みコードは時間がかかりすぎる可能性があります。

もう1つのオプションは、EmbedPressプラグインを使用することです。このフリーミアムプラグインを使用すると、Giphy URLだけでGIFを埋め込むことができます。

EmbedPressを使用すると、100以上の他のウェブサイトからコンテンツを埋め込むこともできます。これには、YouTube動画の埋め込みPDFオーディオファイルなどが含まれます。

まず、EmbedPressプラグインをインストールしてアクティブ化する必要があります。このチュートリアルに必要なものがあるため、無料バージョンを使用します。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、GIFを追加したいページまたは投稿に移動します。次に、「+」アイコンをクリックできます。

表示されるポップアップで、「EmbedPress」と入力して適切なブロックを見つけます。 

このブロックをクリックするだけで、WordPressはページにEmbedPressブロックを追加します。

EmbedPress WordPressプラグイン

新しいタブでGiphyのウェブサイトにアクセスします。次に、使用したいGIFを見つけます。 

次に、このGIFのURLをコピーするだけです。 

Giphy GIFのURLをコピーする

さて、WordPressダッシュボードに戻る時間です。

ここで、GIFのURLをEmbedPressボックスに貼り付けるだけです。最後に、「埋め込む」をクリックします。

EmbedPress埋め込みブロック

これで、ウェブサイトを見ると、新しいGIFが表示されているはずです。

GIFに満足していない場合は、EmbedPressにはいくつか検討すべき設定があります。これには、EmbedPress経由で追加するすべてのGIFの高さと幅の変更が含まれます。

これらの設定を確認するには、WordPressのサイドバーにある「EmbedPress」をクリックします。

WordPressウェブサイトにGIFを埋め込む方法

まだ選択されていない場合は、「一般」タブをクリックしてください。これで、これらの設定を使用してEmbedPressの埋め込みをカスタマイズできます。 

このメニューで行った変更は、すべてのEmbedPressコンテンツに影響することに注意してください。

WordPressでGIFを使用することに関するよくある質問

WordPressウェブサイトにGIFを追加することについて、よく寄せられる質問とその回答を以下に示します。

GiphyからGIFを埋め込むと、ウェブサイトが遅くなりますか?

いいえ、GiphyからのGIFの埋め込みは、サイトの速度低下を防ぐための推奨される方法です。ファイルはGiphyの強力なサーバーにホストされているため、独自のホスティングリソースや帯域幅を使用しません。これにより、ページの読み込み時間に最小限の影響しかありません。

WordPressに自分で作成したGIFをアップロードできますか?

はい、独自のGIFをWordPressメディアライブラリにアップロードすることは絶対に可能です。ただし、GIFファイルはしばしば大きいため、最適化されていない場合はストレージ容量を消費し、サイトの速度を低下させる可能性があることに注意してください。最適な方法は、WordPressにアニメーションGIFを追加する方法に関するガイドで説明しています。

GIFを埋め込むためにプラグインを使用するのと、手動で行うのとではどちらが良いですか?

これはワークフローによります。手動で埋め込みコードを使用する方法は、追加のプラグインを必要としないため、GIFを時々追加するだけの場合に最適です。ただし、コンテンツでGIFを頻繁に使用する場合は、EmbedPressのような専用プラグインを使用すると、簡単なURLで埋め込むことができるため時間を節約できます。

ウェブサイトでGIFを使用するためのベストプラクティスは何ですか?

最良の結果を得るには、コンテンツに関連性があり、ユーモアやイラストを通じて価値を提供するGIFを使用してください。ページが乱雑になるよりも、適切に配置された1つか2つのGIFの方が効果的なので、使いすぎないようにしてください。最後に、すべてのデバイスでGIFがうまく表示されるように、必ずレスポンシブ埋め込みオプションを選択してください。

この記事が、WordPressでGiphyからGIFを追加する方法を学ぶのに役立ったことを願っています。また、WordPress向けの最高のファイルアップロードプラグインの専門家のおすすめや、WordPressでインタラクティブな360度画像を追加する方法に関するガイドもチェックしてみてください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

9 CommentsLeave a Reply

  1. この機能は素晴らしいです!GiphyのURLを直接使用すると、本当に時間を節約できます。もう埋め込みコードをいじる必要はありません。

  2. こんにちは、素晴らしい記事をありがとうございます。GiphyPressプラグインをチェックしたところ、3年前に更新されていたことがわかりました。ダウンロードしても安全だと思いますか?

  3. 著作権についてはどうですか?私は会社で働いており、会社のブログにGIFを追加したいのですが、できますか?

  4. 1. 「ダッシュボード」はありませんが、
    2. 「プラグイン」はあります。どこにも「追加」とは書かれておらず、アクティブなもののリストと、アップグレードが必要なものがいくつかあるだけです。

    それで、何が足りないのでしょうか?

  5. 一般的に、GIFを記事に実装しても間違いはありません。したがって、初心者にとっては素晴らしいアドバイスです。

  6. こんにちは、

    WordPressサイトにGiphyをインストールしましたが、アイコンをクリックすると、Giphyのウィンドウが無限に読み込まれます。

    この問題を抱えている人はいますか??

コメントを残す

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