この記事は約 4 分で読めます。2015年8月11日
こんにちは!Webma!(ウェブマ)制作担当の渡邉清子です。
前回私よりpdfの圧縮方法についてお話しさせていただきましたね。
今回はそのpdfを実際にページ内に埋め込んでみましょう!
順番としてはプラグイン(スマートフォンでいうアプリのようなもの)をダウンロードし、そこからページ作成画面で設定をしていきます。
使用するプラグイン、Embed PDF
Embed PDFダウンロードサイト
管理画面からのインストール方法
- ①管理画面よりプラグインを左クリックします。
- ②新規追加を左クリックします。
- ③Embed PDFと入力してください。
![プラグインダウンロード1](http://www.value-web.asia/wp-content/uploads/2015/08/50ecff53542bf22ba3e4047a6f827023-1024x553.png)
- ④左上に茶色に丸が描かれている画像が出てきますので、これの「いますぐインストール」をクリックします。
![プラグインダウンロード2](http://www.value-web.asia/wp-content/uploads/2015/08/bf3b6240980d2da0b80f1231aae554ff-1024x553.png)
- ⑤「プラグインを有効化」をクリックします。
上記作業により、これから先の作業が反映される準備が整いました!
固定ページ(編集画面)での設定方法
1.メディアへ画像を追加する
まず、ページ編集画面でpdfを埋め込みできるように、ローカル(ご自身のパソコンのマイピクチャなど)にある画像を、ワードプレス内にアップロードします。
- ①ワードプレスの管理画面からメディアを開き、「新規追加」をクリックします。
- ②pdfが入っているフォルダをクリックし、ワードプレス画面の前面に表示されるようにします。
- ③挿入したいpdfファイルを左クリックしたまま、ワードプレスの画面まで移動し、左クリックを離します。
- ④ワードプレス内にメディアが追加されたら、ファイル名が正しいか確認をします。
※pdfはメディアライブラリで中の画像を確認する事ができません。ページに挿入して初めて確認できます。
2.固定ページでpdfを埋め込みする方法
先ほどの作業では各ページにpdfが使えるようにする作業を行いました。
では実際にページにpdfを追加していきましょう!
- ①pdfを埋め込みしたい固定ページを開きます。
※このブログなら、管理画面>投稿>ブログ一覧の中から「ワードプレスの中にEmbed PDFプラグインでpdfを簡単埋め込みする方法」のタイトルをクリックします。
- ②pdfを埋め込みたい部分が決まったら、「ビジュアルモード」の状態でテキストエリアを左クリックをします。
![ビジュアルモード](http://www.value-web.asia/wp-content/uploads/2015/08/67a843cb87c0995d7d8f73f734f00ed4-1024x233.png)
- ③メディアを追加ボタンをクリックし、埋め込みたいpdfを選択します。
![メディアを追加](http://www.value-web.asia/wp-content/uploads/2015/08/3f8c340277329db0585b77126fe9b531.png)
※ちなみにこの時画像のURLをコピーしてテキストモードに貼り付けると、⑥までが省略できます。
- ④挿入された時に<a href=”pdf名.pdf”>pdfタイトル</a>と表示されます。
※この時公開画面で表示されるのはpdタイトルという文字にリンクが付いていて、そこをクリックするとpdfが開く状態です。公開画面でpdfを表示させるにはあとひと手間でできます!
- ⑤「ビジュアルモード」から「テキストモード」へ切り替えます。
![テキストモード](http://www.value-web.asia/wp-content/uploads/2015/08/efa4e19cb52047d1a265ceab96342aa7-1024x185.png)
- ⑥以下のpdf名以外の部分を削除します。
![メディア挿入後消すとこ](http://www.value-web.asia/wp-content/uploads/2015/08/22b5c8d1fa1fbd52f09590b07ae06a64.png)
- ⑦pdf名の前と後に、以下のタグを入力します。
[embed]http://www.value-web.asia/wp-content/wploads/2015/08/1.pdf[/embed]
- ⑧更新ボタンを押します。
- ⑨公開画面にて確認してください。
pdf埋め込み後の表示させるサイズを変更する方法
横向きのpdfを埋め込みすると、表示するエリアの元々の設定が縦書き用のサイズなので、バランスが悪くなります。
そこで、表示させるエリアのサイズを自分で設定する事ができますので変更してみましょう!
<![if !IE]><![endif]>