メインコンテンツにスキップ

埋め込みの制約事項

PLAINERのデモコンテンツをWebサイトに埋め込む際の制約事項をまとめています。

1. iframe表示の制限

埋め込み先のWebサイトがX-Frame-OptionsContent Security Policy(CSP)frame-ancestorsディレクティブでiframe表示を制限している場合、PLAINERのデモを埋め込めません。

回避策:埋め込み先サイトの管理者に、PLAINERドメインからのiframe表示を許可するよう依頼してください。許可が難しい場合は、PLAINERの公開URLを直接リンクとして掲載する方法もあります。

2. WordPressプラグイン

WordPress専用のPLAINERプラグインは現在提供されていません。

回避策:WordPressの「カスタムHTML」ブロックにiframe埋め込みコードを貼り付けてご利用ください。

3. レスポンシブ対応

iframe埋め込みの場合、埋め込み先ページのレイアウトに応じた自動リサイズには制約があります。

回避策:iframeのstyle属性でwidth: 100%; height: 80vh;のように指定し、埋め込み先ページのレイアウトに合わせて高さを適宜調整してください。

4. ポップアップ・コンテンツが大きく表示されてしまう(2026年6月 修正済み)

2026年6月23日以前のバージョンで、PCブラウザやサイト埋め込み枠、ブラウザ幅が狭い環境において、ポップアップガイドやコンテンツ全体が以前より大きく(縮小されずに等倍で)表示されてしまう不具合がありました。

特に、埋め込み枠の幅(例:約1200px)よりもコンテンツの作成幅(例:2000px)が広い場合に顕在化し、本来は枠に合わせて縮小されるべき表示が等倍のままになるため、ガイドやコンテンツが枠からはみ出して見た目が崩れる状態でした。

この問題はPLAINER側の修正(2026年6月23日リリース)により解消されています。修正後は、PCブラウザ・埋め込み枠・タブレット環境では、コンテンツの作成幅に合わせて自動縮小される従来の表示(fit-to-width)に戻ります。

修正後も大きく表示される状態が続く場合は、以下の点をご確認ください。

  • ブラウザキャッシュをクリアして再読み込みしてください

  • 埋め込み先ページのHTMLに、iframeコンテナのサイズを明示的に指定してください(例:height: 80vh; width: 100%;

  • それでも解決しない場合は、サポートチームまでお問い合わせください

5. fit-to-width(自動縮小)表示とは

コンテンツの作成幅が表示枠より広い場合に、枠に合わせてコンテンツ全体を自動的に縮小して収める表示方式です。サイト埋め込みや狭いウィンドウでも、コンテンツが枠内に収まって見やすくなります。PCブラウザ・タブレット・埋め込み枠ではこの方式が適用されます。

6. スマートフォンでの表示

iframeで埋め込んだコンテンツをスマートフォン(画面幅480px以下)で表示した場合、ガイドは等倍で表示されます。ガイドのボタンは通常サイズでタップでき、操作が正常に行えます。

PC幅のキャプチャ素材は画面横幅を超える場合があります。その際は横スクロールで閲覧できます。

スマートフォン向けの表示最適化オプション(?mobile_mode=true による縮小表示など)については、スマートフォンでの表示を最適化するをご覧ください。

関連ヘルプ記事

こちらの回答で解決しましたか?