WordPressにiFrameを埋め込む方法

オンラインでコンテンツを共有することは一般的な方法です。 ただし、特定の種類のコンテンツを組み込む方法を理解しようとすると、困惑する場合があります。 大きなファイルや他の Web サイトの特定のアイテムを共有することは、場合によっては困難な場合があります。

幸いなことに、WordPress Web サイトに特定のタイプのコンテンツを表示するために採用できる、かなり単純な Web デザインの実践があります。 HTML を使用してインライン フレーム (iFrame) を作成すると、画像、ビデオ、およびその他のメディアをオンラインで簡単に共有できます。

この記事では、Web サイトでの iFrame のさまざまな用途について説明します。 また、手動とプラグインの両方で iFrame を作成する手順についても説明します。 始めましょう！

iFrame の使用

iFrame を使用すると、基本的に Web サイトに小さなポータルを作成して、別の場所からのコンテンツを表示できるようになります。 これは、いくつかのシナリオで役立ちます。

iFrame を使用すると、表示するファイルを実際にホストする必要がなくなります。 コンテンツは元の場所にとどまり、サイトのフレームを通して表示できます。 この手法が役立つ 1 つの方法は、大きなファイルを表示する場合です。 iFrame を使用すると、読み込み速度を遅くすることなく、そのコンテンツを Web サイトに表示できます。

HTML5 で許可されているフレームの種類は iFrame だけです。 それらを使用して表示できるコンテンツには、次のようなさまざまな種類があります。

• 画像: iFrame を使用して、外部のギャラリーから高品質の画像を表示し、ファイル サイズによる妥協を避けることができます。
• ビデオ: YouTube や Vimeo などのプラットフォームでビデオをホストし、iFrame を使用してそれらを Web サイトに配置すると、Web サイトのストレージ スペースを解放しながらユーザー エクスペリエンスを向上させることができます。
• その他の Web コンテンツ:ポートフォリオ ページやレシピなど、他の Web サイトのコンテンツを強調表示すると、リッチ コンテンツを視聴者に簡単に届けることができます。

iFrame を使用すると、複雑な著作権ルールも回避できます。 いくつかの裁判所は、iFrame を使用して著作権で保護された素材を表示することは、すべての場合において著作権侵害を構成しないとの判決を下しました。

Web サイトには、そのコンテンツが iFrame に含まれないようにするスクリプトを含めることもできます。 ただし、使用するコンテンツの元の作成者のクレジットを常に表示するか、続行方法がわからない場合は法的助言を求めることをお勧めします。

プラグインで iFrame を使用する

WordPress Web サイトで iFrame を使用する最も簡単な方法の 1 つは、iFrame プラグインを使用することです。 幸いなことに、選択できる高評価のオプションがいくつかあります。

ステップ 1: iFrame プラグインをダウンロードして構成する

この例では、高度な iFrame プラグインを使用します。 柔軟性があり、使いやすく、非常に高い評価を得ています。

プラグインをインストールしてアクティブ化すると、WordPress ダッシュボードに新しいAdvanced iFramesメニュー項目が表示されます。 Advanced iFrame には、非常に広範なオプション セットがあります。 [オプション]タブから始めて、「クイック スタート」ビデオを確認してください。

次に、下にスクロールして、プラグインのオプションの一部を確認できます. これらはすべて、役立つ説明と選択しやすい選択肢が豊富に用意されています。

Advanced iFrames には、無料の iFrame チェッカーも用意されています。このチェッカーは、指定した URL をチェックして、コンテンツが iFrame に含まれないようにするスクリプトが含まれているかどうかを確認します。 Web サイトの iFrame で URL を使用する前に、このツールで URL を実行することをお勧めします。

[基本設定]タブも確認する必要があります。 そこでは、高さ、幅、枠線などの iFrame の要素をカスタマイズできます。

ニーズに合わせてプラグインの設定を構成したら、Web サイトで iFrame の使用を開始できます。

ステップ 2: 高度な iFrame ブロックを使用する

WordPress Block Editor で、高度な iFramesブロックを使用できるようになりました。

初めてこのブロックを使用するときにこのブロックが見つからない場合は、ウィジェットカテゴリの下にあります。

Advanced iFrameブロックをクリックすると、プラグイン作成者の Web サイトからコンテンツが自動的に読み込まれます。 ページの右側にある[ブロック]オプションを使用して、ブロックを構成できます。

そこに、iFrame に表示するコンテンツの URL を追加できます。 必要に応じて、プラグインの設定の一部をオーバーライドすることもできます。

ステップ 3: サイトをプレビューする

URL を iFrame チェッカーでテストした場合は、問題ありません。 ただし、コンテンツを公開する前に変更をプレビューすることをお勧めします。 iFrame を編集して変更すると、iFrame のライブ プレビューが表示されます。

編集ウィンドウの右上隅にある[プレビュー]オプションを使用して、サイトのメニューとサイドバーのコンテキストで投稿を表示することもできます。

プラグインなしで iFrame を使用する

プラグインを使用したくないが iFrame を使用したい場合は、幸運です! 投稿やページにコードを手動で適用して、iFrame コンテンツを含めることができます。

ステップ 1: 埋め込みコードを挿入する

YouTube のビデオなどのコンテンツを Web サイトに組み込みたい場合は、YouTube が提供する埋め込みコードを見つける必要があります。 [共有]をクリックすると、動画の下に表示されます。

これにより、共有オプションのメニューが表示されます。 [埋め込み]を選択して、iFrame に必要なコードを取得する必要があります。

別のウィンドウが開き、埋め込まれたコンテンツがどのように表示されるかのプレビューが表示されます。 その後、iFrame コード スニペットをコピーできるようになります。

視聴者が特定のタイム コードでコンテンツの表示を自動的に開始するようにする場合は、 [開始時刻]ボックスをオンにすることもできます。

次に、WordPress の投稿に戻り、カスタム HTMLブロックを追加します。 これは、 [書式設定]カテゴリの下にあります。

このブロックを投稿に追加したら、YouTube ページからコピーした埋め込みコードを貼り付けるだけです。

次に、埋め込みが適切に機能し、希望どおりに表示されることを確認します。 カスタム HTMLブロックの[プレビュー]をクリックして、iFrame が機能しているかどうかを確認できます。

これで、Web サイトに iFrame を正常に配置できました。 同じプロセスは、埋め込みコードを提供するどのプラットフォームでも機能します。

ステップ 2: iFrame をカスタマイズする

投稿またはページでの iFrame の表示方法に満足できない場合は、コード内の値の一部を手動で調整できます。 Cascading Style Sheets (CSS) を使用して、Web サイトでの iFrame の表示方法を完全にカスタマイズすることをお勧めします。

iFrame タグでは、多数のカスタム プロパティを使用できます。 ただし、これらの多くは HTML5 でサポートされなくなっていることに注意してください。 カスタム HTMLブロックで特定のフォーマットを直接オーバーライドできない場合があるため、前述のように、テーマの CSS を調査する必要がある可能性があります。

ステップ 3: iFrame コンテンツを定期的に確認する

iFrame を使用する場合は、フレーム化されたコンテンツを定期的に確認する必要があります。 編集または品質管理ができないコンテンツへのウィンドウを開いているため、いつでも Web サイトに問題が発生する可能性があります。

たとえば、この例で使用した動画が YouTube チャンネルから削除された場合、投稿には破損したプレーヤーが含まれます。 これは、Web サイトに視覚的な影響を与えるため、リンク切れよりも少し明白です。 iFrame コンテンツを定期的に確認することで、機能しなくなったメディアを変更または削除できます。

WP Engine でサイトを最適化する

Web サイトで iFrame を使用すると、リッチ メディアと動的コンテンツを組み込みながら、物事を円滑に進めることができます。 ここ WP Engine では、重要な Web デザインの概念を理解し、最高の開発者リソースにアクセスできることの重要性を認識しています。

さらに、最高のデジタル エクスペリエンスを顧客に提供できるよう、私たちは全力でサポートします。 完全に管理された WordPress ホスティング プランの多様な選択肢があるため、美しい Web サイトの設計に集中できます。