自作ホームページ集客ブログ

HOME
自作ホームページ集客ブログ
ホームページ作成術
WordPressのPDFリンクアイコン表示方法【プラグインも紹介】

2022-05-29 / 最終更新日時 : 2022-05-29 鈴木俊雄ホームページ作成術

WordPressのPDFリンクアイコン表示方法【プラグインも紹介】

更新日:2022年5月28日筆者:鈴木俊雄（@smart_plan_ts、Facebook）

WordPressのPDFリンクアイコン表示方法【プラグインも紹介】

要約

WordPressでPDFアイコンを表示するには、CSSやHTMLに記述を追加するかプラグインを使用する必要があります。この記事ではPDFアイコンの探し方、記述例、プラグインの使い方などを紹介しています。

この記事は、

WordPressでPDFリンク箇所にPDFアイコンを表示する方法が分からない…
PDFアイコンを無料で入手できるサイトはありますか？
簡単にアイコンを表示できるWordPressプラグインはありますか？

といったような、お悩みや質問のある方へ向けてまとめてあります。

この記事を読むことによって、

WordPressでPDFリンク箇所にPDFアイコンを表示する方法が分かります。
無料のPDFアイコンが入手できるサイトが分かります。
簡単にアイコンを表示できるWordPressプラグイン「Font Awesome」の使い方が分かります。

【目次】

1 WordPressのPDFリンクアイコン表示方法【プラグインも紹介】
2 WordPressで使えるPDFアイコンの探し方
- 2.1 PDFアイコンのあるサイト
- 2.2 PDFアイコンイラストのあるサイト
3 WordPressでPDFアイコンを表示させる記述
4 アイコン表示プラグイン「Font Awesome」の使い方
- 4.1 「Font Awesome」の使い方
5 CSS記述やプラグイン使用が面倒な場合
6 まとめ（WordPressのPDFリンクアイコン表示方法）
7 WordPressとPDFに関するその他の記事

WordPressのPDFリンクアイコン表示方法【プラグインも紹介】

WordPressで作るウェブページ上にPDFのリンクを貼るとき、PDFと分かるようにPDFのアイコンも一緒に表示させたい場合があります。

PDFアイコンの汎用的な絵文字でもあれば楽なのですが、適切な絵文字はありません。PDFアイコンをWordPressで表示するには、面倒ですがCSSやHTMLに記述を追加するか、アイコン表示用のプラグインを使う必要があります。

以降、これらについて説明していきます。

この記事は、下記の構成で説明していきます。

WordPressで使えるPDFアイコンの探し方
WordPressでPDFアイコンを表示させる記述
アイコン表示プラグイン「Font Awesome」の使い方
CSS記述やプラグイン使用が面倒な場合

WordPressで使えるPDFアイコンの探し方

PDFアイコンは下記のサイトから探せます。

PDFアイコンのあるサイト

Font Awesome（Font Awesome 6 Free）

➡︎ Font Awesome（Font Awesome 6 Free）へ

Icons8

➡︎ Icons8 へ

icooon-mono

➡︎ icooon-mono へ

PDFアイコンイラストのあるサイト

イラストAC

➡︎ イラストAC へ

シルエットAC

➡︎ シルエットAC へ

他にもアイコンサイトはありますが、調べたところPDFアイコンは1つあるかないか…という量でした。なので、他のサイトについては掲載は見送りました。

注：各サイトの利用規約や著作権を十分に確認してからご利用ください

WordPressでPDFアイコンを表示させる記述

CSSやHTMLの記述でPDFアイコンを表示させる例をいくつか紹介します。

CSS記述でPDFアイコンを表示する（Font Awesome使用）
CSS記述でPDFアイコンを表示する（画像使用）
HTML記述でPDFアイコンを表示する（Font Awesome使用）

例で使用するFont Awesome（Font Awesome 6 Free）のPDFアイコン

出典：fontawesomeより

例で使用するPDFアイコン風のイラスト画像

CSS記述でPDFアイコンを表示する（Font Awesome使用）

PDFのファイルリンクがある箇所全てに、Font Awesome（Font Awesome 6 Free）を使用して、PDFアイコンをリンクの後ろに表示するCSS記述例です。

a[href*=".pdf"]::after {
content: "\f1c1";
font-family: "Font Awesome 6 Free";
color: #F30401;
}

PDFアイコン表示結果例1

CSS記述でPDFアイコンを表示する（画像使用）

PDFのファイルリンクがある箇所全てに、PDFアイコン風のイラスト画像（●●●.png）を使用して、PDFアイコンをリンクの前に表示するCSS記述例です。

a[href*=".pdf"]:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 25px;
height: 34px;
margin-right: 10px;
background-image: url(https://xxxxxxxx.com/〜/●●●.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
}

PDFアイコン表示結果例2

HTML記述でPDFアイコンを表示する（Font Awesome使用）

PDFのファイルリンクがある任意の箇所（個々に）に、Font Awesome（Font Awesome 6 Free）を使用して、PDFアイコンをリンクの後ろに表示するHTML記述例です。

<p>➡︎ <a href="https://xxxxxxxx.com/〜/xxxxx.pdf" target="_blank" rel="noreferrer noopener">PDFリンクアイコンをHTMLで個々に</a><i class="fa-solid fa-file-pdf">  </i></p>

PDFアイコン表示結果例3