Webカタログをサイトに埋め込む方法

ウェブdeカタログで作成したWebカタログは、iframeタグを使って自社サイトやブログに簡単に埋め込めます。このページでは、基本的な埋め込みコードから、スマートフォン対応、トラブルシューティングまで解説します。

基本の埋め込みコード

以下のiframeコードをHTMLに貼り付けることで、カタログをサイトに埋め込めます。赤字部分を実際のカタログURL・タイトル・サイズに書き換えてください。

<iframe
  frameborder="0"
  width="700"
  height="525"
  title="カタログのタイトル"
  src="カタログのURL"
  scrolling="no"
  allowfullscreen="true"
></iframe>

各属性の説明

実際の埋め込みコード例（サンプルカタログ）

<iframe
  frameborder="0"
  width="700"
  height="525"
  title="ウェブdeカタログ サンプル パンフレット ホワイト"
  src="https://www.webdecatalog.jp/example/white/index.html"
  scrolling="no"
  allowfullscreen="true"
></iframe>

カタログURLの確認方法

埋め込みに使用するカタログURLは以下の2つの方法で確認できます。

1. 納品メールから確認

制作完了時に送付される納品メールに、カタログのURLが記載されています。メール内の「カタログURL」をiframeのsrc属性にそのままコピーしてください。

2. 管理画面から確認

ウェブdeカタログの管理画面にログインし、対象のプロジェクトを開くとカタログURLを確認できます。URLの末尾は通常 index.html になっています。

サイズのカスタマイズ

カタログはアスペクト比4:3で制作されています。widthとheightは4:3の比率を保つように設定してください。

widthをパーセント指定（例: width="100%"）にするとコンテナ幅に追従しますが、heightはピクセル固定のため高さが崩れることがあります。レスポンシブ対応にはCSSによる方法を推奨します（次のセクションを参照）。

スマートフォン・タブレット対応（レスポンシブCSS）

iframeのwidthとheightをピクセル固定にすると、スマートフォンでは横にはみ出して表示されます。以下のCSSを使うことでレスポンシブに対応できます。

推奨：aspect-ratioを使った方法（モダンブラウザ対応）

.catalog-embed-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.catalog-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

HTML側は以下のように <div> で囲んで使います：

<div class="catalog-embed-wrap">
  <iframe
    src="カタログのURL"
    title="カタログのタイトル"
    scrolling="no"
    allowfullscreen="true"
  ></iframe>
</div>

メディアクエリを使った方法（IE11対応が必要な場合）

.catalog-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 = 75% */
}
.catalog-embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  .catalog-embed-wrap {
    padding-top: 75%;
  }
}

自社サーバーにアップロードして埋め込む場合

ウェブdeカタログでは、カタログデータを自社サーバーにアップロードして運用するオプション（ローカルファイルオプション）があります。この場合、iframeのsrcにはサーバー上のパスを指定します。

<!-- 例: 自社サーバーの /catalog/spring2026/ にアップロードした場合 -->
<iframe
  frameborder="0"
  width="700"
  height="525"
  title="2026年春夏カタログ"
  src="/catalog/spring2026/index.html"
  scrolling="no"
  allowfullscreen="true"
></iframe>

自社サーバーへのファイル設置方法や注意点についてはローカル環境対応オプションのページをあわせてご確認ください。

トラブルシューティング

埋め込んでも表示されない

カタログを配信しているサーバーが X-Frame-Options: DENY または SAMEORIGIN を設定している場合、iframeでの埋め込みがブラウザにブロックされます。ウェブdeカタログの標準配信URLはiframe埋め込みに対応しています。自社サーバーにアップロードする場合は、サーバーの設定を確認してください。

スクロールバーが表示される

iframeに scrolling="no" を設定しても、ブラウザによっては表示されることがあります。CSSで overflow: hidden を指定するか、iframeのサイズをカタログの実際のサイズに合わせることで解決できます。

HTTPS混在コンテンツエラー

自社サイトがHTTPSの場合、iframeのsrcもHTTPSである必要があります。ウェブdeカタログの標準配信URLはHTTPS対応済みです。自社サーバーを利用する場合はSSL証明書の設定を確認してください。