お詫び

先日忍者がフッターを変更したのに合わせて、19件のテンプレートを修正しましたが、今日IEのバグがあるのに気がつきました。
このバグが見えるのは、WindowsのIE6とIE7をご使用の方だけです。

IE6かIE7でプレビューを見ると分かりますが、画像に文章を回り込む指定をすると、上から文章が表示されずに真ん中に一行だけ表示されます。
実はある作者さんの画像指定をまねしたのですが、この作者さんも気がついてないわけですね（＾＾；）
修正時にIE6とIE7での確認をサボったツケですが、こういうバグがあるとは知らなかった・・・（大汗）

問題のあるテンプレートをすでにダウンロードされた方にはご迷惑をおかけしますが、8月30日以降に修正したテンプレートを週末に全部修正して申請し直しますので、問題のテンプレートをご使用の方は、申し訳ありませんが来週初めに更新されるものを再度ダウンロードしなおしてくださいますようにお願いいたします。
なお、IE8ではこのバグは修正されているので、他のモダンブラウザと同じように正常に表示されます。

修正箇所自体はわずかなので、自分でできるという方は、下に修正箇所を書きますので、テンプレート編集ページから修正をお願いいたします。

問題箇所：CSSの上部にある画像指定部分

/* 画像 */
img, a img {
    margin: 2px;
    border: 0;
    vertical-align: middle;
}

まず、赤字の部分を削除してください。
次にCSSをスクロールして記事ブロックの下のほうを探します。

/*************************************************
  記事ブロック
*************************************************/

/* 拍手
------------------------------------------------*/
.NinjaClap img { vertical-align: middle; }

拍手の部分の指定に、上のオレンジ色の指定を付け加えてください。
たったこれだけですので、すでに問題が起きて困っておられる方は、この方法で修正をお願いいたします。

またぞろぞろとテンプレート検索ページトップを占めることになってしまい、新作を出された作者さんには申し訳ないです。すんません。

IE6とIE7の画像回り込みバグ

大抵の有名なIEのバグは勉強したつもりだったのに、知らないバグにぶち当たったのでメモしておくことにしました。
今回は、自分で失敗したバグのメモです。

画像の回り込みバグ（IE6とIE7)

画像にalign属性で
<img align="left" />　や　<img align="right" />
と指定すると、文字を画像の横に回り込ませることができます。
ところがIE6とIE7では、画像のCSSにvertical-alignが指定されていると、回り込みが無効になってしまいます。値はtopでもmiddleでもbottomでも同じで、画像横に上から表示されるはずの文章が、真ん中に一行だけしか表示されません。

IE8を含む他のモダンブラウザでは問題なく正常に表示されるし、ブログで画像の回り込み機能を使う人は少ないようなのでバグに気がつかないことが多いですが、IE6とIE7使用の読者から画像の回り込みがおかしく見えると報告があった場合は、使用しているテンプレートのCSS指定が原因である可能性が大です。

バグの回避

画像の基本指定に下記のような指定がないかどうか調べます。
この指定は、よくCSSの上部にあります。

img { vertical-align: middle; }　または
img { vertical-align: baseline; }　など

この指定を削除すると、画像の横に回りこむ文章は正常に表示されるようになります。
もしこの処理でテンプレートに使用されている画像や記事内の画像（たとえば拍手とか）がずれる場合は、その部分にだけvertical-align の指定をする必要があります。