ウェブサイトにフリップブックを埋め込む方法
WordPress、Webflow、Squarespace、Wix、カスタムHTMLサイト向けのステップバイステップガイド。
ウェブサイトにフリップブックを埋め込む方法
フリップブックの最も効果的な使い方の一つは、ウェブサイトに直接埋め込むことです。読者を別のリンクに送る代わりに、既存のページ内にインタラクティブなパブリケーションを配置できます — ランディングページ、ブログ記事、リソースライブラリ、製品ページなどに。
このガイドでは、ZenFlipの埋め込みコードの取得方法と、最も人気のあるウェブサイトプラットフォームでの使用方法を説明します。
埋め込みコードの取得
すべてのZenFlipパブリケーションには、ダッシュボードからコピーできる埋め込みコードがあります：
ZenFlipダッシュボードに移動します
埋め込みたいパブリケーションをクリックします
「Share」ボタンをクリックします
「Embed」タブを選択します
iframeコードをコピーします
埋め込みコードは次のようになります：
`html <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe> `
ページレイアウトに合わせてwidthとheightの値を調整できます。フリップブックビューアはレスポンシブで、指定したコンテナに適応します。
WordPressでの埋め込み
ブロックエディター（Gutenberg）の使用
フリップブックを配置したいページまたは投稿を開きます
「+」ボタンをクリックして新しいブロックを追加します
「カスタムHTML」を検索して選択します
HTMLブロックにZenFlipの埋め込みコードを貼り付けます
「プレビュー」をクリックして見た目を確認します
ページを公開または更新します
クラシックエディターの使用
ページまたは投稿を開きます
「テキスト」タブに切り替えます（「ビジュアル」ではなく）
フリップブックを表示したい場所に埋め込みコードを貼り付けます
「ビジュアル」に戻してプレビューします
公開または更新します
WordPressのヒント
テーマのコンテンツエリアが狭い場合、iframeのwidthを「100%」に設定して利用可能なスペースを埋めます
フルウィズのフリップブックには、Elementorなどのページビルダーやフルウィズのページテンプレートの使用を検討してください
一部のセキュリティプラグインはiframeタグを除去する場合があります。保存後に埋め込みが消える場合は、セキュリティプラグインの設定を確認してください
Webflowでの埋め込み
Webflowデザイナーでプロジェクトを開きます
追加パネルから「Embed」要素をページにドラッグします
コードフィールドにZenFlipの埋め込みコードを貼り付けます
埋め込みエディターを閉じます
スタイルパネルを使用して埋め込み要素のサイズを調整します
サイトを公開します
Webflowはサイジングの精密なコントロールを提供します。埋め込みコンテナを特定のピクセル高さに設定するか、よりダイナミックなレイアウトのためにビューポートの高さ（vh）単位を使用できます。
Squarespaceでの埋め込み
Squarespaceエディターでページを開きます
フリップブックを追加したい場所で「+」ボタンをクリックします
コンテンツブロックから「Code」を選択します
ZenFlipの埋め込みコードを貼り付けます
「Apply」をクリックします
ページを保存して公開します
Squarespaceは埋め込みをコンテナでラップします。フリップブックが小さく表示される場合は、iframeコードのheight値を増やしてください（700または800ピクセルを試してください）。
Wixでの埋め込み
Wixエディターでサイトを開きます
左メニューの「Add」をクリックします
「Embed Code」を選択し、「Embed HTML」を選びます
ページにコードウィジェットが表示されます
「Enter Code」をクリックしてZenFlipの埋め込みコードを貼り付けます
「Update」をクリックします
レイアウトに合わせてウィジェットをドラッグしてリサイズします
サイトを公開します
Wixでは、キャンバス上で埋め込みウィジェットを手動でサイズ設定する必要があります。快適に読めるよう十分な大きさにしてください。
カスタムHTMLサイトでの埋め込み
独自のHTMLを管理している場合、ページソースに直接埋め込みコードを貼り付けます：
`html <div style="max-width: 900px; margin: 0 auto;"> <iframe src="https://zenflip.io/embed/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
ラッピングのdivはフリップブックを中央に配置し、最大幅を設定します。デザインに合わせてこれらの値を調整してください。
埋め込みをレスポンシブにする
画面サイズに合わせてスムーズにスケーリングするフリップブックには、レスポンシブラッパーテクニックを使用します：
`html <div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;"> <iframe src="https://zenflip.io/embed/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen title="Your Publication Title" ></iframe> </div> `
padding-bottom: 75%は4:3のアスペクト比を作成します。横長のパブリケーションにはpadding-bottom: 56.25%（16:9比率）を試してください。縦長のパブリケーションにはpadding-bottom: 125%を試してください。
埋め込みフリップブックのベストプラクティス
十分な高さを確保。 フリップブックが小さすぎると、読者は目を細めることになります。デスクトップでは600ピクセルが合理的な最小高さです。フリップブックがメインコンテンツであるランディングページでは、700〜800ピクセル、またはフルビューポートの高さも検討してください。
title属性を追加。 iframeタグにtitle="Your Publication Name"を含めることでアクセシビリティが向上します。スクリーンリーダーはこれを使用して埋め込みコンテンツを説明します。
ページ読み込み時間を考慮。 フリップブックは非同期で読み込まれるため、ページの速度を低下させません。ただし、埋め込みをファーストビューの下（ページのより下）に配置すると、訪問者が最初のコンテンツを見た後に読み込まれます。
フォールバックリンクを提供。 一部の企業ネットワークはiframeをブロックします。埋め込みの下に、テキストリンクの追加を検討してください：「表示に問題がありますか？新しいタブで開く」
モバイルでテスト。 ZenFlipビューアはレスポンシブでタッチジェスチャーをサポートしていますが、ページレイアウトがスマートフォンで埋め込みを使用できないほど小さなサイズに制約していないか確認してください。
有料プランの埋め込み設定
Creatorプラン以上では、追加の埋め込みオプションがあります：
ビューアからZenFlipブランディングを削除
カスタムドメイン - 独自ドメインからの埋め込み（例：publications.yourcompany.com）
パスワード保護 - フリップブック読み込み前にパスワードを要求（Businessプラン）
トラブルシューティング
埋め込みが空白で表示される： パブリケーションが「Public」の表示設定になっていることを確認してください。プライベートパブリケーションは埋め込みできません。
iframeが除去される： 一部のCMSプラットフォームやセキュリティプラグインはiframeタグを削除します。リッチテキストエディターに貼り付けるのではなく、「HTML」または「Code」ブロックオプションを探してください。
モバイルでフリップブックが小さすぎる： iframeのwidthを「100%」に設定し、ページコンテナが幅を制約していないことを確認してください。上記のレスポンシブラッパーテクニックが役立ちます。
企業ファイアウォールで埋め込みがブロックされる： フォールバックとしてフリップブックへの直接リンクを提供し、読者が新しいタブで開けるようにしてください。