【CSS】 PDFのリンクに自動でアイコンを付けよう

pdf icon

リンク先がPDFファイルというのは、実際にはどれぐらい多い事象だったりするのか分かりかねるのですが、以前仕事をしたところでは大量にあったりしました。しかもかなりお堅い系だったのでリンク先がわかるようにアイコンを付けるのが決まりになっていたんですね。となると当然、いちいちhtmlでアイコン部分をくっつけるのも面倒ですし、aタグを書いた状態で自動的にアイコンがついてくれるようなCSSだったんです。

スポンサーリンク

アイコンを自動的につけるには…

現在の案件で小規模ながらPDFアイコンがつくページのコーディングをすることになったので、自動アイコンについて考えてみました。まずはリンクの後ろにアイコンが付くということで

  • :after……要素の直後にスタイルを適用する
  • content……コンテンツを挿入する

この組み合わせかなとは考えました。ためしてみましょう。そのためにはアイコンを用意しておきたいところです。ということでアドビの公式ページから。

Icons and web logo guidelines

ここのAdobe PDF file iconの部分にweb用のアイコンがあります。これを使っていきましょう。
まず、htmlは単純なものを用意しておきます。それに対して自動的にアイコンが装着されるのが目的です。

【html】
<a href="aaa.pdf">PFD file</a>

これに対してcssは

【css】
a:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/Adobe_PDF_file_icon_24x24.png) no-repeat;
}

image1

イメージに近い感じで表示ができましたね。ただ、これだと他のaタグにもアイコンがついてしまってます。

image2

なので、リンク先がpdfファイルのみに限定してアイコンが付く形にしてあげたいところ。

リンク先が.pdf(pdfファイル)のみにするには

css3のセレクタを色々とみてみると良さそうなのがありました。以下、HTMLクイックリファレンスより引用させていただきます。

E[foo$=”bar”] …… foo属性の値がbarで終わるE要素

E[foo$=”bar”]は、属性セレクタの一種で、 foo属性の値がbarで終わる(後方一致する)E要素にスタイルを適用する際に使用します。

今回の自動アイコン化に対応させて書いてみると

a[href$=".pdf"]

つまり「aタグのhrefの中身が.pdfで終わる」もののみ該当というセレクタですね。これを使えば.pdfのリンク先のみアイコンを付ける処理ができます。実際に先ほどのcssを改良してみましょう。

【css】
a[href$=".pdf"]:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/Adobe_PDF_file_icon_24x24.png) no-repeat;
}

これで実際にみてみると

image3

無事にpdfファイルへのリンクのみにアイコンを設置することができましたね。この方法を使えば、エクセルファイルのリンクやドキュメント、外部リンクなどのアイコンも自動設置がcssで実装可能です。

まとめ

これも前回に続いてCSSの便利な使い方みたいな感じでした。

CSSでカウント counter-increment で 順位表示をお手軽実装
スタイルシートでwebコーディング的なことを色々とやったりしてますが、まだまだしらない機能みたいなものは一杯あったりします。普段なか...

どちらも仕組みさえ理解してしまえば難しくないので、是非試してみてください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする