ブログ型ホームページ制作ならWebma! 制作費無料、月額格安。無制限フォローと強力なSEO、そしてアクセス解析レポートも毎週提供の集客できるホームページ制作サービス
お気軽にお問い合わせください。
0120-980-939
受付時間 10:00~18:00(土・日・祝日除く)
公開日:2015年8月11日
最終更新日:2016年3月2日

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

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

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

Embed PDFダウンロードサイト

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

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

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

WordPressの固定ページ(編集画面)での設定方法

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

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

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

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

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

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

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

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

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

 

      1. ⑦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余白が取られてしまうのでご注意!

embed高さ指定

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

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

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

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

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

この記事のキーワード

この記事の著者

渡邉清子
渡邉清子

Webma!チーム デザイナー

記事一覧

PR

engage



著者一覧

多胡祐子
多胡祐子

Webma!チーム デザイナー

渡邉清子
渡邉清子

Webma!チーム デザイナー

増子貴仁
増子貴仁

Cross&Crown LLC代表社員、Cross&Crown Security Intelligence LLC代表社員。