PDFをWordPressに埋め込むとき、ファイルブロックを使用することがありますが、ファイルブロックで埋め込むと、スマホで表示したときはファイル名とダウンロードボタンのみが表示されます。
「PDFを画像のように表示させ、ダウンロードもできるようにしたい！」という場合におすすめの方法をご紹介します。

PDFの画像化と設定

PDFの画像化とダウンロード

下記のようなツールを使用して、PDFを画像化してダウンロードします。
https://www.ilovepdf.com/ja/pdf_to_jpg

※上記のツール以外でも、PDFを画像化できるものであれば、問題ございません。

STEP
1

画像の圧縮

ダウンロードした画像を下記のようなツールで圧縮します。
https://squoosh.app/

※STEP2は、絶対に必要ということではないですが、PDFから画像化しただけの状態では、画像の容量が大きくサイトを圧迫してしまうため、できる限り容量を小さくしておくことをおすすめいたします。

①画像をドラッグ＆ドロップするなどしてサイトにアップします。
②右側の変換形式でWebPを選択し、ダウンロードボタンをクリックします。

※WebP形式は、容量が小さく画像の劣化も少ないためおすすめですが、MozJPEG（jpg形式）でもOKです！

STEP
2

WordPressのメディアにPDFをアップ

アップしたPDFをクリックします。

「URLをクリップボードにコピー」をクリックして、PDFのURLをコピーしておきます。

STEP
3

ページに画像をアップ

固定ページや投稿ページに、STEP2で圧縮した画像をアップしていきます。
※今回は固定ページで作成をおこないます。

ブロックの追加マーク（＋マーク）を押して、画像を選択します。

アップロードをクリックします。

画像を選択して、開くをクリックします。
※お使いのデバイスによって操作が少し異なる場合がございます。

画像がぼやけている場合は、右側の設定のところで、「フルサイズ」を選択します。
※画像を選択した状態で、右側に設定のメニューが表示されます。

STEP
4

画像にPDFのリンクを設定

先ほどコピーしたPDFのURLを画像のリンク先として設定していきます。
画像を選択して、リンクボタンをクリックします。

出てきたボックスに、コピーしておいたPDFのURLをペーストします。
ペーストできたら、「適用」（矢印のマーク）をクリックします。

STEP
5

画像をクリックしてPDFが開くことを確認

ページを保存してプレビューし、画像をクリックします。

すると、このようにPDFが開くことが確認できます。

STEP
6

PDFを別のタブで
開くようにするには？

画像へのリンク設定時に、下記の設定をおこなうことで、画像クリック時にPDFは別のタブで開くようにすることが可能です！

出てきたボックスに、コピーしておいたPDFのURLをペーストした後、「適用」（矢印のマーク）ではなく、その右の「リンク設定」のマークをクリックします。

新しいタブで開くを「オン」にします。
その後、「適用」（矢印のマーク）をクリックします。

上記の設定をおこなうことで、PDFを別タブで開くことができるようになります。

Check！

このように、
「画像をクリックするとPDFが開きます」
という一言を入れておくと、ユーザーにとってわかりやすくなります！

こちらの関連記事も読まれています

WordPressサイトに「検索機能」をつけるには？ 【カスタム投稿タイプ】「投稿者」を表示させる方法 Custom Post Type UIとAdvanced Custom Fieldsを使ったカスタム投稿の作成方法 【第88回】Googleアナリティクス活用法③管理画面で必要な設定項目「ワードプレス作成講座」

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

概算お見積書 PDF出力

お見積りのご依頼・打ち合わせはメール/お電話/GoogleMeet等オンラインでもご対応可能です。全国からお問い合わせを受付けています。
翌営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    もし可能でしたら検索キーワードを教えてください。

    差し支えなければご紹介者様のお名前を教えてください。様

    もし可能でしたら具体的な媒体等を教えてください。

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか？

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか？(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか？(複数選択可)

    SSL(https://～)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか？(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)

    こちらの関連記事も読まれています

    WordPressサイトに「検索機能」をつけるには？ 【カスタム投稿タイプ】「投稿者」を表示させる方法 Custom Post Type UIとAdvanced Custom Fieldsを使ったカスタム投稿の作成方法 【第88回】Googleアナリティクス活用法③管理画面で必要な設定項目「ワードプレス作成講座」
    カテゴリー
    WordPress講座
    前の記事
    レスポンシブデザインを意識したカラムブロックの使い方
    2024年7月3日
    次の記事
    中小企業の採用活動は有料求人媒体を使うな
    2024年7月17日