コンテンツをシェアすることはよくあることです。ただし、他人のコンテンツをサイトに掲載すると法的影響を受ける恐れがあるし、動画などの重いファイルをホストするとサイトのパフォーマンスが低下する恐れがあります。幸いなことに、iFrameはこれらの問題に対するシンプルなソリューションを提供します。

本記事では、iFrameの概要と、WordPressサイトでiFrameを使用する方法についてご説明します。

それでは、参りましょう。

iFrameの概要(と便利である理由)

iFrameは、ウェブページを別のページのコンテンツに埋め込む手段です。埋め込みは、HTMLタグ、外部ページのURLと、サイトでのウィンドウの表示方法に関する仕様を使用して行われます。

iFrameが便利である場合が2つあります。

1つ目は、自分が作成していないコンテンツをシェアする場合です。原則としては、iFrameを使用してのコンテンツの埋め込みは著作権侵害とはみなされませんをご参照)。そのため、埋め込みは他の手段よりも合法的かつ倫理的なシェア方法です。また、iFrame内のコードには直接アクセスできません。つまり、サイトの訪問者は埋め込みコンテンツをコピーして他の場所でシェアすることはできません。

iFrameを組み込む2つ目の理由は、動画、録音、画像などの重いファイルをシェアするためです。YouTubeはその完璧な例です。

iFrameを使用すると、コンテンツをWordPressメディアライブラリでホストせずにサイトに表示できます。メディアファイルはかなりの容量のストレージスペースを占有し、サイトのスピードを低下させる場合が多いため、これはポイントです。

YouTubeなどのプラットフォームで動画をホストし、iFrameを使用してWordPressサイトに埋め込むことでにより、サイトに直接アップロードすることのデメリットを回避できます。そうすると、あなたはオンライン社会のより倫理的な一員になるし、サイトも高速で使いやすいものになります。

WordPressでiFrameを使用する方法(3つの手段)

iFrameを使用する理由も複数ありますが、サイトに追加する手段も複数あります。今回は、WordPressサイトにiFrameを追加する最も一般的な3つの方法について説明します。

1. iFrameを手動でWordPressに追加する

iFrameをページに追加する基本的なコードは非常に簡単です。開始および終了のHTMLタグと、埋め込みたいウェブページのURLだけです。

<iframe src="example.com"></iframe>

ソースURLに関する注意事項がいくつかあります。まず、iFrameは表示できるのは、自分と同じハイパーテキスト転送プロトコルを使用するサイトのコンテンツのみです。つまり、HTTPSを使用しているサイトの場合、同じHTTPSを使用しているサイトのコンテンツのみを埋め込むことができます。同様に、HTTPを使用している場合は、HTTPを使用しているURLしか埋め込めません。

さらに、Facebook やYouTubeなどの人気のあるウェブサイトでは、手動のiFrame埋め込みが無効になっています。iFrameの埋め込みを禁止しているサイトのページを表示しようとすると、にエラーが発生します。

iFrame埋め込みが無効です

iFrame埋め込みが無効です

なお、手動の埋め込みが使用できる場合、サイトのニーズに合わせてiFrameをカスタマイズできることにもご注意ください。そこでiFrameパラメータが使用されます。最も一般的なものには次のものがあります。

たとえば、次のコードは、ウィンドウサイズが900ピクセルx 700ピクセルで、全画面表示が有効になっているiFrameで、ウェブページのその他のコンテンツがダウンロードされた後に読み込まれるように設定されています。

<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>

こちらはこのiFrameのフロントエンドでの外観です。

iFrameのフロントエンドでの外観の一例

iFrameのフロントエンドでの外観の一例

使用できるパラメーターは上記以外にもたくさんあります。ただし、上記のパラメータだけを使用することにより、YouTubeの動画などのコンテンツをシェアするための基本的なiFrameを作成できます。

2. 埋め込みコードを使用してiFrameを作成する

一部のサイトでは、コンテンツの手動でのiFrameへの埋め込みが制限されます。これにより、Facebookの投稿やYouTubeの動画など、特定の種類のコンテンツを紹介することが難しくなります。ただし、これらのソースのコンテンツをiFrameで表示できないわけではありません。

むしろ、埋め込みコードを取得するだけです。YouTubeの一例を見てみましょう。自分の動画でも他のクリエイターの動画でも、埋め込みたい動画に移動します。ビデオプレーヤーの下に、「共有」ボタンがあります。

WordPress iframe:YouTubeの共有機能

YouTubeの共有機能

このボタンをクリックすると、利用可能なさまざまな共有オプションのあるウィンドウが表示されます。それらの1つは埋め込みです。

WordPress iframe:YouTubeの埋め込み機能

YouTubeの埋め込み機能

埋め込み」オプションを選択すると、YouTubeは、ビデオをiFrameに追加するために使用できるHTMLスニペットを表示します。必要に応じてコピーして使用できるiFrameパラメーターも含まれています。パラメータが不要な場合は、ソースURLを単にコピーすることもできます。

WordPress iframe:埋め込みコード

YouTubeの埋め込みコード

埋め込みコードを使用すると、iFrameにURLを使用しようとした場合に表示されるエラーではなく、動画が表示されます。

固定ページや投稿に追加するには、ブロックエディタのカスタムHTMLブロックを使用します。

カスタムHTMLブロック

iframeをカスタムHTMLブロックとして埋め込む

旧エディターでは、テキストエディターに切り替えて、該当の場所にコードを追加します。

旧エディターでのWordPressのiframe

iframeを旧エディターを使用してカスタムHTMLブロックとして埋め込む

結果として、機能するiFrameが表示されます。

フロントエンドのWordPressのiframe

iFrameがWordPressに適切に追加されました

同様の手順に従って、Facebookの投稿をサイトに埋め込むこともできます。シェアする投稿に移動し、投稿の右上隅にある3つのドットのアイコンをクリックします。

WordPressのiframe:Facebook

Facebookの埋め込み機能

次に、「埋め込み」オプションを選択します。

Facebookの埋め込み機能を選択する

Facebookの埋め込み機能を選択する

これにより、先ほど見たYouTube動画のHTMLスニペットによく似たHTMLスニペットが表示されます。繰り返しますが、ソースURLはこのコードの最も重要な部分ですが、前述のパラメーターも使用できます。

Facebookのiframeコード

Facebookのiframeコード

このコードをウェブページに追加すれば、投稿が問題なく表示されるはずです。

WordPressに埋め込まれたFacebookのiframe

WordPressに埋め込まれたFacebookのiframe

LinkedIn、Instagram、Twitterなどの他の人気のあるソーシャルメディアサイトの多くも、投稿の埋め込みコードを提供しています。このオプションは各投稿の設定にあるはずです。

3. iFrameをプラグインを使用してWordPressに追加する

もちろん、WordPressの開発者は常に、iFrameを埋め込むなどのタスクの、たとえばプラグインの使用による簡素化に取り組んでいます。サイトへの外部コンテンツの埋め込みを頻繁に行う予定である場合、次の2つのオプションを検討してください。最も普及している手段の一つは、iFrameプラグインでしょう。

WordPress プラグインiframe

WordPress プラグインiframe

このプラグインを使用すると、ショートコードを使用してiFrameをWordPressサイトに追加できます。HTMLコードでiFrameを手動で追加する場合と同じパラメーターをすべて指定できます。一方、ページのコードを直接に触らずに済みます。

または、Advanced iFrameプラグインも試してみることもできます。

WordPress プラグインAdvanced iFrame

WordPress プラグインAdvanced iFrame

繰り返しますが、このプラグインを使用すると、ショートコードを使用してiFrameをサイトに追加できます。それに、他のユーザーが許可なくiFrameを埋め込むことを防ぐためのセキュリティコード、カスタムスタイルオプションなどの追加機能も含まれています。

20ドルの料金で、Advanced iFrame Proの6か月ライセンスにアップグレードできます。有料版では、レスポンシブなiFrame生成、ズームや遅延読み込みなどの機能が利用可能です。iFrameを使用する頻度にもよりますが、有料版の機能はお金を払う価値があります。

Need to feature a video, audio clips, or someone's else content on your site? Learn how to embed iFrame code in WordPress with this in-depth guide! ️📹🖼️Click to Tweet

まとめ

ウェブサイトのパフォーマンスと合法性は何よりも重要なことです。iFrameを使用すると、動画や録音などの他人のコンテンツを自分のサイトでホストせずに倫理的に表示できます。本記事では、WordPressでiFrameを使用できる3つの手段をご紹介しました。

  1. iFrameのWordPressサイトへの手動埋め込み
  2. 埋め込みコードを使用してiFrameを作成
  3. iFrameやAdvanced iFrameなどのWordPressプラグインを使用してiFrameを追加

iFrame及びそのWordPressサイトでの使用についてご質問がありますか?下記のコメント欄でお知らせください。


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。