ブログ編集でiframeのタグを直接埋め込む方法をお伝えします。
<iframe>タグが入っているものが入力対象となります。
※iframe内のソースコードはサポート外となります。
※サイトドメインとiframeの参照ドメインのどちらかがSSL化(https://)されていない場合は、うまく表示されません。ご注意ください。
※ページ編集側のiframe注意点もご確認ください。
>表示されない場合
目次
完成イメージ
操作方法
1. iframeを挿入したい場所の左側に表示する「+(プラス)」ボタンをクリック。
※ブログではEnter(段落を分ける改行)とShift + Enter(単なる改行)の二種類の改行が使えますが、プラスボタンが表示されるのは「Enter」の改行のみです。
※文章の途中には挿入できません。
参考:ブログで文章の回り込みはできますか?
2. 「項目の追加」画面で「iframe」を選択します。
3. iframeのタグを入れて「コンテンツを取得ボタン」をクリックします。
4. 下記のように反映されます
表示されない場合
<scriptタグの場合>
iframeパーツでは、scriptタグを設定することができません。scriptタグの場合はJavaScript埋め込みパーツをご利用ください。
■「JavaScript埋め込み」についてはこちら
>【機能詳細】ブログ/項目を追加する方法「JavaScript埋め込み」
<セキュリティ設定>
- 表示元のセキュリティ設定
- Content Security Policy (CSP) ディレクティブの見直し
- X-Frame-Optionsヘッダーの見直し
- クロスオリジンリソース共有 (CORS) ポリシーの見直し
- Feature Policy (または Permissions Policy)の見直し
- エンドユーザー側のブラウザ設定
- HTTPSとHTTPの混在コンテンツ(Mixed Content)の確認
<iframeの呼び出し先が「http」となっている場合>
一般的な公開サイトは「https」と暗号化されたURLのため、iframeの呼び出し先が「http」となっていて暗号化されていないURLの場合は、ブラウザの仕様で暗号化されたページ内に非暗号化のページを読み込むことを禁止しているため、iframe内が表示されません。
そのため、iframe内のURLを「https」に変更してください。
※該当のページが暗号化に対応していない場合はSSL証明書の設定が必要となりますので、リンク先のサーバーで設定してください。
(例)
表示されない:呼び出し先が暗号化されていないURL
<iframe width="560" height="315" src="http://www.youtube.com/embed/g_KlkmsrC9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
表示される:呼び出し先が暗号化されているURL
<iframe width="560" height="315" src="https://www.youtube.com/embed/g_KlkmsrC9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>