noramemo

どうも！最近ブログ更新が続いていて、三日坊主となるのではと大いにビビっているnoramasaです！
今回メモっておくのは、サイト内のリンクがどんな役割を持つのか！を、
ユーザさんに見分けやすくしてあげようという仕組みを簡単に設定するための方法です。
例えばPDFファイルが開くリンクだった場合は、リンクの左とか右とかにPDFっぽいアイコンがついてたりすると思います。
まさにそれです！
確かに何が開くリンクなのかひと目で分かるにこしたことないですね♪

結構前から知ってたんですが、いざウェブサイトを作るという時にすっかり忘れてしまうことが続いたので、
今回を機に使っていければと思いメモメモ♪

• 

●実装方法

『いやいや…各リンクにclass=”pdf”みたいなことしてもできるんですけど。』
ごもっとも！
ここはPDFへのリンクをまとめたブロックだから大元にclass当てる…とかでもいいんですが、
いろんなリンクが入り混じったとこではaタグごとにclass当てるのかってことになってめんどくさいですよね。

今回は「aタグが何を対象にしているか」を判断してスタイルを割り当てるやり方です。
とりあえず見てみましょうか！
HTMLへの記述例はこんな感じ。
※全体はDEMOをご確認ください。

・・・ほにょほにょ・・・

<style>
.demo ul li{
	margin-bottom: 20px;
}
.demo ul li a{
	padding: 10px 40px 10px 0px;
}
.demo a[href$=".pdf"]	{ 
	background: url(img/icon_pdf.png) no-repeat right 2px;
}
.demo a[href$=".xls"]	{ 
	background: url(img/icon_xls.png) no-repeat right 2px;
}
.demo a[href$=".jpg"]	{ 
	background: url(img/icon_jpg.png) no-repeat right 2px;
}
.demo a[href$=".zip"]	{ 
	background: url(img/icon_zip.png) no-repeat right 2px;
}
.demo a[href^="http"]	{ 
	background: url(img/icon_etc.png) no-repeat right 2px;
}
</style>

・・・ほにょほにょ・・・

<div class="demo" id="demo">
<ul>
	<li>・<a href="#demo">サイト内リンク（相対パス）</a></li>
	<li>・<a href="./img/sample.xls" target="_new">表計算ファイル（.xls）へのリンク</a></li>
	<li>・<a href="./img/sample.pdf" target="_new">PDF（.pdf）へのリンク</a></li>
	<li>・<a href="./img/sample.jpg" target="_new">画像（.jpg）へのリンク</a></li>
	<li>・<a href="./demo.zip" target="_new">圧縮ファイル（.zip）へのリンク</a></li>
	<li>・<a href="http://www.youtube.com/watch?v=xftGguFD3w4&feature=g-all-lgv">外部リンク（YouTube）</a></li>
</ul>
</div>

・・・ほにょほにょ・・・

まぁ簡単に言えば、スタイルを割り当てる判断をしていたclassがリンクの対象物になっただけですね。
（…なんか同じことひたすら言ってる気がする。でも一向に伝わりやすくなってないｗｗｗ）
DEMOソースの中にはありませんが、.pptや.ai、.htmlなんかも設定可能ですよ。
ちなみにIE6とかでは多少hackを使わないと無理そうですのでご注意ください。

●まとめ

このnoramemoブログも、norabookサイトもこういうことしっかりしないとな…と反省しております。
とりあえず間に合わせでイジったテーマを作り直すときにまとめてやろうと思いますです！
あとは、設定の有無はどうであれ、ベースとなるCSSにはコメントアウトで入れておいたらいいんじゃないかと。

>>>デモ版はこちらからご確認ください。