百式は、毎日ひとつずつ、海外のドットコムサイトを紹介する、というページなのだけど、
そのエントリの一番下に、そのサイトへのリンクが貼ってある。
パッと見、何の変哲もないリンクなのだけど、これが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関係をいじって
これ用の編集ボタンを、エントリ投稿ページに追加してあります。
非常に便利。