リンクの最近のブログ記事

リンクをブロック構造にする

2009年4月20日 22:11 | 個別ページ

ヘッダーメニューなどによく活用するテクニックですが、本来インラインのリンクをブロック構造にすることで、リンクのテキスト部分だけでなく周りまでリンクの領域が広がるので、様々なレイアウトをすることが可能になります。

例えば、メニュー部分のリンクをブロック構造にすると、メニューバーを画像なしに作成できます。

その際、ブロック要素にするa要素に｢display:block;｣とともに、幅を指定しておくことが必要です。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSコード

li.menu a{
   display:block;
   width:200px;
}

外部リンクか内部リンクかを視覚的にわかるようにする

2009年3月24日 22:12 | 個別ページ

外部リンクを｢target="_blank"｣を使用して強制的に別ウィンドウに表示させるか、或いは、ユーザに任意に選択してもらうようにtargetは使用せず常に同一ウィンドウに表示させるかは、いろいろ議論のあるところですが、外部リンク（自ドメイン以外へのリンク）であることがわかるようにするとユーザビリティも向上します。

どのように外部リンクであるかをわかりやすいように表示するか、のひとつの解決方法に｢アイコンをつける｣というのがあります。その際、｢外にリンクする｣という感じが出ているアイコンを選びましょう。

サンプルとして、こちらをお使いください。ライセンスは、著作権フリー、利用は無料です。個人利用・商用利用どちらでもお使いいただけます。

外部リンク用アイコン

(X)HTMLコード

<p>
   <a href="http://www.abc.net">
      自ドメインではないので、アイコンが表示されます
   </a>
</p>
<p>
   <a href="http://www.xxxx.com">
      自ドメインなので、アイコンが表示されません
   </a>
<p>

CSSコード

a[href^="http"]{
   background:url("icon_anotherlink.gif") no-repeat 0 50%;
   padding-left:15px;
}

a[href^="http://www.xxxx.com"],
a[href^="http://xxxx.com"] {
   background:transparent;
   padding:0;
}

※｢xxxx.com｣は各自のドメインに書き換えてください。

a[href^="http"]という書き方なのですが、CSS3で草案されている｢属性セレクタ｣というもので、Firefoxなどのモダンブラウザにはすでに実装されています。しかし、IE6では使用できません。

この場合、a hrefで指定したリンク先に｢http｣から始まる文字列を含む場合はCSSを実行する、ということになります。

しかしながら、httpから始まるもの全てが外部リンクとは限りません。内部リンクでも絶対パスで記述することは多々あります。

そのため、｢http://www.xxxx.com｣或いは｢http://xxxx.com｣（xxxx.comは自ドメインに変更してください）を含むリンクには、アイコンを表示しない、という指定をしています。

余談ではありますが、上記のようなCSSの設定にしてしまうと、サイト全ての外部リンクにアイコンが表示されてしまい、レイアウト崩れの原因になってしまうので、記事の部分などだけに限定して設定をしてください。

外部リンク用アイコンを作ってみました [Cool Web Window]