ブログ
無料登録 無料ではじめる
基礎知識 公開: ／ 更新:

WordPressサイトに電子ブックを設置・埋め込む方法｜iframeで既存ページに載せる手順【2026年版】

WordPressサイトに電子ブックを設置・埋め込む方法｜iframeで既存ページに載せる手順【2026年版】

本記事は、PDFをめくれる電子ブックに変換するツール「MEKURU（メクル）」の運営チームが執筆しています。他社ツールについては公式サイト等の一次情報をもとに記載しています（2026年時点）。

「クライアントのサイトはWordPressで作ってある。そこにカタログをめくれる電子ブックとして載せたい」——制作会社が電子ブックを納品するとき、よくあるのがこの相談です。別サイトのURLに飛ばすのではなく、いまのWordPressのページの中で開けるようにしたい。この記事では、電子ブックをWordPressの既存ページに埋め込んで公開するまでの手順を、閲覧者のアドレスバーを自社ドメインに保つ仕組みや、注意点とあわせて順番に解説します。

結論
– WordPressに電子ブックを載せる基本は、公開URLを「カスタムHTML」ブロックにiframeで貼るだけ
– iframeなら、閲覧者のアドレスバーは自社（WordPress）ドメインのまま、ページ内に本が表示される
– 実体をクライアントのドメイン配下に置くなら、ZIPで書き出してサーバーに設置し、そのURLを埋め込む
– 埋め込む工程は全体で3ステップ。専用プラグインは不要

「知りたい！」を、めくって見つかる！ぼく、メクルンです！ WordPressに電子ブックを載せるのって、じつは難しくないんだ。要は「公開用のコードを、ページの中に1回貼る」だけ。今日はその手順を、順番に案内するね！

この記事は、クライアントのWordPressサイトに電子ブックを埋め込んで納品したい制作会社の方に向けて書いています。自社のWordPressサイトにカタログを1本だけ足したい場合も、手順はそのまま使えます。

WordPressに電子ブックを載せる2つの方法

やり方は大きく2通りあります。まず全体像を押さえておくと、案件に合うほうを選べます。

① iframeで埋め込む ② ZIPで書き出してサーバーに設置
やること MEKURUで公開したブックのURLを、WordPressの「カスタムHTML」ブロックにiframeで貼る ブックをZIP（HTML一式）で書き出し、WordPressが動いているサーバーに置いて、そのURLを埋め込む
実体の置き場所 MEKURU側（mekuru-pdf.com 配下）。ページには枠で読み込む クライアントのサーバー（自社ドメイン配下）
向いている場面 まず手早く見せたい／記事や商品ページの中に組み込みたい 実体まで自社ドメインに置きたい／外部サービス依存を避けたい

①のほうが手数は少なく、②のほうが「実体まで自社の資産にできる」という違いです。まずは①のiframe埋め込みを、次章で3ステップに分けて解説します。②は記事の後半で扱います。

iframeでWordPressに電子ブックを埋め込む手順

MEKURUを例に、公開URLの取得からWordPressへの貼り付けまでを3ステップで進めます。専用プラグインを入れる必要はなく、WordPress標準の「カスタムHTML」ブロックだけで完結します。

STEP1: MEKURUで電子ブックを公開し、埋め込み用のコードを取得する

MEKURUにPDFをアップロードすると、めくれる電子ブックに自動変換されます。公開すると、その本を見せるための公開URLと、ページに貼り付けるためのiframe埋め込み用のコードを、共有メニューから取得できます（公開URLのスラッグは自由に設定できます）。
つまずきやすい点：この方法では本の実体はMEKURU側（mekuru-pdf.com 配下）に置かれ、URLも mekuru-pdf.com のものになります。独自ドメインのURLそのものが欲しい場合は、後述のZIP設置（②）を選びます。

STEP2: WordPressの編集画面で「カスタムHTML」ブロックを追加する

電子ブックを載せたい固定ページ（または投稿）を開き、ブロックエディターで「＋」からカスタムHTMLブロックを追加します。「段落」ブロックにそのまま貼ると、コードが文字として表示されてしまうので、必ずカスタムHTMLを選びます。
つまずきやすい点：クラシックエディターを使っている場合は、編集画面右上の「ビジュアル」ではなく「テキスト」タブに切り替えてから貼り付けます。ビジュアル側に貼るとタグが打ち消されて表示されません。

STEP3: 埋め込みコードを貼り、プレビューで表示を確認する

追加したカスタムHTMLブロックに、STEP1で取得したiframeコードを貼り付けます。スマートフォンでも枠が崩れないよう、幅を画面に合わせておくと安心です。次のように、iframeを枠で包んで比率を指定しておくと、PCでもスマホでも収まりよく表示できます。

<div style="position:relative;width:100%;aspect-ratio:4/3;">
  <iframe src="ここにMEKURUの公開URL"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;"
    allowfullscreen loading="lazy"></iframe>
</div>

貼り終えたら、下書きプレビューで電子ブックがページ内でめくれるか確認します。
うまくいかないとき：枠が真っ白・本が出ない場合は、iframeの src に入れたURLが正しいか、ブラウザで直接開いて表示されるかを先に確認します。URL単体で開けるのに枠内だけ出ないときは、貼り付け先がカスタムHTML（テキスト側）になっているかを見直します。ここまで表示できれば埋め込み完了です。

実体まで自社ドメインに置きたいとき（ZIP設置）

①のiframe埋め込みは手軽ですが、本の実体はMEKURU側に置かれ、URLも mekuru-pdf.com 配下になります。「外部サービスへの依存を避けたい」「実体もクライアントのドメイン配下に置きたい」という要件では、②のZIP設置を選びます。

流れはこうです。MEKURUで電子ブックをZIP（HTML一式）で書き出し、WordPressが動いているのと同じサーバーの、公開フォルダの中に新しいフォルダを作って設置します（例：example.com/catalog/）。MEKURUのZIPは自己完結ビューア同梱なので、置いたファイルだけで電子ブックが表示され、特別なサーバープログラムは要りません。設置したそのURL（自社ドメインのURL）を、STEP2〜3と同じ要領でWordPressの固定ページにiframeで埋め込めば、実体もURLも自社ドメイン配下にできます。

ZIPの書き出しは、MEKURUでは買い切り（1冊¥9,900・税込）またはサブスクで対応しています。無料プランはZIP書き出しに非対応なので、サーバー設置を前提にするなら買い切り以上を選びます。WordPressサイトのフォルダを直接触るので、既存の index.html やテーマのファイルには手を触れず、新しく作ったフォルダの中だけで作業するのが鉄則です。設置の詳しい手順は、下記の関連記事にまとめています。

ここ、ぼくからのお願い！ ①のiframe（MEKURU側に実体）と、②のZIP設置（自社サーバーに実体）は、”URLがどこのものになるか”が変わるんだ。クライアントに「アドレスバーは自社ドメインでいいのか」「実体も自社サーバーに置きたいのか」を先に確認しておくと、あとで作り直しにならないよ〜。

設置版（ZIP）で気をつける機能の違い

②のZIP設置版（自社サーバーに置いた版）は静的なファイル一式のため、サーバー側の処理を必要とする一部の機能は、そのままでは動きません。①のiframe埋め込み（MEKURU上で公開したブックを枠で読み込む）では、これらはMEKURU側の機能としてそのまま使えます。

  • 閲覧パスワード・公開/非公開の切り替え：ZIP設置版では使えません。閲覧制限はサーバーのBasic認証で、公開/非公開は設置ファイルの出し入れで代替します。
  • アクセス解析：ZIP設置版でも、ブック設定の「ZIP版のアクセス解析」にGA4の測定ID（Gで始まるID）を入れておけば、設置したビューアにGA4タグが自動で埋め込まれ、めくられたページ数などを計測できます。ただし、GA4側でカスタムディメンション（page_number）を登録しないと、レポートの表にページ別のデータが出ません。登録した日以降のデータにしか適用されないので、計測を始める前に登録しておきます。手順はMEKURUの製品マニュアル（/manual/zip）を参照してください。

「iframe埋め込みなら全部そのまま使える／ZIP設置なら一部は代替が要る」という違いを先に押さえておくと、クライアントとの認識のズレを防げます。

よくある質問

Q. WordPressに電子ブックを埋め込むのに専用プラグインは必要ですか？
A. 必要ありません。WordPress標準の「カスタムHTML」ブロックにiframeのコードを貼るだけで表示できます。クラシックエディターの場合は「テキスト」タブに貼り付けます。

Q. iframeで埋め込むと、閲覧者に見えるURLは他社サービスのものになりますか？
A. いいえ。閲覧者が見ているページのアドレスは、iframeを置いた自社（WordPress）ドメインのままです。ページの中の枠だけがMEKURU側の本を読み込みます。実体とURLの両方を自社ドメイン配下にしたい場合は、ZIPで書き出して同じサーバーに設置し、そのURLを埋め込みます。

Q. 埋め込んだ電子ブックのPDFを差し替えたら、貼り直しが必要ですか？
A. ①のiframe埋め込みなら、MEKURU側でPDFを差し替えても公開URLは変わらないため、WordPress側の貼り直しは不要です（差し替えはサブスクで無制限、買い切りは同一PDF6回まで）。②のZIP設置は、書き出し直して設置フォルダにアップロードし直します。

Q. 買い切りの公開期間（1年）が過ぎたら、埋め込んだ電子ブックは見られなくなりますか？
A. 埋め込み方で変わります。①のiframe埋め込みはMEKURU上の公開に連動するため、公開期間（買い切りは1年・延長¥3,300/年）が終わると表示されなくなります。②のZIP設置版は自社サーバーにあるためMEKURUの公開期間とは切り離して表示を続けられます（ただしZIPの書き出し自体は契約が有効なうちだけです）。

まずは無料プラン（1冊・100ページ・300MBまで）で電子ブックを1冊作って、ビューアの見え方を確かめるのがおすすめ！ 納品が決まったら、iframe埋め込みかZIP設置かを選んで進めればOKだよ。ZIPの書き出しは買い切り・サブスクからだから、そこだけ覚えておいてね！

まとめ

  • WordPressに電子ブックを載せる基本は、公開URLを「カスタムHTML」ブロックにiframeで貼ること。専用プラグインは不要
  • iframe埋め込みなら、閲覧者のアドレスバーは自社（WordPress）ドメインのまま、ページ内で本がめくれる
  • 手順は「①MEKURUで公開して埋め込みコードを取得 → ②カスタムHTMLブロックを追加 → ③貼り付けてプレビュー確認」の3ステップ
  • 実体もURLも自社ドメイン配下にしたいなら、ZIPで書き出して同じサーバーに設置し、そのURLを埋め込む（ZIP書き出しは買い切り¥9,900/冊・税込 またはサブスク。無料プランは非対応）
  • ZIP設置版では閲覧パスワード・公開/非公開の切替が非対応。Basic認証・ファイルの出し入れ・GA4タグで代替する

WordPressへの埋め込み自体はカスタムHTMLブロックで完結します。あとは「実体をどこに置くか」をクライアントと決めるだけ。まずは無料で1冊作って仕上がりを確かめ、納品方針が決まったら埋め込み方を選ぶ、という流れがスムーズです。

関連記事
– 電子ブックを自社サーバーに設置する方法
– どのレンタルサーバーを選べばいい？電子ブック設置向けの比較
– クライアントのPDFを電子ブックにして納品する流れ
– 自社ドメインで“社名を出さず”電子ブックを納品する方法
– サブディレクトリに電子ブックを設置する方法
– FTPで電子ブックをアップロードする手順

出典

  • MEKURU 公式サイト（iframe埋め込み・公開URL・ZIP書き出し・買い切り／サブスク料金・公開期間・アクセス解析・アップロード代行の仕様）：https://mekuru-pdf.com/
  • WordPressの「カスタムHTML」ブロック・固定ページ編集の操作、iframeでの埋め込みは、各サービスの公式サイト等の一次情報に基づく（WordPressのバージョンやテーマにより画面表記は異なります）

← 記事一覧へ