WordPressにフリップブックを埋め込む方法

WordPressサイトにフリップブックを埋め込む理由

ダウンロードリンクの奥に埋もれた静的PDFでは、コンテンツの価値を十分に伝えられません。訪問者がクリックしてファイルのダウンロードを待ち、別のアプリで開く — そして多くの場合、サイトに戻ってきません。WordPressページにインタラクティブなフリップブックを直接埋め込めば、状況は一変します。

埋め込みフリップブックなら、訪問者はウェブサイトを離れることなくリッチなページめくり体験を楽しめます。セッション時間の延長、直帰率の低下、はるかにプロフェッショナルな印象を実現できます。商品カタログ、会社案内、マガジン、研修マニュアルのいずれであっても、埋め込みフリップブックは読者を最適な場所に引き留めます。

FlipLinkならこれが簡単にできます。PDFからフリップブックを作成すれば、あらゆるWordPressテーマ、ページビルダー、エディターで使える埋め込みコードが取得できます。プラグインは不要です。

PDFからフリップブックへの変換が初めての方は、まずPDFをオンラインでフリップブックに変換する方法のガイドをお読みください。その後、こちらに戻って埋め込み方法を確認しましょう。

FlipLinkから埋め込みコードを取得する

WordPressを操作する前に、埋め込みコードが必要です。取得方法は以下の通りです。

1. go.fliplink.meのFlipLinkダッシュボードにログインします
2. 埋め込みたいフリップブックを開きます
3. Shareボタンをクリックします
4. Embedタブを選択します
5. 提供されるiframeコードをコピーします

埋め込みコードは以下のようになります。

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

必要なのはこれだけです。FlipLinkが共有・配信側を処理するので、あとはこのコードをWordPressに貼り付けるだけです。

方法1：WordPressブロックエディター（Gutenberg）

ブロックエディターはWordPressのデフォルトエディターであり、フリップブックを埋め込む最も簡単な方法です。

手順

1. フリップブックを表示したいページまたは投稿を開きます
2. **+**ボタンをクリックして新しいブロックを追加します
3. カスタムHTMLを検索して選択します
4. FlipLinkのiframe埋め込みコードをブロックに貼り付けます
5. プレビューをクリックして正しく表示されることを確認します
6. 公開または更新をクリックします

これだけです。フリップブックがページめくり、ズーム、フルスクリーンなどすべてのインタラクティブ機能付きでページに直接表示されます。

プロのヒント

フリップブックを中央揃えで余白をつけたい場合は、divで囲みます。

<div style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

方法2：Elementor

Elementorは最も人気のあるWordPressページビルダーの1つで、フリップブックの埋め込みも数クリックで完了します。

手順

1. Elementorのビジュアルエディターでページを開きます
2. ウィジェットパネルでHTMLを検索します
3. HTMLウィジェットを目的のセクションにドラッグします
4. HTMLフィールドにFlipLinkのiframeコードを貼り付けます
5. Advancedタブでウィジェットのマージンとパディングを調整します
6. Updateをクリックして保存します

Elementorはエディター内でiframeをライブレンダリングするので、公開前にフリップブックの見た目を正確に確認できます。必要に応じて、Elementorのレスポンシブコントロールでタブレットやモバイルのブレークポイント用に高さを調整してください。

方法3：クラシックエディター

まだクラシックエディターを使用していますか？問題ありません。手順は同じく簡単です。

手順

1. クラシックエディターでページまたは投稿を開きます
2. エディターツールバーのテキストタブ（ビジュアルではない）に切り替えます
3. フリップブックを表示したい場所にカーソルを置きます
4. iframe埋め込みコードを貼り付けます
5. ビジュアルタブに戻して表示を確認します
6. 公開または更新をクリックします

重要：埋め込みコードは必ずテキストタブに貼り付けてください。ビジュアルタブではHTMLが除去または変更される可能性があり、埋め込みが壊れる場合があります。

レスポンシブサイズ調整のヒント

フリップブックはあらゆるデバイスで美しく表示される必要があります。レスポンシブ埋め込みの実践的なヒントをご紹介します。

パーセント幅を使用する

iframeには常にwidth="100%"を設定してコンテナを埋めるようにしてください。これにより、フリップブックがあらゆる画面サイズに自動的に適応します。

適切な高さを設定する

デスクトップでは500〜700の固定ピクセル高さがほとんどのフリップブックにうまく機能します。よりレスポンシブなアプローチにはアスペクト比テクニックを使用します。

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

これにより画面幅に関係なく4:3のアスペクト比が維持されます。padding-bottomを調整して比率を変更してください — 16:9には56.25%、正方形には100%を使用します。

モバイルでテストする

FlipLinkのビューアーは完全にレスポンシブですが、スマートフォンでWordPressページをプレビューして周囲のレイアウトに不自然な余白がないか確認してください。ほとんどの問題はフリップブック自体ではなくページのCSSに起因します。

代替手段：クリッカブルイメージ埋め込み

すべてのページに完全なインタラクティブ埋め込みが必要なわけではありません。クリックするとフルのフリップブックが開く美しいサムネイルのような、より軽いアプローチが適している場合もあります。それがFlipLinkのクリッカブルイメージ埋め込み機能です。

iframeの代わりに、リンク付きの画像が表示されます。以下の場合に最適です。

• フルフリップブックが大きすぎるブログサイドバー
• 訪問者に意図的にクリックしてもらいたいランディングページ
• WordPressページにリンクバックするメールニュースレター
• 複数のパブリケーションをサムネイルとしてリスト表示するリソースライブラリ

クリッカブルイメージ埋め込みコードは、FlipLinkダッシュボードの同じShareダイアログから取得できます。iframeより読み込みが速く、FlipLinkのブランディングとデザインオプションでサムネイルの外観を完全にコントロールできます。

よくある問題のトラブルシューティング

フリップブックが表示されない

• テキスト/HTMLモードでコードを貼り付けたか確認してください。ビジュアルエディターではありません
• WordPressテーマがiframeを除去していないか確認してください（一部のセキュリティプラグインがブロックします）
• フリップブックがFlipLinkで公開済みで、下書きモードではないことを確認してください

フリップブックが小さすぎるまたは大きすぎる

• iframeコードのheight値を調整してください
• 一貫したサイズ調整のために上記のレスポンシブラッパーdivを使用してください
• テーマのコンテンツエリアに埋め込みを制限するmax-widthがないか確認してください

デスクトップでは動作するがモバイルでは動作しない

• width="100%"が設定されていることを確認してください（固定ピクセル幅ではありません）
• iframeをクリッピングしている可能性のある親コンテナのCSS overflow: hiddenを確認してください
• FlipLinkのビューアーはモバイルジェスチャーにネイティブ対応しているため、問題はほぼ常にページレイアウトに起因します

WordPressが埋め込みコードを除去する

一部のセキュリティプラグイン（WordfenceやiThemes Securityなど）やテーマ設定がiframeタグをフィルタリングする場合があります。保存後に埋め込みコードが消える場合は以下を確認してください。

• セキュリティプラグインの設定でiframeフィルタリングルールを確認してください
• 許可されたiframeソースにgo.fliplink.meを追加してください
• インラインの貼り付けの代わりに専用のHTMLブロックを使用してみてください

SEOに関する考慮事項

埋め込みフリップブックはユーザーエンゲージメント指標を向上させ、間接的にSEOに貢献します。最大限の可視性を得るために、FlipLinkでフリップブックのSEOとソーシャルプレビューを設定して、ページが共有された際に検索エンジンとソーシャルプラットフォームがリッチメタデータを表示するようにしてください。

WordPress以外の埋め込みオプションの詳細については、ウェブサイトにPDFを埋め込む方法の完全ガイドをご覧ください。

今すぐWordPressでフリップブック埋め込みを始めましょう

WordPressサイトへのFlipLinkフリップブック埋め込みは5分もかかりません。プラグインのインストール不要、複雑な設定不要 — 埋め込みコードを貼り付けるだけで、訪問者に素晴らしいインタラクティブ体験を提供できます。

始める準備はできましたか？FlipLinkの無料アカウントを作成して、最初のPDFを埋め込み可能なフリップブックに変換しましょう。100個のアクティブパブリケーションで$129からのライフタイムディールで、すべてのWordPressページへの無制限の埋め込みが可能です。

最適なプランを見つけるには、料金ページをご確認ください。