![](https://cxg-design.jp/wp-content/uploads/2024/06/dflip_thumb.png)
3D FlipBookで、アニメーション付きでPDFを見開き表示
以前PDF Embedderを紹介しましたが、1ページづつしか表示されませんでした。書類などは向いていますが、カタログなど見開きで見せるものは不向きでした。今回は、PDFプラグイン3D FlipBookで、アニメーション付きでPDFを見開き表示する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/24e90397a721fba75e340f6a6e16dbd0.png)
出典 : 3D FlipBook
今回のDEMOは、チョコレートカタログのPDFです。
アイコンをクリックすると、ライトボックスでPDFが表示されます。アニメーションでページ遷移します。
dFlip Settings
まず、プラグインをインストール有効化します。左サイドメニューのdFlip Books>Add New Bookをクリックします。設定画面が表示されるので、下のdFlip Settingsから、PDF設定をして行きます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/abb3f894ea43803ebc9bb60102a42b42.png)
dFlip Books>Add New Bookをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/9084a656459b5efeba5199b36e51c9aa.png)
設定画面が表示
Source
タイトルを入力します。PDF FileのSelect PDFボタンをクリックします。メディアファイルからPDFファイルを選択し、Send to dFlipボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/8e73f4fedebb72a0292a3568ec9865ee.png)
PDF FileのSelect PDFボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/6b0ca7c9f9907fefe78fd1585e3c749c.png)
PDFファイルを選択
次にサムネイル画像を設定します。PDF Thumbnail ImageのSelect Thumbボタンをクリックします。メディアライブラリからサムネイル画像を選択し、Send to dFlipボタンをクリックします。これで、PDF、サムネイル設定完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/9b8d84eb9ee93f6d56677b38d4fb2c00.png)
PDF Thumbnail ImageのSelect Thumbボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/67fbf109b4b12edb66f5de083fef85c8.png)
サムネイル画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/df597a9275a5b0300d03271f432975f6.png)
PDF、サムネイル設定完了
General / Rayout
デフォルトでは、ページをめくる度に効果音が鳴るので、消音にします。General / Rayout>CONTROLSのAuto Enable Soundの設定をFalseに設定します。これで消音設定完了です。右の公開ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/bc43a0158398ad0248f5b87de05ded3b.png)
Auto Enable Soundの設定をFalseに設定
![](https://cxg-design.jp/wp-content/uploads/2024/06/51e88a8b2a2272c29cc348538a22d28e.png)
公開ボタンをクリック
設置
右上のShortcodeのLightBox(Popup)のショートコードをコピーします。編集画面を開き、ショートコードブロックにショートコードをペーストしたら設置完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/9ee72865aa73546b56f0d378813a60af.png)
LightBox(Popup)のショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2024/06/d731e7880bc96e6e882a76ba22030784.png)
ショートコードブロックにショートコードをペースト
以上で今回の説明は終了です。デザインされたカタログの見開きも見れるのでオススメです。シェアボタンや拡大縮小ボタンもあるので、SPでも使いやすいプラグインです。