まずは、百式をご覧いただきたい。

百式は、毎日ひとつずつ、海外のドットコムサイトを紹介する、というページなのだけど、
そのエントリの一番下に、そのサイトへのリンクが貼ってある。
パッと見、何の変哲もないリンクなのだけど、これがCSSで制御されている。
目鱗だったのでメモっておく。

どの部分が制御されているかというと、表題にもあるとおり
リンクの前に付けられた、矢印の付いたアイコン。
これは実は画像ではなくて、アンカーに設定された背景画像なのである。
通常、この手のアイコンを貼り付けるには、
実際に記述する部分でアイコンを画像として埋め込むのだけど、
もし、そのアイコンを変更したくなったら?
…当然だが、全てのエントリを書き換える必要がある。
MTであっても、テンプレ編集→全エントリ再構築ということに…
しかし、CSSで制御していれば、CSSファイルを書き換えるだけで対応できる。
小さなことだがこれは案外重要。

これを参考にして書いたこのサイトでのCSSは以下の通り。
アイコンを付けないリンクと区別するため、classを付与してある。

タグ部分
<a href="" target="_blank" class="OutLink">リンク</a>

CSS部分

a.OutLink {
padding-left:15px;
background:url(画像ファイル) left no-repeat;
}

これを実際に表示させたのがこれ。

リンク

なんとも不思議な感じだが、これで綺麗に見えているのだから良いのだ。
あ、言うまでもないけど、例えばリンクテキストが2行にまたがったり、
paddingの数値と画像ファイルの幅が上手く合っていなかったり、
行の高さより画像の高さが大きかったりすると、上手く表示できないのでご注意のほどを。

ちなみにうちのサイトでは、MTのJavaScript関係をいじって
これ用の編集ボタンを、エントリ投稿ページに追加してあります。
非常に便利。

  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories