PDFボタン
クリックするとPDFをポップアップ（オーバーレイ）で開くボタンを表示します。複数PDFがリンクされている場合は、ボタンのリストとして表示されます。
このページでは次の2つを扱います:
- PDF Button（リンク済みPDF）
- PDF Button Manual（テーマ設定で手動URLを指定）
PDFボタンでできること
PDFボタンは、クリック可能なボタン（またはリンク）を表示します。お客様がクリックすると、ページ上にポップアップ（オーバーレイ）としてPDFが開きます。
1つのリソースに複数PDFをリンクすると、自動的にボタンの一覧として表示されます。
表示イメージ
PDFが1つの場合:
- PDF名のボタンが1つ表示されます
- クリックするとオーバーレイでPDFが開きます
- オーバーレイがページの上に表示されます
- 閉じるボタンで元のページに戻れます
PDFが複数の場合:
- PDFごとにボタンが並ぶリストになります
- 各ボタンで対応するPDFが開きます
- ボタンは縦に並びます（設定により変更可）
- 1か所から複数PDFへアクセスできます
ボタン表示がおすすめの場面
特におすすめ:
- 1ページに複数PDFを置きたいとき
- モバイル最適化したいストア
- 表示スペースが限られるページ
- すぐ参照したい資料
- ダウンロード前提のPDF
相性が良い例:
- マニュアル、サイズ表、保証書を置く商品ページ
- 複数のガイドをまとめるリソースページ
- 埋め込みビューアだと場所を取りすぎるページ
テーマにPDFボタンを追加する
- Online Store > Themes を開きます
- 適用中のテーマで Customize をクリックします
- 対象のページタイプ（商品/コレクションなど）へ移動します
- Add section または Add block をクリックします
- Apps の中から PDF Connect を探します
- PDF Button を選択します
- Save をクリックします
手動モードを使う場合は、代わりに PDF Button Manual を追加し、ブロック設定にURL（必要に応じてラベル）を入力してください。
ボタン拡張（Extension）をカスタマイズする
テーマエディタでは、ボタンの見た目をカスタマイズできます（PDFビューア自体の設定ではありません）:
Show heading - 見出しの表示/非表示
Heading text - セクションタイトルの文言（例: 「PDFをダウンロード」）
Button text - ボタンの文言
Button text source - 固定テキスト / PDF名 / PDF説明 のどれを表示するか
Button alignment - 左/中央/右揃え
Button text alignment - ボタン内テキストの配置
Multiple PDFs layout - 複数PDF時のレイアウト（縦/横）
Show PDF icon - ボタンにPDFアイコンを表示
Show container border - ボタン領域の外枠（ボーダー）を表示
Colors:
- ボタン背景色
- ボタン文字色
- ホバー時の背景色
PDF viewer modal size - ポップアップの大きさ（Small 60% / Medium 70% / Large 80% / Extra Large 90%）
これらの設定は「ボタンの見た目」だけに 影響します。実際のPDFビューア（Custom / Light / Flipbook）はアプリ側で設定します。
PDF Button Manual の場合は、ビューアの種類と挙動をブロック設定で指定します。
複数PDFのリスト表示の仕組み
複数PDFがリンクされている場合:
- PDFごとにボタンが表示されます
- ボタンにはPDFのファイル名が表示されます
- お客様が見たいPDFのボタンをクリックします
- 選んだPDFがポップアップで開きます
- 閉じるとリストに戻ります
追加設定は不要です。自動的にリスト表示になります。
PDFビューア設定
ボタン拡張を調整する前に、使用するPDFビューアを選んでください。ビューアはテーマエディタではなく、アプリ側で設定します。
リンクブロックの場合、このセクションの内容がそのまま適用されます。
手動ブロックの場合も、同じビューア種類をテーマのブロック設定から選べます。
アプリでビューア種類を設定する
PDFの詳細ページで、Viewer Configuration セクションを確認してください:
Custom Viewer（多機能）
- すべてのナビゲーション操作を備えた多機能ビューア
- 検索、ズーム、表示オプションのカスタマイズ
- モバイル最適化
- 設定例: 初期ページ、ズーム倍率、ページレイアウト、スクロール方向
- 有効/無効: ダウンロード、ツールバー、画像スタンプ、ハイライト、描画ツール、テキスト選択
Light Viewer（高速・シンプル）
- 最小限のUIで高速に読み込むシンプルなビューア
- ちょっとしたプレビューに最適
- モバイル最適化
- 設定項目はほぼなく、そのまま使えます
Flipbook Viewer（ページめくり）
- ページめくりのインタラクティブ体験
- 本や雑誌を読むような見た目
- カタログ、パンフレット、販促資料に最適
- モバイル最適化されていません
- 設定例: アニメーション、ページ影、背景色
Native Browser Viewer（標準）
- ブラウザ内蔵のPDF表示を使用します
- 軽量で馴染みのある挙動です
リンク済みPDFでは、保存した1つのビューア設定が「ボタン」と「埋め込み」で共通利用されます。
手動ブロックでは、ブロック単位のビューア設定が、入力したすべてのURLに対して共通利用されます。
ポップアップ（オーバーレイ）の動作
お客様がボタンをクリックすると、設定したビューア構成でポップアップ表示されます:
Custom Viewer のポップアップ:
- すべての操作が使えるフル機能表示
- ズーム、検索、ページ移動
- ダウンロード/印刷（有効化している場合）
- カスタマイズ可能なツールバー
Light Viewer のポップアップ:
- シンプルで見やすいUI
- 基本的なナビゲーション
- 高速読み込み
Flipbook Viewer のポップアップ:
- ページめくりアニメーション
- 本のような体験
- デスクトップでの利用が最適
ボタン表示と埋め込み表示の比較
| 機能 | ボタン | 埋め込み |
|---|---|---|
| 使用スペース | 最小 | 大きい |
| 複数PDF | 見やすいリスト | ビューアが積み重なる |
| モバイル適性 | 非常に良い | 難しい場合がある |
| ページの見やすさ | ページをすっきり保てる | PDFをページ内に表示 |
| お客様の操作 | クリックが必要 | すぐ表示される |
ボタン表示のヒント
PDF名は分かりやすく - ボタンのラベルはファイル名が使われます
順番が重要 - 重要なPDFを先頭に置きましょう
モバイルでテスト - 小さい画面でもボタンは使いやすいです
関連PDFはまとめる - 近い内容はリストにすると探しやすくなります
ボタン文言のカスタマイズ
お客様に分かりやすいラベルにしましょう:
Default: "product-manual-v2.pdf"
Better: "Product Manual"
テーマ設定でボタン文言を変更するか、アップロード前にPDFファイル名を変更することで調整できます。