[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
柔軟に対応出来る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
関連記事
-
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[HTML]デザインは、やはり大切だった!
デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ
-
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが