[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

公開日: : CSS, Web制作 ,

柔軟に対応出来るCSS

リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわかるようにアイコンを付ける事がよくあります。

一般的な方法としては、aタグにクラスをつけて表現する事が多いのではないでしょうか。
クラスを付ける場合、全てのリンクに適切なクラスが付いているかチェックしたり、クラスの付け忘れなども出てきます。

今回紹介する方法は、そんな心配がなくなり、いろいろなタイプに対応できますので、覚えておきましょう。

外部リンクの場合

よくある方法として、僕も実際に使っていたやり方だと下記のようになります。

<a href="https://www.google.co.jp" target="_blank" class="blank">リンク外部</a>
a.blank{
 background-image:url(../images/icon_window.png);
 background-position:right center;
 background-repeat:no-repeat;
 padding:0 20px 0 0;
}

aタグにクラスが付いてます。
この場合、全ての外部リンクにクラスを付ける必要が出てきます。
それは、とても面倒ですよね。

そういうときは、リンク先がどうなっているかCSSでチェックし、該当するものにだけスタイルを当てることができます。

<a href="https://www.google.co.jp" target="_blank">リンク外部</a>
a[href^="http"]{
 background-image:url(../images/icon_window.png);
 background-position:right center;
 background-repeat:no-repeat;
 padding:0 20px 0 0;
}

aタグのクラスがなくなりましたが、CSSが複雑になりました。
順番に見ていきましょう。
まず、aタグのhref属性をチェックしているのが最初の部分ですが、hrefの後に「^=」が付いています。
これは、^=をつけるとその後の””内から始まるという意味があります。
つまり、今回は、hrefがhttpから始まる場合、ということになります。

似たような方法で、下記のような事もできます。

a[target="_blank"]{
 background-image:url(../images/icon_window.png);
 background-position:right center;
 background-repeat:no-repeat;
 padding:0 20px 0 0;
}

これは、target属性が、今回は「=」なので_blankと一致した場合ということになります。
この場合、リンク先が外部であろうが内部であろうが、target=”_blank”が付いていると適用されます。

PDFやWORD、EXCELの場合

リンク先がPDFファイルだったりwordファイルだったりする時も、ファイルが何であるか示すためりアイコンを付ける事があります。
そういう時も、上記の外部リンク同様にファイルタイプに合わせたアイコンを付けることができます。

<p><a href="aaa.pdf">リンクPDF</a></p>
<p><a href="aaa.doc">リンクWORD</a></p>
<p><a href="aaa.xls">リンクEXCEL</a></p>
a[href$=".pdf"]{
 background-image:url(../images/icon_pdf.gif);
 background-position:right center;
 background-repeat:no-repeat;
 background-size:14px;
 padding:0 20px 0 0;
}
a[href$=".doc"]{
 background-image: url(../images/icon_doc.gif);
 background-position:right center;
 background-repeat:no-repeat;
 background-size:14px;
 padding:0 20px 0 0;
}
a[href$=".xls"]{
 background-image: url(../images/icon_xls.gif);
 background-position:right center;
 background-repeat:no-repeat;
 background-size:14px;
 padding:0 20px 0 0;
}

こうなります。三つともほとんど同じ事をしています。
では、見ていきましょう。
今回は、前回同様href属性をチェックしていますが、間にある記号が「^=」ではなく「$=」になっています。
この「$=」は、この文字列で終わるという意味になりますので、上から.pdfで終わるリンク、.docで終わるリンク、.xlsで終わるリンクを指しています。

まとめ

このように、CSSをちょっと工夫してあげるだけで、全体を通してスタイルを適用出来ます。
ヘッダーやフッターに外部リンクがあって、そこにはスタイルを適用したくない場合などは、#contents a[href^=”hhttp”]のように場所を限定してあげれば問題ありません。

この他にも、mailtoなども設定できますので、機会があれば取り入れていきましょう。

ad

関連記事

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[CSS] CSS3のtransitionを使ってみよう!

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑