つくる 便利ツール

【超簡単】PDFをブログやホームページで画像のように表示させる方法

2022-04-29

タイトル用画像

PDFの資料をブログやホームページ内で画像のように表示させたい!

しかし、PDFは写真といった画像と同じ要領でページに掲載することはできません。

PDFをブログの編集画面にコピペしても何も表示されない…

実は、PDFの中身をブログやホームページに表示させるためには、

・一度、JPGやPNG形式の画像に変換する必要がある
・変換した画像をページに掲載することで表示される

ということをご存知でしょうか?

▼以下は、JPGに変換したPDFの画像をページに掲載し、クリックするとPDFが表示されるようリンクを設定しています。

PDFをブログやホームページで画像のように表示させる
画像をクリックするとPDFを表示できる

サムネイルのようにPDFの内容を画像で掲載しています。

しかし、普段からPDFといったファイルを扱い慣れていないと

・PDFとJPGなどの画像は何が違うのか?
・どのようにしてブログやホームページに掲載することができるようになるか?

といったことがいまいち分からない、という人も多いはず。

そこで今回の記事では、PDFと画像の違いを紹介しつつ、PDFをJPGやPNG形式の画像へ変換する方法を紹介します。

今回の記事でわかること

※リンクをクリックするとジャンプできます。

本記事では、簡単に変換できる方法を紹介しているので、パソコン操作が苦手な方もぜひ参考にしてみてください!

PDFが画像のように表示できない理由

PDFを画像に変換

PDFは、様々な環境で文章を表示させることができますが、画像としてページに掲載することができません。

PDFファイル」と「画像ファイル」の用途が違うためです。

▼PDFファイルと、JPGやPNGなどの画像ファイルの違いは

・PDF → どの環境でも文章データを閲覧できるようにするためのファイル。
・JPGやPNG → ページ上に画像を表示させるためのファイル。

上記のように、PDFはJPGやPNGといった画像ファイルとは用途や性質が違います。

そのため、ブログやホームページでは、画像のように表示させることができません。

だからJPGやPNGといった画像に変換する必要があるんですね。

それでは、どのようにしてPDFの内容をブログやホームページに掲載するのか?

次の章では、具体的な方法を紹介しています。

PDFを掲載する方法

当ブログのようにWordPressで編集している記事へ、PDFの内容を表示させるためには、リンクとして掲載する方法があります。

テキストか画像にリンクを設定し、クリックするとPDFをブラウザ上で表示させる方法です。

PDFファイルがインターネット上にアップされている、ということが前提条件です。

▼実際にPDFのリンクを設定しているので、試しにクリックしてみてください。

テキストにPDFをリンク設定した

>> ハイパーリンクとしてPDFを掲載

画像にPDFをリンク設定した

PDFアイコン

WordPressではなくても、他のブログサービスやホームページを編集する際も、

・画像やテキストにPDFのリンクを設定し、
・別タブでPDFの中身を表示させる

という方法で、PDFを掲載することが多いようです。

PDF単体では、ページ上に画像として掲載できないということ。

それでは次の章より、PDFを画像に変換する方法を紹介します。

今回は、簡単にできる方法を紹介しているので、「パソコンは苦手」という方もぜひ参考にしてください!

PDFを画像に変換する方法3選

PDFを画像に変換するためには、アプリといったツールを使用する必要があります。

大きく分けると、

・パソコンにインストールするアプリ
・もともとパソコンに入っているアプリ
・ブラウザ上で利用できるもの

上記の3種類があります。

▼今回紹介する変換ツールは以下の通り。

PDFを画像に変換できるツール

※リンクをクリックすると各ツールの項目へジャンプします。

今回の記事では、難易度順(簡単で使いやすい順)に変換ツールを紹介していきます。

Adobe Acrobat Pro DC

Adobe Acrobat Pro DCの使い方

一番簡単な方法は、Adobe Acrobat Pro DC です。

パソコンにインストールして使用するAdobe社のアプリです。

購入時にもともとインストールされている場合もあります。

▼以下のようなアイコンのアプリが入っていないかパソコン内を確認してみてください。

Adobe Acrobat Pro DCの使い方

変換を行う際は、Adobe Acrobat Pro DC で画像に変換したいPDFを開き、画像として書き出し(保存)するだけです。

メリット:シンプルな操作で変換できる

デメリット:有料版じゃないと変換できない

シンプルなマウス操作だけで簡単に画像ファイルに変換できます。

ただ、Adobeの有料のツールということもあり、誰でも使用できるわけではないところが難点です。

それでは、さっそく操作方法を見ていきましょう。

▼PDFをAdobe Acrobat Pro DCで開き、

ファイル > 書き出し形式 > 画像 >任意の拡張子を選択

Adobe Acrobat Pro DCの使い方

任意の拡張子を選択したらあとは保存するだけです。

ブログやホームページ用ならJPGかPNGがおすすめです。

Adobe Acrobat Pro DCの使い方

Adobeの Acrobat Reader というツールなら無料でインストールできるため、多くのパソコンに入っていますが、「書き出し形式」で保存する拡張子をPDF以外を選択することができません。

もし、使用しているパソコンに Adobe Acrobat Pro DC が入っているのならば、ぜひ使ってみてください。

オンラインツール・PDF to Image

 PDF to Imageの使い方
画像引用:PDF to Image

オンライン上で画像へ変換し、ダウンロードする方法もおすすめです。

この章では数あるオンラインツールの中から、比較的シンプルな PDF to Image を紹介します。

メリット:とにかく簡単

デメリット:オンラインツールのため、セキュリティ面で注意が必要

デメリットに関しては、後ほど説明します。

それでは、さっそく操作方法を見ていきましょう。

まずは、以下のリンクから PDF to Image を開きます。

>> PDF to Image

▼「アップロード」から変換したい画像を選択、または、青い波線の枠内に変換したい画像をドラッグ&ドロップします。

 PDF to Imageの使い方
画像引用:PDF to Image

アップロードと変換が完了すると、以下のようにZipファイルが表示されます。

▼Zipファイルの白い「ダウンロード」ボタンをクリック。

PDF to Imageの使い方
画像引用:PDF to Image

ダウンロードフォルダにZipファイルが保存されます。

Zipファイルはそのまま使用することが出来ないため、以下のような手順で「解凍」という作業を行います。

・WindowsならZipファイルを 右クリック>すべて展開
・Macなら Zipファイルを 右クリック>開く

PDF to Imageの使い方
画像引用:PDF to Image

これでPDFをJPGに変換することができました。

オンラインツールのため、インターネット環境さえ整っていれば、誰でも使用が可能です。

企業によっては、セキュリティの観点からオンライン上のファイルをダウンロードすること自体を禁止していることもあるため、使用が難しい場合もあります。

▼変換後の拡張子を細かく選択できる、他のオンラインツールの使い方はこちら

Snipping Tool

Snipping Tool どこ?
画像引用:Snipping Tool

Windowsのパソコンに最初から備わっているツールです。

このツールは、画像キャプチャを生成するツールで、PDFから画像に変換する範囲を任意で選択することができます。

メリット:変換したい範囲を選択できる。変換した画像をコピペしやすい

デメリット:Windowsのパソコンでしか使えない。最初はツールを探すのが大変

最初は、Windowsの「アクセサリ」から探して開く必要があるため、このツールの存在自体を知らない人も多いようです。

この章では、ツールの開き方から紹介していきます!

▼まずは、画面の左下にある「Windowsスタートボタン」をクリックします。

Snipping Tool どこ?

▼スタートメニューの中から

Snipping Tool どこ?

Windows アクセサリ > Snipping Tool

の順にクリック。

▼すると以下のように Snipping Tool が起動します。

Snipping Tool どこ?
画像引用:Snipping Tool

もし、今後何度も使う機会があるのなら、タスクバー(画面下のバー)にピン留めしておくことをおすすめします。

▼タスクバーに Snipping Tool のアイコンが表示されているので、

Snipping Toolの使い方

右クリック > タスクバーにピン留めする

の順にクリック。

これでタスクバーに Snipping Tool のアイコンが常に表示されるようになりました。

それでは、さっそく Snipping Tool を使ってみましょう。

▼Snipping Tool左上の「新規作成」をクリックします。

Snipping Toolの使い方
画像引用:Snipping Tool

▼すると、画面が白っぽくなります。

Snipping Toolの使い方
画像引用:Snipping Tool

画像にしたい箇所をドラッグ(左クリックしながらマウスを動かす)して、選択範囲を四角で囲んでください。

マウスから指を離すと、画像として変換する範囲の選択が完了します。

選択した範囲が Snipping Tool に表示されるはずです。

▼保存は、フロッピーマークの「保存ボタン」をクリックします。

Snipping Toolの使い方
画像引用:Snipping Tool

▼あとは、任意の場所に保存するだけです。

Snipping Toolの使い方
画像引用:Snipping Tool

ファイル名を変更したい場合は、任意のファイル名を入力。

ちなみに画像はPNG形式で保存されます。

これで Snipping Tool を使用した画像ファイルへの変換は完了です。

Snipping Toolの便利なところ

Snipping Tool で範囲選択した画像をコピー(Ctrl + C)、ペースト(Ctrl + V)で、画像をメール本文やブログ記事はもちろんのこと、パワーポイントやWordといったドキュメントにも埋め込むことが出来ます。

Snipping Toolの使い方
画像引用:Snipping Tool
  1. Snipping Tool で範囲選択した画像をコピー(Ctrl + C)
  2. 画像を貼り付けたい箇所へ ペースト(Ctrl + V)
Snipping Toolの使い方

これで簡単に、PDF内の情報を画像として画面に表示させることが出来るようになりました。

まとめ:変換方法はたくさんある

今回の記事では、簡単にPDFファイルを画像ファイルに変換する方法を紹介しました。

今回の記事だけでも3パターンの変換方法がありましたが、他にも画像編集専用のソフトや、ブラウザの拡張機能を使用した方法などがあります。

他にも様々な方法でPDFの内容を画像として変換することが可能です。

数多くある変換方法の中から、自分に合う方法を見つけてみてください。

-つくる, 便利ツール