BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
皆さんは普通のリンクだと思ってクリックしたら突然PDFが開いたり、メーラーが起動したりでイライラしたことがありませんか?
個人的には騙された気持ちになることがあるので、ユーザーに同じような思いをさせないためにもこういう細かいところにも気を配りたいですね。
ということで、今回はPDFファイルやZIPファイルなど、ダウンロードができるファイルにリンクを設定するときに特定の表示ができるようにする方法をご紹介いたします。

今回ご紹介する内容

別ウインドウで表示される場合にアイコンを表示したい

デモページ

See the Pen
NWdEYEa
by こた@WEBデザイナー (@kitako425)
on CodePen.

HTML

CSSセレクタ

属性セレクタと[::after]セレクタを使用して、リンク先を別ウインドウで開く設定になっているaタグのテキストにだけ、後ろにアイコン画像を表示します。
リンクテキストの後ろにアイコン画像を表示するのはよく見かけるデザインですよね。
属性セレクタと::afterセレクタを使ってこのデザインを実現する方法は、活用の機会が多くてとても役に立ちます。

アイコン画像の位置を調整するには

使用するアイコン画像によっては、テキスト当幕位置が合わず、ずれて見えることがあります。
そのときは「a[target=”_blank”]::after」のスタイルに、「position:relative;」と「bottom」プロパティ(またはtopプロパティ)を追加します。
そして、bottomプロパティに適用する値を大きくしたり小さくしたりして、位置の調整を行いましょう。

PDFなど特定のファイルへのリンクだけアイコンや囲みを表示したい

デモページ

See the Pen
yLgQvmb
by こた@WEBデザイナー (@kitako425)
on CodePen.

上記同様に、属性セレクタと::afterセレクタを利用します。
リンク先がPDFファイルの場合=リンク先の拡張子が「.pdf」のときだけ適用されるスタイルを作成します。
PDFファイルやZIPファイル、エクセルにワードなどにリンクをするときに、リンクテキストの後ろにアイコン画像を表示させるのもよくおこなわれるデザイン処理になります。
ユーザーにとってリンク先がダウンロードファイルなのか別ベージに飛ぶリンクなのか一目でわかるようにすることはユーザビリティが上がるので、SEO的にも良いとされます。
こうしたファイルにだけスタイルを適用するには、リンク先の拡張子が「.pdf」や「.zip」かどうかを調べます。
その際に使える属性セレクタの書式が、次に示す「属性$=値」になります。

まとめ

今回ご紹介する方法の他にもクラスをつけて設定する方法もありますが正直面倒ですよね。
拡張子によって、表示するアイコンを変更することができるので便利ですし、WordやExcelなど、いろんな拡張子ごとに設定すれば管理も楽になります。
ぜひ活用してみてください!