nlog(n): 外部リンクにアイコンをつけるには

Mon August 21, 2006

外部リンクにアイコンをつけるには

自分のサイト外へのリンクにマークをつける。スタイルシートで実現が可能。

■ ■ ■

サイト外へのリンクだけにアイコンをつけたい。Movable Type 用のプラグインはないようだし，JavaScript なのだろうか? と思っていたら，何と CSS だけでできるらしい。知らなかった。もしかして当たり前?

CFDN | 外部リンクにアイコンを付けるさんで解説されていた。簡単でビックリ。

このサイトでは，外部リンク用のアイコンを external-link.gif という名前で用意して，スタイルシート用の MT テンプレートには次のように書いている。少々特殊ではある。

   .blogbody a[href^="http:"]:after,
   .blogbody a[href^="https:"]:after {
   content: url(/images/external-link.gif);
   vertical-align: middle;
   }

   .blogbody a[href^="<$MTBlogURL$>"]:after,
   .blogbody a[href^="<$MTAdminCGIPath$>"]:after {
   content: "";
   }

外部リンクのアイコンがサイドバーについてしまうとウザイので，blogbody 内だけに限定した。最初に，http: や https: で始まる全てのリンク(内部，外部とも)に対してリンクの後ろにイメージをつける。その後，自サイト内へのリンクはイメージを外すということになっている。なんかちょっと不思議。

イメージファイルを用意するのが面倒な場合は，「content: url(/images/external-link.gif);」の部分を「content: "[⇒]";」のように書いてもよい。この場合は「[⇒]」というテキストがくっつくことになる。

Movable Type 以外なら，「href^="<$MTBlogURL$>"」の MT タグの記述をやめて「href^="http://nlogn.ath.cx"」のように直接，自分のサイトの URL を書いてしまえばよい。

このサイトでは特に，編集リンクを https にしているので <$MTAdminCGIPath$> というタグを使っているが，一般的には不要な行である(nlog(n): AdminCGIPath プラグイン)。

画像を使わないタイプの汎用的コードは，次のようになるだろう。

   .blogbody a[href^="http:"]:after,
   .blogbody a[href^="https:"]:after {
   content: "[⇒]";
   }

   .blogbody a[href^="<$MTBlogURL$>"]:after {
   content: "";
   }

かなりスッキリした。「⇒」は「⇒」の文字実体参照である(HTML4 で使える文字実体参照)。後はお好みで。

さらにもう少し手を加えれば，閲覧済みのサイトへのアイコンの色を変えたりもできる(Max Design - Simple, accessible external links)。

スタイルシートで使われる「:after 擬似要素」については Selectors が詳しい。選択子「^=」は CSS3 から導入された「先頭からのマッチング」である (Selectors)。これについては選択子に詳しい解説がある。

Posted by n at 2006-08-21 22:23 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments