外部の地図や動画が公開先で見えない？埋め込みを確かめる順番

編集プレビュー・保存した部品・公開ページを分けて見る

まず同じページと埋め込みを特定し、三つの場所を順に確認します。編集画面で見えるだけでは、保存後の内容や読者が使う公開ページの表示までは分かりません。

埋め込みは、外部サービスの地図や動画などを、自分のページの中へ表示する方法です。住所や説明本文を自分のサイトへ書くこととは異なり、外部の内容と、それを呼び出す部品の両方が関係します。単にURLを押して元のページへ進む通常のリンクとも分けます。

1. 対象を一つにそろえる。

   ページ名、公開URL、地図や動画の位置、掲載元のURL、使った部品の名前を確認します。似た別ページや、変更前のタブを比べないようにします。

2. 編集画面と、保存して開き直した部品を比べる。

   部品があるか、掲載元URLが同じか、保存時のメッセージがないかを見ます。コードを扱う方式なら、制作担当が保存前後の該当部分を確認します。保存した部品自体が未確認なら、その段階を空けて記録します。

3. 実際の公開URLを開く。

   スマホやPCで対象箇所が読み込まれた状態を見ます。管理者としての画面だけで済ませず、必要なら制作担当と読者が見る条件をそろえます。ログイン状態が違う場合は、違いを記録します。

説明用の工房の来社案内では、編集プレビューで地図を見た一方、幅390のスマホ条件で公開URLを開くと地図を見られなかった、という架空記録があります。保存後の部品、CMSの種類、掲載元の応答、原因は未確認です。「保存時に消された」「地図サービスが停止した」と原因を決める材料はありません。

編集画面で地図が見えたら、公開先でも使える？同じ来社案内のプレビュー、保存後の部品、公開ページと、住所・通常リンクの有無を分けて見ます。

原寸画像を開く

この例では住所文字はありますが、掲載元への通常リンクはありません。住所があることと、地図が使えることは別です。図の対応は確認する場所を示すもので、修正が成功した順番ではありません。

同じ困りごとの参考として、WordPress利用者の本人投稿には、プレビューでは地図が見え、保存後の実ページでは見えないという報告があります。本人は後にWordPress.comを使っていると追記しています。一人の過去の報告で、今回の架空例の原因や、すべてのWordPressで起きる不具合を示すものではありません。

使うサービスと埋め込み方式を確かめて、条件を絞る

WordPress.comか、独自に設置したWordPressか、URLを入れる埋め込み部品か、HTMLコードを入れる部品かを先に区別します。別方式の説明を、そのまま原因や修正手順にしません。

「WordPressに貼った」という説明だけでは、どの条件を調べるか決まりません。サイトを提供するサービス、使っている部品の名前、掲載元が案内している設置方法を制作担当と確認します。管理画面の見た目が似ていても、利用できるコードや保存時の扱いが同じとは限りません。

URLを入れる埋め込みブロック

WordPress.orgのEmbed blockの説明では、外部サイトのURLを専用の部品へ入れて埋め込む方法を扱っています。外部の内容を、自サイトへファイルとしてアップロードする操作とは違います。使いたいサービスとURLに対応する方式かを調べます。

通常の共有URLと、埋め込み専用のコードを入力する欄は同じではありません。掲載元の案内でどちらを取得するかを確認し、ページの本文へコード文字列だけが表示されていないかも見ます。対応が未確認なら、別のコードを次々に貼り直して原因を隠さないようにします。

Custom HTMLへコードを入れる方式

WordPress.comのCustom HTML公式説明では、iframeなど一部のタグには、有料プランと有効なホスティング機能という条件があります。これはWordPress.comの説明です。自前のサーバーに設置したWordPressへ一律に適用したり、今回の原因をプランの問題と断定したりしません。

プランや権限、利用できる部品が不明なら、契約と設定を管理する担当へ確認します。制限を回避するコード、権限の引き上げ、追加契約を一般的な解決策として先に実行するものではありません。掲載元の対応条件も確認し、保存後の部品と公開表示のどこに違いがあるかから調べます。

「リンクに変換」は、その部品の説明に限って読む

WordPress投稿を埋め込む専用ブロックの公式説明には、埋め込めないURLをリンクへ変換する選択があります。この操作名がすべての地図や動画にあるとは限りません。通常リンクで元ページを案内する考え方と、特定ブロックの操作名を混ぜないようにします。

架空の二例は、どちらもCMSの種類、プラン・権限、掲載元の応答が未確認です。上の条件は調べる分岐であり、「この設定を変えれば直る」という診断結果ではありません。

見られない間も、住所・説明・通常リンクを案内する

埋め込みだけに必要な情報を預けず、自サイトで確認済みの説明を本文に残します。掲載元への通常リンクは、実際に開いて対象を確認してから案内します。

来社案内の目的は、埋め込み部品を見せることではなく、来る人が必要な場所の情報を得られることです。住所、建物や入口の説明など、自社で確認して公開できる内容を文字で読めるようにします。埋め込みが見られないときも、何の案内ページか分かる状態を用意します。

これは案内を整える方法です。工房の架空例にあるのは住所文字の存在だけで、実住所の文字列、入口、実在する掲載元URLは示されていません。そのため、この記事では地図や押せる架空リンクを作っていません。通常リンクを追加した、読者が到着できた、という結果にもしていません。

別会社の動画例では、公開ページでの表示と掲載元リンクの存在は記録されています。しかし、キーボードと名前の確認は行っておらず、再生や読者の理解も確認した記録ではありません。地図例を直した後の成功例として読まないでください。

1. 元ページの内容と行き先をそろえる。

   地図の場所、動画の題、共有範囲を確認します。元ページが見えるかと、自サイトへ埋め込めるかは別なので、両方の結果を分けて残します。

2. リンク文を具体的にする。

   「元のページ」だけでなく、何を開けるかが分かる文にします。新しいタブを使うならその扱いも伝え、必要以上に画面を増やしません。

3. 公開ページから実際に開く。

   保存されたURLだけを読んで終えず、リンクを選び、到着先が案内した対象か確かめます。ページが開いても、訪問先への到着や動画の理解までは証明しません。

所在地・地図・入口の内容そのものを整える方法は、会社のアクセスページを作る記事で扱います。本稿は、その内容を置く外部部品が編集画面と公開先で違うときの確認に絞っています。

スマホとキーボードで、内容と操作の手掛かりを見る

枠が表示されたことと、読者が内容を読み操作できることを分けます。スマホでの幅、本文との関係、キーボードの移動と、iframeを使う場合の短い名前を確かめます。

公開ページで対象の部品まで進み、内容が読み込まれた状態を確認します。狭い画面で本文が横へはみ出していないか、地図や動画が極端に小さくなっていないか、周囲の説明を続けて読めるかを見ます。空の枠や読み込み中の一瞬だけで、表示の完了や不具合を決めません。

次に、利用者が必要とする操作を決めます。地図なら対象の場所を確かめる操作、動画なら閲覧者が選んで再生し止める操作などです。クリックやキーで何を選び、何が起きたかを別に残します。枠が見えるだけで、操作できたことにはしません。

外部の枠へ入る前に、何の内容か分かる名前を付ける

iframeは、別の文書をページ内の枠で表示するHTMLの仕組みです。MDNの説明では、title属性で中身を短く説明すると、読み上げなどの支援技術を使う人が枠の内容を識別できます。「地図」だけで対象が分かりにくければ、訪問先が分かる名前を検討します。

名前が保存されたことと、実際の読み上げや操作を確認したことは別です。使う部品がiframeとは限らないため、すべてへ同じ属性を書き足すのではなく、その部品で名前をどう付けるかを制作担当と確認します。名前の一項目だけでアクセシビリティ全体の適合を認定しません。

キーボードで操作する場合は、Tabキーなどで対象と通常リンクへ移動し、選択位置が見えるか、外部の内容からページへ戻れるか、使う部品に合うキーで必要な操作ができるかを見ます。表示、名前、操作はそれぞれ記録します。この記事の動画例の「確認していない」は、名前がないと観測した意味ではありません。

動画の自動再生や音の停止を詳しく確かめる場合は、サイトの再生条件と停止方法の記事へ進めます。外部部品が表示されたことを、実際の再生・停止の合格へ広げません。

違いが出た場所を伝え、変更後は同じ公開条件で確かめる

ページ・部品・環境と、三つの場所で観測した結果を制作担当へ具体的に伝えます。変更は担当が合意した対象に絞り、公開先での表示と必要な操作を改めて確認します。

「地図が壊れた」だけでなく、「同じ来社案内の編集プレビューでは地図が見える。幅390のスマホで公開URLを開くと見られない。保存後の部品は未確認」と伝えると、調べる段階を分けられます。これは今回の架空記録を整理した説明で、実顧客の報告ではありません。

保存内容が変わる段階で違いがあるのか、部品は残るが公開先で表示されないのか、表示されるが操作できないのかを分けて調べます。制作担当は、該当するCMSと掲載元の条件、実際の応答や表示を必要な範囲で確かめます。未確認のままテーマや追加機能を一斉に止めたり、権限や契約を変更したりすることを一般手順にはしません。

1. 変更する箇所と、戻す対象をそろえる。

   変更前の部品と必要な内容を残し、担当が認めた作業先で対象を絞ります。複数の条件を同時に変えた結果を、一つの原因の証明にしません。

2. 保存後の部品を開き直す。

   意図したURLや部品が保存されたか確認します。編集画面で再び見えたことだけで終えません。

3. 同じ公開URL・同じ条件で読み直す。

   元の問題が出た環境で表示と必要な操作を確かめ、住所・説明・通常リンクも残っているか見ます。作業用の確認結果を公開先へコピーしません。

元の問題を確かめ直すことと、影響を受ける別の部品を確認することは区別します。公開先の変更後結果をまだ取得していないなら、「修正済み」と作業が報告されても、公開確認は未完です。今回の二例とも、変更の適用、変更後の公開結果、来訪者の到着結果は未確認のままです。

更新によるメニューやフォームも合わせて点検したい場合は、更新後の表示・操作・受付の確認方法で、利用者がする操作ごとの範囲を決められます。

まとめ：三つの場所を分け、必要な案内を本文に残す

外部の地図や動画が見えないときは、埋め込み方式を確認し、編集プレビュー・保存後の部品・公開ページを順に比べます。住所や説明、確認済みの通常リンクで読者の用事を支え、原因と修正後の結果は観測してから判断します。

工房の架空例は、プレビューで地図が見えても公開先では見られない記録です。保存後の部品と原因は未確認で、住所文字はありますが通常リンクはありません。別会社の動画例は表示とリンクの存在が記録されていますが、名前やキーボードの確認はしておらず、最初の例の修正後ではありません。

WordPress.comのコード利用条件、WordPress.orgの埋め込みブロック、掲載元ごとの対応方法を混同しないようにします。一つの過去の投稿や別環境の結果を、すべてのサイトの原因と解決策へ広げません。

会社サイトの表示と案内について相談する