WebサイトにPDFを表示させる場合、PDFへのリンクを設定して別ウィンドウを開いたり、ダウンロードして見てもらうという方法が一般的ですが、見る側からすると、ワンクリックすることが面倒に感じます。
そこで、クリックせずにPDFの表紙をイメージ表示したり、PDFの内容をそのまま表示することで、見る側が感じる面倒さを軽減する方法をご紹介します。
「PDF Image Generator」と、「Google Doc Embedder」という2つのプラグインです。「PDF Image Generator」は、PDFへのリンクを表紙イメージで行い、クリックしやすくしています。「Google Doc Embedder」は、PDFの内容をそのまま表示(埋め込み表示)してくれます。PDFだけでなくWord,Excel,PowerPointなどにも対応していますので、非常に便利です。
Google Doc Embedder
プラグインの検索
「Google Doc Embedder」と入力して、表示されたら「今すぐインストール」をクリック
![](https://gungii.com/wp/wp-content/uploads/2017/01/gde-install1a.jpg)
有効化
「有効化」をクリックします。
![有効化の選択画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-install2a.jpg)
google Doc Embedderの設定
設定
設定画面の表示
「設定」→「GDE Setting」で、サイズ等の変更ができます。デフォルトで使用します。
![設定画面の表示](https://gungii.com/wp/wp-content/uploads/2017/01/gde-setting1a.jpg)
設定の変更
「PDF Image Generator」と一緒に使用するときは、Advancedセッティングで、「Insert shortcode from Media Library by default」のチェックを外しておかねばなりません。チェックがついたままだと、「Google Doc Embedder」の方が有効となります。Advancedタグを選択し、チェックを外して、「Save Changes」をクリックします。
![設定の変更画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-setting2a.jpg)
使い方
記事の投稿
記事の中にPDFを埋め込むために、「メディア追加」をクリックします。
![記事の投稿画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-ope1a.jpg)
PDFのアップロード
PDFを選択します。
![ファイルの選択画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-ope3a.jpg)
ショートコードの生成
ショートコードが生成され、自動的に埋め込みとなります。
![ショートコードの埋め込み画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-ope4a.jpg)
PDFの表示
以下のようにPDFをそのまま表示します。縦スクロールで、すべてのPDFを表示できます。
![PDFの表示画面](https://gungii.com/wp/wp-content/uploads/2017/01/gde-ope5a.jpg)
PDF Image Generator
プラグインの検索
「PDF Image Generator」と入力して、表示されたら「今すぐインストール」をクリック
![プラグインの検索画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-install1a.jpg)
有効化
「有効化」をクリックします。
![有効化の選択画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-install2a.jpg)
設定
「設定」→「PDF画像ジェネレータ」
![設定のメニュー](https://gungii.com/wp/wp-content/uploads/2017/01/pig-setting1a.jpg)
設定画面の表示
デフォルトのまま使用します。
![設定画面の表示](https://gungii.com/wp/wp-content/uploads/2017/01/pig-setting2a.jpg)
使い方
記事の投稿
記事の中にPDFを埋め込むために、「メディア追加」をクリックします。
![記事の投稿画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-ope1a.jpg)
PDFのアップロード
PDFを選択します。
![ファイルの選択画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-ope2a.jpg)
メディアの配置、大きさの選択
メディアの配置、大きさを選択して、「投稿に挿入」をクリックします。
![メディアの配置、大きさの選択画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-ope3a.jpg)
PDFの埋め込み
サムネイル画像にリンクがつき、埋め込みができます。
![PDFの埋め込み画面](https://gungii.com/wp/wp-content/uploads/2017/01/pig-ope4a.jpg)
Webページの表示
サムネイル画像をクリックすると、PDFが開きます。
![Webページの表示](https://gungii.com/wp/wp-content/uploads/2017/01/pig-ope5a.jpg)