WordPressで漫画をページ送り表示する方法｜連番画像とPDFを使い分ける

4ページや8ページの漫画をWordPressへ載せる時、画像を縦に並べるだけではスマホで長くなり、読者が今どのページを見ているか分かりにくくなります。一方、PDFを置くだけでは、ダウンロードリンクだけが見えて本文中で読まれないことがあります。

結論は、検索流入を取りたい説明ページは通常の本文として残し、漫画本編はPDFへまとめて1ページずつ送れる表示にする方法です。WordPressで漫画をページ送り表示すると、記事の文脈を残しながら、読者は前へ・次へで作品を追えます。ただし、1枚漫画や画像ごとに検索説明を付けたい場合は連番画像の方が向きます。

WordPressで漫画をページ送り表示する3つの方法

方法	向くケース	注意点
連番画像を縦に並べる	1〜4ページ、各画像へ説明を付けたい	ページが増えると縦に長い
WordPress標準Fileブロック	PDFの表示と配布を簡単に始めたい	漫画向けのページ送り体験はテーマやブラウザに左右される
PDFスライドビューア	4ページ以上を前後ボタンで読ませたい	PDF化、ページ数、比率の確認が必要

WordPress公式のFileブロックは、PDFをアップロードし、インライン埋め込みやダウンロードボタンを設定できます。まずPDFを置くだけなら標準機能で始められます。漫画を「1ページずつ送る」「ズームする」「Fitで全体を収める」という読み方へ寄せる場合は、専用ビューアを使う方が操作意図を伝えやすくなります。

連番画像が向く漫画

1枚漫画、2ページのBefore/After、4ページの短いSNS漫画は、連番画像でも十分です。各画像の前後に見出しや説明を置けるため、ページごとに文章で補足できます。画像検索やアクセシビリティを意識し、画像ごとに内容の分かるALTを付けたい場合にも向きます。

• 1〜4ページ程度で縦に並べても長すぎない
• 各ページへ個別の説明やキャプションを付けたい
• PDFを作る工程を増やしたくない
• 1ページだけSNSや別記事でも再利用したい

ただし、スマホでは4ページでも画像の間に余白やキャプションが入り、作品のテンポが変わることがあります。テーマ側の画像サイズ設定で人物の顔や小さな日本語が縮みすぎないか、390px相当でも確認します。

PDFページ送りが向く漫画

4〜10ページの短編、教材漫画、商品説明漫画、長い図解は、PDFへまとめるとページ順を固定できます。読者は前へ・次へで進み、必要な時だけズームできます。記事本文を縦に伸ばさず、漫画を一つの作品として扱えることが利点です。

• ページ順を崩したくない
• 1ページずつ全体を見せたい
• 漫画の前後に本文、FAQ、CTAを置きたい
• 配布用PDFと記事内表示を同じファイルで管理したい

ACS PDF Slide Viewerは、PDF.jsを同梱し、PDFをcanvasへ描画するWordPress.org公開済みの無料プラグインです。v1.0.5では、前後移動、ズーム、Fit、縦横比、任意のカルーセル、ダウンロード表示のON/OFFを設定できます。外部CDNや外部APIへPDFを送信する設計ではありません。

4ページ漫画をPDFへまとめる手順

1. 採用ページだけを連番で揃える

ファイル名をp001、p002、p003、p004のように揃え、欠番と重複がないことを確認します。修正前や不採用画像を同じフォルダへ混ぜないでください。漫画の読み順が右上から左下でも、PDFファイル内のページ順は1ページ目から順に並べます。

2. 全ページの寸法と向きを合わせる

縦2:3、A4縦、横16:9など、一作品のページ比率を統一します。1ページだけ横長や別寸法だと、ビューアの高さが変わったり、Fit時に余白が大きくなったりします。画像をPDF化する前に、各ページの縦横、破損、文字の読みやすさを確認します。

3. 画像を1ページずつPDFへ配置する

1枚の縦長PDFへ全ページを貼るのではなく、漫画1ページをPDF1ページにします。こうすると前後ボタンの1回が漫画の1ページと一致します。ページ外へ画像が切れていないか、不要な白紙ページが増えていないかをPDFで開いて確認します。

4. WordPressへPDFをアップロードする

投稿または固定ページのメディアライブラリへPDFを入れます。公開したPDFはURLを知っている人が開けるため、個人情報、未公開の商品情報、配布権のない写真や漫画を含めないでください。ダウンロードを許可したくない場合も、公開メディア自体のURLは保護機能ではない点に注意します。

5. ビューアへページ数と比率を設定する

ACS PDF Slide ViewerブロックでPDFを選び、実際のページ数、開始ページ、最大高さ、アスペクト比を設定します。迷った場合はPDFからの自動比率を使い、縦漫画ならA4縦または実ファイルに近いカスタム比率を確認します。前後ボタンは通常ON、ダウンロードは配布を許可する時だけONにします。

6. 公開前に最初と最後のページを操作する

編集画面のプレビューだけで終わらせず、公開URLで確認します。1ページ目で「前へ」が不自然に進まないか、最終ページで正しく止まるか、ページ表示が総ページ数と一致するかを見ます。ズーム、ズームアウト、Fitも操作し、漫画の文字と人物の顔が読めるか確認します。

PCと390pxで確認するチェックリスト

• 公開URLがHTTP 200で開く
• 1ページ目が白紙や読み込み中のままにならない
• 前へ・次へが1ページずつ動く
• 最終ページでページ数が一致する
• Fitでページ全体が見える
• スマホで横スクロールが発生しない
• 漫画の文字が小さすぎない
• ダウンロード設定が意図どおり

表示が白紙になる、途中ページへ進めない、比率が崩れる場合は、WordPressでPDFが表示されない時の確認方法で、PDF URL、ページ数、比率、キャッシュ、公開画面を順に切り分けてください。

記事本文と漫画の役割を分ける

漫画だけを置くより、上に読者の悩みと結論、下に補足・FAQ・次の行動を置くと、記事として内容を理解しやすくなります。漫画内の小さな文字だけに重要情報を閉じ込めず、商品名、条件、注意点、CTAは本文でも説明します。検索エンジンや音声読み上げが漫画の文字を本文と同じように理解する前提にはしません。

PDFスライドの一般的な設置手順は、WordPress記事にPDFスライドを埋め込む方法でも確認できます。漫画では、ページ順、文字サイズ、ダウンロード可否、最終ページ後のCTAを追加で決めることが違いです。

向いているケース・向いていないケース

よくある質問

まとめ

WordPressで漫画をページ送り表示するなら、短い作品は連番画像、4ページ以上で順番と閲覧操作を重視する作品はPDFスライドを検討します。PDFは1漫画ページを1PDFページにし、ページ数、比率、前後操作、Fit、スマホ表示、ダウンロード設定を公開URLで確認してください。

公式情報: WordPress Fileブロック / ACS PDF Slide Viewer（WordPress.org）