r-Studio

文字サイズ変更：

現在の文字サイズ：

このblogでは、外部リンクの前にはが表示されるようにしています。
また、内部リンクには何も表示されないようにしています。

こうしておけば、例えば私のように全てのリンクを同一ウィンドウ（同一タブ）に開くように設定している人が、外部リンクだけは新規ウィンドウ（新規タブ）に開きたい場合の目安にすることが出来ます。

もっとも、現在のところIE等のブラウザではこの画像は表示されません。
確認したのはIE6、Firefox 1.5.0.1、Opera 8.53だけですが、Firefoxでしか表示されませんでした。Opera 9.0ならいけるかも？表示されます。

方法はCSSを使えば簡単に出来ます。

#left a[href*="http"]:before {
content: url(../image/linkout.png);
}

#left a[href*="r-studio"]:before {
content: "";
}

これはこのblogのCSSの、外部リンクに画像を表示させるようにする部分をさらけ出したものです。

まず上の部分で、#left（左側記事部分）の"a要素"の中で"href属性"が"http属性値"をふくむ場合、前に画像を表示させるようにしています。
要するにこれは"<a href="http://～～"></a>"という形のリンクの前に画像を付けるということです。

このままではほとんど全てのリンクに画像が表示されてしまうので、下の部分で、#left（左側記事部分）の"a要素"の中で"href属性"が"r-studio属性値"をふくむ場合、前に何も表示されないようにしています。
このblogのURLには"r-studio"という文字列がふくまれています。つまり、"r-studio"という文字列があれば内部リンクだから、画像はいらないということです。
形としては、"<a href="http://r-studio.～～"></a>"というリンクの場合、ということです。

CSSを使えば、こういう小細工も出来るわけです。
IE6のCSS対応状況が悪いというのが難点ですが。