ワードプレスの中にEmbed PDFプラグインでpdfを簡単埋め込みする方法

こんにちは！Webma!（ウェブマ）制作担当の渡邉清子です。

前回私よりpdfの圧縮方法についてお話しさせていただきましたね。
今回はそのpdfを実際にページ内に埋め込んでみましょう！
順番としてはプラグイン（スマートフォンでいうアプリのようなもの）をダウンロードし、そこからページ作成画面で設定をしていきます。

使用するプラグイン、Embed PDF

Embed PDFダウンロードサイト

管理画面からのインストール方法

1. ①管理画面よりプラグインを左クリックします。
2. ②新規追加を左クリックします。
3. ③Embed PDFと入力してください。
4. ④左上に茶色に丸が描かれている画像が出てきますので、これの「いますぐインストール」をクリックします。
5. ⑤「プラグインを有効化」をクリックします。

上記作業により、これから先の作業が反映される準備が整いました！

固定ページ（編集画面）での設定方法

1.メディアへ画像を追加する

まず、ページ編集画面でpdfを埋め込みできるように、ローカル（ご自身のパソコンのマイピクチャなど）にある画像を、ワードプレス内にアップロードします。

1. ①ワードプレスの管理画面からメディアを開き、「新規追加」をクリックします。
2. ②pdfが入っているフォルダをクリックし、ワードプレス画面の前面に表示されるようにします。
3. ③挿入したいpdfファイルを左クリックしたまま、ワードプレスの画面まで移動し、左クリックを離します。
4. ④ワードプレス内にメディアが追加されたら、ファイル名が正しいか確認をします。

※pdfはメディアライブラリで中の画像を確認する事ができません。ページに挿入して初めて確認できます。

2.固定ページでpdfを埋め込みする方法

先ほどの作業では各ページにpdfが使えるようにする作業を行いました。
では実際にページにpdfを追加していきましょう！

1. 1. 1. ①pdfを埋め込みしたい固定ページを開きます。
         

         ※このブログなら、管理画面＞投稿＞ブログ一覧の中から「ワードプレスの中にEmbed PDFプラグインでpdfを簡単埋め込みする方法」のタイトルをクリックします。

      2. ②pdfを埋め込みたい部分が決まったら、「ビジュアルモード」の状態でテキストエリアを左クリックをします。
         
      3. ③メディアを追加ボタンをクリックし、埋め込みたいpdfを選択します。
         
         
         ※ちなみにこの時画像のURLをコピーしてテキストモードに貼り付けると、⑥までが省略できます。
      4. ④挿入された時に<a href=”pdf名.pdf”>pdfタイトル</a>と表示されます。
         ※この時公開画面で表示されるのはpdタイトルという文字にリンクが付いていて、そこをクリックするとpdfが開く状態です。公開画面でpdfを表示させるにはあとひと手間でできます！
      5. ⑤「ビジュアルモード」から「テキストモード」へ切り替えます。
         
      6. ⑥以下のpdf名以外の部分を削除します。
         

1. 1. 1. ⑦pdf名の前と後に、以下のタグを入力します。

［embed］http://www.value-web.asia/wp-content/wploads/2015/08/1.pdf［/embed］

1. 1. 1. ⑧更新ボタンを押します。
      2. ⑨公開画面にて確認してください。

pdf埋め込み後の表示させるサイズを変更する方法

横向きのpdfを埋め込みすると、表示するエリアの元々の設定が縦書き用のサイズなので、バランスが悪くなります。
そこで、表示させるエリアのサイズを自分で設定する事ができますので変更してみましょう！
※最初のembedの後に以下のものを設定するとサイズが変更できます。

1. ①半角スペース
2. ②width=”任意の数値”（%やpx）
   ※上記pdfはwidth=”100%”
3. ③半角スペース
4. ④height=”任意の数値”（%やpx）
   ※上記pdfはheight=”360″
   サイズはお好みの数値で設定してください。

heightの数値に”px”と入力してしまうと、pdfが表示されている下にある「Unable to display PDF　Click here to download」の部分に360px余白が取られてしまうのでご注意！

パソコンからみる場合とスマートフォンから見る場合の事を考えて高さも設定しました。
1つ目のpdfは携帯から見たときとても見づらかったですね、すみません。

pdfを埋め込みすることにより便利になる事

1. 1. 1. ・会社のカタログ（1枚ずつでも、連結した複数枚のpdfでも！）
      2. ・キャンペーンのチラシ

用途に合わせてjpgやpngなどの画像と、pdfのファイルを使い分けてみてくださいね！

併せて読んでほしい、pdfに関するブログ

大きすぎるpdfのファイルサイズを小さくする方法

カテゴリ：Web制作
タグ：

関連するほかの記事