WordPressのiframe埋め込みガイド！表示されない原因やプラグインの選び方まで徹底解説

WordPressでiframeを埋め込みたいのに、うまく表示されなかったり、プラグインを使うべきか迷ったりしていませんか。

この記事では、WordPressでiframeを埋め込む基本の方法から、プラグインを使うべき場面、表示されないときの考え方まで、順番にやさしく整理していきます。

WordPressのiframe埋め込みとは？ まずは基本をやさしく整理

iframeでできることと向いている使い方

iframeが活躍しやすいのは、外部サービスの内容をリンクだけで案内するのではなく、その場で見せたいときです。

私が実際によく見るのは、次のような使い方です。

用途	具体例	向いている理由
地図の表示	店舗案内ページ	ページ内で場所を確認しやすいため
動画の表示	サービス紹介ページ	別ページに移動せず見てもらいやすいため
フォームの表示	お問い合わせページ	外部フォームをそのまま利用しやすいため
資料の表示	PDFやスライドの共有	内容をざっと確認しやすいため
カレンダーの表示	イベント案内や予約受付	予定を見ながら行動しやすいため

このように、WordPressでiframeを使う場面は意外と多いです。ただ、単にリンクを置くだけで十分なケースもあります。

無理に埋め込むのではなく、読者にとって見やすいかどうかで判断することが大切です。

URL貼り付けとの違いを知っておく

WordPressには、URLを貼るだけで外部コンテンツを表示しやすい仕組みが用意されていることがあります。

そのため、すべてをiframeで埋め込まなければいけないわけではありません。

考え方としては次の通りです。

• URLを貼るだけで表示できるものは、その方法を優先する
• URLだけでは難しいものは、埋め込み用のiframeコードを使う
• 繰り返し使う場合や調整が必要な場合は、プラグインも検討する

この違いを知っておくだけでも、必要以上に複雑な方法を選ばずに済みます。

WordPressでiframeを埋め込む方法は3つある

いちばん基本なのはカスタムHTMLで貼る方法

もっとも基本的なのは、カスタムHTMLブロックにiframeコードを貼り付ける方法です。余計な設定が少なく、まず試しやすいのがこの方法です。

流れはシンプルです。

• 埋め込み元サービスでiframeコードを取得する
• WordPressの投稿または固定ページを開く
• カスタムHTMLブロックを追加する
• 取得したコードを貼り付ける
• プレビューで表示を確認する

この方法は、次のような場面に向いています。

• 埋め込みコードが用意されている
• 難しい調整は必要ない
• プラグインを増やしたくない
• 少ない回数だけ埋め込みたい

最初からプラグインに頼るより、まずこの方法を試したほうが、仕組みを理解しやすいことが多いです。

埋め込み元の共有機能を使う方法

サービスによっては、共有メニューから埋め込みコードをコピーできることがあります。

この場合は、最初から表示用に整ったコードを使えるので、自分でタグをいじって失敗しにくいです。

よくある例としては、次のようなものがあります。

• 動画サービス
• 地図サービス
• フォーム作成サービス
• スライドや資料共有サービス
• カレンダー共有サービス

「共有」や「埋め込み」という項目が見つかるなら、まずそこから取得するのがおすすめです。

プラグインを使って管理しやすくする方法

プラグインを使う方法は、繰り返し埋め込み作業を行う人や、細かい表示調整をしたい人に向いています。

ショートコードで呼び出せるタイプや、サイズの調整がしやすいタイプもあり、使い方が合えば便利です。

ただし、プラグインは増やせば増やすほどよいわけではありません。

管理の手間や相性の問題も出てくるため、必要なときだけ導入するのが基本です。

• 一度だけ埋め込むなら、まずはカスタムHTMLを試す
• 複数ページで使うなら、プラグインも候補になる
• 細かい調整が必要なら、プラグインが役立つことがある
• シンプルな運用を優先するなら、非プラグインの方法が向いている

プラグインは必要？ 使うべき場面と使わなくていい場面

プラグインを使うとラクになる場面

プラグインが役立ちやすいのは、埋め込み作業を何度も行う場合です。

毎回HTMLを貼るより、設定や呼び出しが楽になることがあります。

状況	非プラグイン	プラグイン
1ページだけ埋め込む	向いている	少し大げさ
複数ページで繰り返し使う	手間が増えやすい	向いている
サイズ調整をよく行う	手動調整が必要	比較的ラク
HTMLに苦手意識がある	少し不安がある	操作しやすい場合がある
管理画面でまとめて扱いたい	不向き	向いている

こうして比べると、プラグインは必須というより、手間を減らすための選択肢だと分かります。

プラグインを使わないほうがいい場面

一方で、プラグインを増やさないほうがよいケースもあります。

埋め込みの数が少ないのにプラグインに頼りすぎると、サイト全体の管理が重くなることがあるからです。

• 数ページだけに一度きり埋め込みたい
• カスタムHTMLで問題なく表示できる
• サイトをできるだけ軽く保ちたい
• 運用ルールをシンプルにしたい
• 更新確認の手間を増やしたくない

まずはプラグインなしでできるかを確認し、必要があれば追加する流れのほうが失敗しにくいです。

プラグインを選ぶときのチェックポイント

プラグインを使うなら、名前だけで選ぶのではなく、使い勝手と管理のしやすさを見ておきたいです。

最低限、次の点を確認しておくと判断しやすくなります。

• 設定画面が分かりやすいか
• ショートコードやブロックに対応しているか
• 幅や高さの調整がしやすいか
• スマホ表示を整えやすいか
• 不要な機能が多すぎないか
• 更新やサポートの情報を確認しやすいか

使いこなせない多機能プラグインを入れるより、必要な機能だけそろったものを選ぶほうが運用しやすいです。

iframeが表示されない原因は？ まず疑いたいポイント

埋め込み先がiframeを許可していない

いちばん見落としやすいのが、埋め込み先そのものがiframe表示に対応していないケースです。

こちらの設定が正しくても、相手側が許可していなければ表示されません。

たとえば次のような状態なら、この可能性を疑いたいです。

• コードは入っているのに中身が空白になる
• そのURLだけうまく表示されない
• ほかの埋め込み先では問題ない

この場合は、WordPress側をいくら調整しても解決しないことがあります。

公式の埋め込み方法が用意されているならそれを使い、無理なら通常リンクに切り替えるほうが現実的です。

貼り付ける場所が間違っている

次によくあるのが、iframeコードを通常の文章ブロックに入れてしまうケースです。

これだとコードとして認識されず、文字として表示されたり、保存後に崩れたりすることがあります。

確認したいのは次の点です。

• カスタムHTMLブロックに貼っているか
• 編集画面の切り替えで崩れていないか
• 余計な装飾が入っていないか

基本的なところですが、ここでつまずくケースは少なくありません。

幅や高さの設定が合っていない

iframeは表示できていても、サイズが合っていないと「出ていないように見える」ことがあります。

特に高さが小さすぎると、真っ白な箱のように見えることがあります。

確認項目	よくある失敗	見直しの方向
width	固定値で画面からはみ出す	画面に合わせやすくする
height	低すぎて中身が見えない	余裕を持って設定する
周囲の余白	狭くて見えにくい	表示スペースを確保する
親要素の幅	レイアウトに押し込まれる	全体の構成も見直す

特にスマホでは、PCで問題なく見えても、表示が苦しくなることがあります。

テーマや別のプラグインが影響している

iframeが表示されない原因として、テーマや別のプラグインの影響もあります。

たとえば、表示を高速化する機能や、画像やコンテンツの読み込み方法が影響して、うまく表示されないことがあります。

次のようなサインがあれば、この可能性を疑ってみてください。

• プレビューでは出るのに公開画面で見えない
• あるページだけ表示されない
• テーマ変更後に挙動が変わった
• キャッシュ削除で一時的に表示された

この場合はiframe自体が悪いのではなく、周辺の設定との相性が原因になっていることがあります。

iframeが表示されないときの直し方｜順番に確認すれば慌てない

まずはこの順番でチェックする

私なら、まず次の順番で確認します。

• 埋め込み元がiframeに対応しているか確認する
• コードが途中で欠けていないか見る
• カスタムHTMLブロックに貼っているか確認する
• プレビューと公開画面の両方を確認する
• 別のブラウザやスマホでも見てみる
• 幅と高さを見直す
• キャッシュを削除して再確認する

トラブル時ほど、いきなり細かい設定をいじらず、基本から確認するほうが近道になりやすいです。

画面は真っ白なのにコードは合っていそうなとき

コードが正しそうなのに中身が出ないなら、埋め込み先の制限を疑います。

このときは無理にiframeにこだわらず、別の見せ方も考えたほうがうまくいくことがあります。

• 埋め込み元の案内を確認する
• URLだけで表示できないか試す
• 専用の共有機能がないか探す
• 通常リンクに切り替える

見た目にこだわるより、読者が迷わず情報にたどり着けることを優先したほうが親切です。

保存すると消えるときの考え方

「貼ったはずなのに消える」というときは、コードの内容よりも入力場所や編集方法を疑いたいです。

次の点を確認してみてください。

• 通常の文章ブロックに入れていないか
• 編集画面の切り替えで変わっていないか
• 余計な整形をしていないか
• 複数人で編集していて手順がばらばらになっていないか

このタイプのトラブルは、設定変更よりも運用ルールをそろえるだけで防げることもあります。

スマホでも見やすいiframeにするコツ

幅を固定しすぎない

初心者の方がやりがちなのが、横幅を大きな固定値で決めてしまうことです。

これでは、画面の小さい端末でレイアウトが崩れやすくなります。

• 固定しすぎるとスマホで見づらくなりやすい
• 大きく見せることより、画面に収まることが大切
• まずは読者がストレスなく見られる形を優先する

特に地図やフォームは、見た目より操作しやすさのほうが重要です。

高さ不足に注意する

スマホで多いのが、高さが足りず途中で切れてしまう状態です。

地図やフォームは縦方向の情報が多いため、高さ不足が起こりやすいです。

埋め込み内容	高さ不足で起きやすいこと	考え方
地図	操作しにくい	少し余裕を持たせる
フォーム	入力欄が隠れる	実際に入力して確認する
動画	見た目のバランスが崩れる	視聴しやすさを優先する
資料	文字が読みにくい	スクロールのしやすさも考える

机の前でPCだけ見て判断せず、できればスマホでも実際に確認しておくと安心です。

見えないときのためにリンクも残しておく

どれだけ工夫しても、iframeが最適ではない場面はあります。

そんなときに大切なのは、読者が困らない逃げ道を用意しておくことです。

• 埋め込みの下に通常リンクを置く
• 「開けない場合はこちら」と案内する
• 地図やフォームは別ページでも開けるようにする

このひと手間があるだけで、使いやすさの印象はかなり変わります。

プラグイン選びで失敗しないための考え方

シンプル重視なら機能を増やしすぎない

単純に外部コンテンツを埋め込みたいだけなら、機能が多すぎないプラグインのほうが扱いやすいことがあります。

設定項目が少ないほうが迷いにくく、運用もしやすいからです。

• HTMLが少し苦手
• 設定画面は分かりやすいほうがいい
• 同じ形式の埋め込みを複数ページで使いたい
• 短時間で公開したい

機能の多さより、無理なく使い続けられるかどうかを重視したいところです。

細かい調整が必要なら高機能タイプも候補

一方で、高さや表示方法を細かく調整したいなら、高機能なプラグインが役立つことがあります。

業務用のサイトや、見せ方にこだわりたいページではこちらが合うこともあります。

• 複数の埋め込みを使い分けたい
• ページごとに見せ方を変えたい
• サイズ調整をもっと楽にしたい
• 管理に慣れた担当者がいる

ただし、便利さと引き換えに設定が複雑になることもあるため、必要な範囲だけ使う意識が大切です。

比較するときはこの視点を持つと迷いにくい

プラグインを比べるときは、難しい専門用語より、使う側の視点で考えると判断しやすいです。

比較ポイント	見る理由
操作の分かりやすさ	続けて使えるか判断しやすい
サイズ調整のしやすさ	表示崩れを防ぎやすい
呼び出し方法の簡単さ	記事作成の手間が変わる
不要機能の少なさ	管理をシンプルにしやすい
サイトとの相性	表示トラブルを減らしやすい

人気だけで選ぶより、自分のサイトで使いやすいかどうかを軸にしたほうが後悔しにくいです。

安心してiframeを使うために押さえたい注意点

信頼できる埋め込み元を選ぶ

まず大切なのは、どこから埋め込むかです。

信頼しにくいページをそのまま表示すると、読者に不安を与えやすくなります。

• 公式サービスや信頼できる提供元を優先する
• 内容が自サイトの読者に合っているか確認する
• 不自然な広告や別誘導が多くないか見る
• 安心して見せられるものだけ使う

何でもiframeにしない

iframeは便利ですが、万能ではありません。

文字情報をしっかり読ませたい場面では、自分の文章で説明したほうが分かりやすいことも多いです。

• 読者がその場で操作したいものだけ埋め込む
• 説明文の代わりとして多用しない
• ページの主役ではなく補助として使う
• 重くなりそうなら数を絞る

使うかどうか迷ったら、読者にとって本当に便利かで判断するのがおすすめです。

最後は読者目線で確認する

埋め込めたことに満足してしまうと、読者の使いやすさの確認が後回しになりがちです。

最後は次の点を見直しておくと安心です。

• スマホでも操作しやすいか
• 表示に時間がかかりすぎないか
• 埋め込みの目的が読者に伝わるか
• 表示されない場合の導線があるか

技術的に正しいことと、読者に親切なことは必ずしも同じではありません。

だからこそ、最後は使う人の目線に戻ることが大切です。

よくある質問

WordPressでiframeを埋め込むときはプラグインなしでも大丈夫ですか？

はい、プラグインなしでも対応できることは多いです。カスタムHTMLブロックに埋め込みコードを貼り付ければ、そのまま表示できるケースは少なくありません。

まずはシンプルな方法で試し、繰り返し使う場合や細かい調整が必要な場合にプラグインを検討すると無駄がありません。

WordPressでiframeが表示されないのはなぜですか？

よくある原因は、埋め込み先がiframeに対応していない、貼り付け場所が違う、サイズ設定が合っていない、テーマや別のプラグインが影響しているといったものです。

一つずつ順番に確認していくと、原因を絞りやすくなります。

WordPressのiframe埋め込み用プラグインはどんな人に向いていますか？

複数ページで何度も使う人や、サイズ調整をもっと手軽にしたい人に向いています。

反対に、一度だけの埋め込みやシンプルな利用なら、プラグインなしのほうが管理しやすいこともあります。

まとめ｜迷ったら小さく試すところから始めよう

今日から取るべき最初の一歩は、埋め込みたい外部サービスをひとつ決めて、公式の埋め込みコードを取得し、テスト用の固定ページで試してみることです。

いきなり本番ページで悩むより、小さく確認しながら進めたほうが、落ち着いて調整しやすくなります。