コンテンツをシェアすることはよくあることです。ただし、他人のコンテンツをサイトに掲載すると法的影響を受ける恐れがあるし、動画などの重いファイルをホストするとサイトのパフォーマンスが低下する恐れがあります。幸いなことに、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パラメータが使用されます。最も一般的なものには次のものがあります。
- 幅（width）：このパラメーターを使用すると、iFrameの幅をピクセル単位で設定できます。
- 高さ（height）：幅パラメーターと同様に、高さはウェブページ上のiFrameウィンドウのサイズをピクセル単位で設定します。
- 許可（allow）：このパラメータを使用すると、全画面表示や支払い処理など、iFrameの特定のデフォルト機能を設定できます。
- 重要性（importance）：このパラメーターを使用して、iFrameの優先順位を指定できます。
たとえば、次のコードは、ウィンドウサイズが900ピクセルx 700ピクセルで、全画面表示が有効になっているiFrameで、ウェブページのその他のコンテンツがダウンロードされた後に読み込まれるように設定されています。
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>こちらはこのiFrameのフロントエンドでの外観です。
使用できるパラメーターは上記以外にもたくさんあります。ただし、上記のパラメータだけを使用することにより、YouTubeの動画などのコンテンツをシェアするための基本的なiFrameを作成できます。
2. 埋め込みコードを使用してiFrameを作成する
一部のサイトでは、コンテンツの手動でのiFrameへの埋め込みが制限されます。これにより、Facebookの投稿やYouTubeの動画など、特定の種類のコンテンツを紹介することが難しくなります。ただし、これらのソースのコンテンツをiFrameで表示できないわけではありません。
むしろ、埋め込みコードを取得するだけです。YouTubeの一例を見てみましょう。自分の動画でも他のクリエイターの動画でも、埋め込みたい動画に移動します。ビデオプレーヤーの下に、「共有」ボタンがあります。
このボタンをクリックすると、利用可能なさまざまな共有オプションのあるウィンドウが表示されます。それらの1つは埋め込みです。
「埋め込み」オプションを選択すると、YouTubeは、ビデオをiFrameに追加するために使用できるHTMLスニペットを表示します。必要に応じてコピーして使用できるiFrameパラメーターも含まれています。パラメータが不要な場合は、ソースURLを単にコピーすることもできます。
埋め込みコードを使用すると、iFrameにURLを使用しようとした場合に表示されるエラーではなく、動画が表示されます。
固定ページや投稿に追加するには、ブロックエディタのカスタムHTMLブロックを使用します。
旧エディターでは、テキストエディターに切り替えて、該当の場所にコードを追加します。
結果として、機能するiFrameが表示されます。
同様の手順に従って、Facebookの投稿をサイトに埋め込むこともできます。シェアする投稿に移動し、投稿の右上隅にある3つのドットのアイコンをクリックします。
次に、「埋め込み」オプションを選択します。
これにより、先ほど見たYouTube動画のHTMLスニペットによく似たHTMLスニペットが表示されます。繰り返しますが、ソースURLはこのコードの最も重要な部分ですが、前述のパラメーターも使用できます。
このコードをウェブページに追加すれば、投稿が問題なく表示されるはずです。
LinkedIn、Instagram、Twitterなどの他の人気のあるソーシャルメディアサイトの多くも、投稿の埋め込みコードを提供しています。このオプションは各投稿の設定にあるはずです。
3. iFrameをプラグインを使用してWordPressに追加する
もちろん、WordPressの開発者は常に、iFrameを埋め込むなどのタスクの、たとえばプラグインの使用による簡素化に取り組んでいます。サイトへの外部コンテンツの埋め込みを頻繁に行う予定である場合、次の2つのオプションを検討してください。最も普及している手段の一つは、iFrameプラグインでしょう。
このプラグインを使用すると、ショートコードを使用してiFrameをWordPressサイトに追加できます。HTMLコードでiFrameを手動で追加する場合と同じパラメーターをすべて指定できます。一方、ページのコードを直接に触らずに済みます。
または、Advanced iFrameプラグインも試してみることもできます。
繰り返しますが、このプラグインを使用すると、ショートコードを使用してiFrameをサイトに追加できます。それに、他のユーザーが許可なくiFrameを埋め込むことを防ぐためのセキュリティコード、カスタムスタイルオプションなどの追加機能も含まれています。
20ドルの料金で、Advanced iFrame Proの6か月ライセンスにアップグレードできます。有料版では、レスポンシブなiFrame生成、ズームや遅延読み込みなどの機能が利用可能です。iFrameを使用する頻度にもよりますが、有料版の機能はお金を払う価値があります。
まとめ
ウェブサイトのパフォーマンスと合法性は何よりも重要なことです。iFrameを使用すると、動画や録音などの他人のコンテンツを自分のサイトでホストせずに倫理的に表示できます。本記事では、WordPressでiFrameを使用できる3つの手段をご紹介しました。
- iFrameのWordPressサイトへの手動埋め込み
- 埋め込みコードを使用してiFrameを作成
- iFrameやAdvanced iFrameなどのWordPressプラグインを使用してiFrameを追加
iFrame及びそのWordPressサイトでの使用についてご質問がありますか？下記のコメント欄でお知らせください。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す