![](https://cxg-design.jp/wp-content/uploads/2024/06/pdfembedder_thumb.png)
DPF埋め込みプラグイン、PDF Embedderで、サイトにPDFを埋め込み
ブロックエディターには、YouTubeなどの埋め込み機能がついています。今回は、DPF埋め込みプラグイン、PDF Embedderで、サイトにPDFを埋め込む方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f22f29122b7f4e71e8bd995b4d8a0e37.png)
出典 : PDF Embedder
今回のDEMOは、MENUのPDFです。
4ページのPDFを作成し、埋め込みました。
設定
プラグインを、ダウンロード、インストールします。左サイドメニューの設定>PDF Embedderをクリックし、設定画面を表示します。ツールバー表示をツールバーを常に表示に設定し、変更を保存ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/06/a590c9e8a266b99eafc5fcf3db0aca05-1.png)
設定>PDF Embedderをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/3f4851cdd48bc4c83d1804447562bfcc-1.png)
ツールバー表示をツールバーを常に表示に設定
設置
編集画面を開き、ブロックエディターからカラムを選択します。3カラムを作成し、中央のカラムを700pxに設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/d9039cfb621f1974127ea7fb6ee64ab8-1.png)
カラムを選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/a1771d634b7f93a6e4f6b32bf5f144b0-1.png)
3カラムを作成
![](https://cxg-design.jp/wp-content/uploads/2024/06/3dd25c57aec1b2971722e53bb2a5ca2f-1.png)
中央のカラムを700pxに設定
中央のカラムを選択し、中にPDF Embedderブロックを挿入します。Media Libralyボタンをクリックし、メディアライブラリから埋め込むPDFを選択し、選択ボタンをクリックします。これで、埋め込み完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/a3b5b7d45722c3d30c6bce44e8fb0111.png)
中央のカラムを選択し、中にPDF Embedderブロックを挿入
![](https://cxg-design.jp/wp-content/uploads/2024/06/92a1d112576e898eb2f7825eefc5f970.png)
Media Libralyボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/14696df1fa11a1f45d75d695f0049ef3.png)
埋め込むPDFを選択し、選択ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/e9af5e2702118fba00ca35d16ab21ca4.png)
埋め込み完成
SPの文字サイズに注意
SPでも拡大縮小出来ますが、スクロールは、できません。なので、1画面で見ることを前提に、テキストサイズを設定しましょう。
以上で、今回の説明は終了です。この設定であれば、SP、PC両方で1画面で表示されます。今回のようなメニューのレイアウトであれば、ブロックエディターで作成した方が見た目は良いですが、PDFをそのまま使用する場合今回の方法が有効です。