CSSだけで完結！PDFリンクにアイコンを自動で表示させるスマートな方法

ウェブサイトを閲覧していると、リンクをクリックしたらいきなりPDFファイルが開いて驚いた経験はありませんか？ユーザーにとって、次に何が起こるか分からないのは不安なものです。特にPDFファイルはダウンロードや表示に時間がかかる場合もあるため、事前に「これはPDFファイルですよ」と教えてあげる親切なデザインが求められます。

この記事では、HTMLを一切変更することなく、CSSの力だけでPDFファイルへのリンクにアイコンを自動で表示させるスマートな方法をご紹介します。一度設定すれば、サイト内のすべてのPDFリンクに適用されるため、管理も非常に楽になります。

なぜPDFリンクにアイコンが必要なのか？

ユーザーエクスペリエンス（UX）の観点から、リンクがどのようなコンテンツに繋がっているのかを明確にすることは非常に重要です。PDFリンクにアイコンを付けることで、以下のようなメリットがあります。

視覚的な情報提供: ユーザーはクリックする前に、それがPDFファイルであることを認識できます。
予期せぬダウンロードの防止: 意図しないPDFのダウンロードやブラウザでの表示を防ぎ、ユーザーのストレスを軽減します。
プロフェッショナルな印象: 細かい配慮が行き届いたサイトは、訪問者に良い印象を与えます。

CSS属性セレクタを使った自動割り当て

この機能を実現するために使用するのは、CSSの属性セレクタです。具体的には、[href$=".pdf"]というセレクタを使います。これは「href属性の値が.pdfで終わる要素」を選択するという意味になります。これにより、PDFファイルへのリンクだけをピンポイントで指定し、スタイルを適用することが可能になります。

基本的なCSSコード

まずは、シンプルなアイコンをPDFリンクの横に表示させる基本的なCSSコードを見てみましょう。

a[href$=".pdf"]::after {
    content: "\f1c6"; /* Font AwesomeのPDFアイコンのUnicode */
    font-family: "Font Awesome 5 Free"; /* Font Awesomeを使用する場合 */
    font-weight: 900; /* Solidアイコンの場合 */
    margin-left: 5px;
    color: #dc3545; /* 赤系の色 */
}

解説:

a[href$=".pdf"]: PDFファイルへのリンク（<a>タグ）を指定します。
::after: リンクテキストの直後に擬似要素としてアイコンを挿入します。
content: "\f1c6";: Font AwesomeのPDFアイコン（fa-file-pdf）のUnicodeを指定しています。Font Awesomeを使用しない場合は、ここに任意のテキストや画像を指定することも可能です。
font-family, font-weight: Font Awesomeを使用する場合に必要な設定です。
margin-left: リンクテキストとアイコンの間に少しスペースを空けます。
color: アイコンの色を指定します。PDFのイメージに合わせて赤系にすることが多いです。

アイコン画像を使う方法

Font Awesomeなどのアイコンフォントを使いたくない場合や、オリジナルのアイコン画像を使いたい場合は、background-imageプロパティを使用します。

a[href$=".pdf"]::after {
    content: "";
    display: inline-block;
    width: 16px; /* アイコン画像の幅 */
    height: 16px; /* アイコン画像の高さ */
    background-image: url("path/to/pdf-icon.png"); /* PDFアイコン画像のパス */
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px;
    vertical-align: middle;
}

解説:

content: "";: 擬似要素にはテキストではなく画像を挿入するため、contentは空にします。
display: inline-block: widthとheightを指定するためにinline-blockにします。
background-image: url("path/to/pdf-icon.png"): 使用したいPDFアイコン画像のパスを指定します。
background-size: contain: 画像が要素内に収まるように調整します。
vertical-align: middle: アイコンがテキストと垂直方向で中央揃えになるように調整します。

Font Awesomeの導入方法（補足）

もしFont Awesomeをまだ導入していない場合は、以下のコードをHTMLの<head>セクションに追記するか、WordPressテーマのカスタマイザーなどから追加してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />