> >

t0moriさんバージョン

<_a href="http://ibj.s57.xrea.com/" title="iBJ - iBloggers in Japan"><img src="<$BlogBaseURL$>image/img41a4f7448c6f4.png" width="88" height="31" border="0" alt="iBJ - iBloggers in Japan" /></a>

KHOOさんバージョン

<_a href="http://ibj.s57.xrea.com/" title="iBJ - iBloggers in Japan"><img src="<$BlogBaseURL$>image/img41ac321a6e129.png" width="88" height="15" border="0" alt="iBJ - iBloggers in Japan" /></a>

青い部分(var 要素として書いてます)はバナー画像を各自が置いた場所の URL です。ブログのトップページの直下の image というフォルダーに置くのでしたら、iBlog では <$BlogBaseURL$> をこのように使うと便利です。

その他工夫と言うか配慮した点は以下のとおりです。忘れがちなものもあるので参考にしてください。

• img 要素の最後は /> で終えよう。

  iBlog だけでなく多くのブログで採用されている XHTML では img 要素や br 要素のように終了タグがないものは空要素といって「その場閉じ」をしなければなりません。そして「その場閉じ」をするために > の前に / を入れます。ドアと一緒で開けたら閉めるのです。

  / の前にスペースがあった方がよいとされています。恐らくその方が読み取るプログラムにとって間違いにくいのだろうと思います。

• img 要素には alt 属性を入れよう。

  alt 属性の値は、イメージが表示できないときに代わりに表示される文字列です。読み上げブラウザやテキストブラウザで使用されるだけでなく、セキュリティのために画像を表示しないようにしている人の普通のブラウザでも表示されます。また、何らかの原因でイメージファイルが壊れたりなくなってしまったときにも代わりに表示されます。XHTML や HTML 4.0 では img 要素に alt 属性は必須です。

• img 要素に width 属性と height 属性を入れよう。

  width や height の指定がないとブラウザは、その画像オリジナルの大きさで表示するわけですが、オリジナルの大きさはブラウザが画像を読み取らないとわかりません。したがって、ブラウザは画像を読み取るまでその画像を表示するための領域を確定できません。しかしここで width や height が指定してあると画像を読み取る前に予め表示領域が確定できます。ページ全体の描画が速くなります。

• href 属性を付けたリンク用の a 要素に title 属性を入れよう。

  画像やアイコンは一見分かりやすそうですが、それは見ている人がピンと来たときの話です。もしその人がピンと来ていなければリンクを辿るまでそのリンクが何なのかわかりません。しかし、リンクを辿る前に予め自分がどこに行くのか知っておきたいものです。

  また、a 要素の値に文字を使用している場合も、リンク先のページのタイトルを使用しているとは限りませんし、タイトルではなくリンク元との関係を示したいなど補助的な情報があった方がよい場合もあります。

  title 属性を使っておけば、最近の多くのブラウザでそのリンクの上にマウスポインタを持っていくとツールチップとして文字列を表示することができます。ちょっと親切です。

• img 要素に border 属性を値 0 で入れておこう。

  最近まで知らなかったのですが、これを入れなくても Safari では画像の周りにリンクを表す枠線が表示されないんですってね。

  逆に言うとそれ以外のブラウザ(で私がよく使うもの)は枠線が入っているんです。Safari でのみ確認していると気にならないでしょうが、よく枠線が入っていてかっこわるいバナーの貼り方をしているサイトを見かけます。

  img 要素に border 属性を付けて、その値を 0 にしておくとこの枠線は表示されません。