Flipbookフォルダギャラリーをサイトに埋め込む方法
FlipLinkのフォルダ内の出版物を検索可能なギャラリーとしてウェブサイトに埋め込む方法をご紹介します。訪問者はカバーをクリックしてFlipbookを閲覧できます。
フォルダギャラリーを埋め込む理由
単一のFlipbookをページに埋め込む方法は、1つの出版物を共有する場合に最適です。しかし、カタログライブラリ、リソースセンター、研修マニュアル集、あるいは数十の製品パンフレットがある場合はどうでしょうか。それぞれを個別にリンクするのは、あなたにとっても訪問者にとっても面倒な作業です。
FlipLinkのフォルダ埋め込みギャラリーは、フォルダ内の出版物すべてを1つのブラウズ可能な画像ギャラリーとして埋め込むことで、この問題を解決します。訪問者はカバー画像のサムネイルグリッドを閲覧し、いずれかをクリックすると、ライトボックスポップアップでFlipbookがその場で開きます。ページ遷移もなく、新しいタブも不要で、ストレスフリーです。
これは、あらゆるウェブページに設置できるデジタルライブラリ棚とお考えください。
設定可能な項目
フォルダギャラリー埋め込みでは、ギャラリーの表示方法を細かく制御できます。
レイアウトオプション
- 1行あたりのPDF数 — 各行に表示する出版物サムネイルの数を選択できます（例：3、4、5列）
- 1ページあたりのPDF数 — ページネーションが有効になるまでに読み込む出版物の数を設定できます（例：12、24、またはそれ以上）
- PDF間のスペース — サムネイル間の間隔をピクセル単位で調整できます（例：10pxで密なグリッド、30pxでゆったりしたレイアウト）
ブラウジングと検索
- 検索バー — 訪問者がタイトルでリアルタイムに出版物をフィルタリングできる検索バーのオン・オフを切り替えられます。フォルダに数十のアイテムがある場合に不可欠です
- 表示順序 — 新しい順、古い順、アルファベット順で出版物を並び替えられます
- ページネーション位置 — ギャラリーの中央、左、または右にページナビゲーションを配置できます
カバー画像の自動取得
サムネイルを別途アップロードする必要はありません。FlipLinkはフォルダ内の各出版物からカバー画像を自動的に取得します。訪問者がいずれかのカバーをクリックすると、インラインライトボックスポップアップでFlipbookが開きます。
設定方法
フォルダギャラリー埋め込みの設定は、わずか数ステップで完了します。
ステップ1：フォルダの作成
FlipLinkダッシュボードにアクセスし、新しいフォルダを作成します。わかりやすい名前を付けてください。この名前がデフォルトのギャラリータイトルになります。ギャラリーに含めたい出版物をこのフォルダに移動または割り当てます。
ステップ2：埋め込みダイアログを開く
フォルダを選択し、Embedボタンをクリックします。タイトル、レイアウトオプション、検索バー、表示順序、間隔、ページネーションを設定できる設定パネルが表示されます。
ステップ3：埋め込みコードのコピー
FlipLinkは2つのパートからなる埋め込みコードを生成します。
- Headスクリプト — ウェブサイトの
<head>セクションに貼り付ける小さなJavaScriptファイルセット - ギャラリーコンテナ — ページ上のギャラリーを表示したい場所に配置する単一の
<div>要素
両方のスニペットをウェブサイトのHTMLに貼り付けると、ギャラリーが自動的にレンダリングされます。
ステップ4：カスタマイズとプレビュー
埋め込みダイアログで設定オプションを調整し、結果をプレビューします。レイアウトに満足したら、最終コードをコピーして公開します。
フォルダギャラリー埋め込みのユースケース
フォルダギャラリーは特に以下の用途で効果を発揮します。
- 製品カタログ — 製品ラインナップ全体を1つのページに埋め込みます。顧客はカバーを閲覧し、興味のあるカタログを開きます
- リソースライブラリ — 研修マニュアル、ポリシー文書、オンボーディングガイドをすべて1つの検索可能なギャラリーにまとめます
- クライアントポータル — エージェンシーはクライアントごとにフォルダを埋め込み、各クライアントにブランド化されたギャラリーを提供できます
- 教育 — 教材、シラバス、参考文献リストを1つの埋め込み可能なギャラリーにまとめ、タイトルで検索できるようにします
- 不動産 — 物件パンフレットをブラウズ可能なグリッドで表示します。購入者はクリックして物件情報をめくれます
- レストランチェーン — 複数店舗のメニューを1つのギャラリーにまとめ、店舗名で検索できます
フォルダギャラリーと個別埋め込みの比較
| 機能 | 個別埋め込み | フォルダギャラリー埋め込み |
|---|---|---|
| 表示される出版物 | 埋め込みごとに1つ | フォルダ全体（無制限） |
| 訪問者の体験 | 1つのドキュメントを閲覧 | ライブラリからブラウズして選択 |
| 検索 | 該当なし | タイトル検索内蔵 |
| ページネーション | 該当なし | 設定可能（ページあたりのアイテム数） |
| レイアウト制御 | 固定 | 行数、間隔、順序、ページネーション位置 |
| 設定の手間 | 出版物ごとに1つの埋め込み | フォルダ全体で1つの埋め込み |
| 更新 | PDFを差し替える場合は再埋め込み | フォルダ内で出版物を追加・削除するとギャラリーが自動更新 |
優れたギャラリー体験のためのヒント
- フォルダ名をわかりやすく — フォルダ名がデフォルトのギャラリータイトルとして訪問者に表示されます
- 明確なカバーページを使用 — FlipLinkはカバー画像を自動取得するため、各PDFの最初のページにコンテンツを識別できる強いビジュアルを配置してください
- 出版物が12を超える場合は検索バーを有効に — 訪問者にとって大変便利です
- サイトレイアウトに合わせて1行あたりのPDF数を調整 — 狭いコンテンツカラムには3列、全幅セクションには4〜5列が適しています
- 適切な1ページあたりのPDF数を設定 — 12〜24が適切な範囲です。1ページに多すぎるサムネイルは初期読み込みを遅くする可能性があります
ギャラリーの更新
フォルダギャラリーの最大の利点の1つは、フォルダと常に同期していることです。フォルダに新しい出版物を追加すると、ギャラリーに自動的に表示されます。削除すれば消えます。ウェブサイトの埋め込みコードに変更を加える必要はありません。
このため、フォルダギャラリーは頻繁に更新されるコンテンツ（月次ニュースレター、ローテーション制の製品ライン、増え続けるリソースライブラリなど）に最適です。
はじめましょう
複数の出版物を管理している場合、フォルダギャラリー埋め込みを使えば、数十の個別埋め込みを1つの検索可能でページネーション付きのギャラリーに置き換えることができます。
FlipLinkダッシュボードにアクセスしてフォルダを作成してお試しください。詳しくはフォルダと整理や共有と配布の機能ページをご覧ください。
デジタルライブラリ棚を構築しませんか？ 無料トライアルを開始するか、料金ページで含まれる機能をご確認ください。
最初のフリップブックを作成しませんか？
PDFをインタラクティブなフリップブックやドキュメントに変換しましょう。FlipLinkの買い切りプランなら、100件のアクティブな出版物がわずか129ドルでご利用いただけます。
関連記事
フリップブックのクリッカブル画像埋め込みの作成方法
フリップブックのプレビュー画像を任意のウェブサイトに表示し、クリックでインタラクティブな体験を開くクリッカブル画像埋め込みの作成方法を解説します。
フリップブックをオンラインで共有する7つの方法
ダイレクトリンク、ウェブサイト埋め込み、QRコード、SNS共有、メールサムネイル、カスタムドメイン、クリッカブル画像の7つの方法を比較。FlipLinkフリップブックをオンラインで効果的に配信し、リーチを最大化するための実践的な活用ガイドです。
Shopifyストアにフリップブックを埋め込む方法
ShopifyストアにFlipLinkのインタラクティブなフリップブックカタログやルックブックを追加する方法を詳しく解説します。テーマエディター、Metafield、レスポンシブ対応、CTAボタン設定まで、商品ページとカスタムページへの埋め込み手順をステップバイステップでご紹介します。