お詫び

先日忍者がフッターを変更したのに合わせて、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 の指定をする必要があります。

記事の上に来るプラグインのタイトルの表示方法

最近はアフェリエイトに励むブロガーが増えてきているようですね。
記事の上や下にプラグインがあると、幅広広告や幅広プラグインをつけたい人には好都合です。
広告でなくてもお知らせに使えるし、要らなくなればすぐに削除できる。
記事だと更新とともに下へずれていくけれど、プラグインならいつも一番上に表示しておけます。

新しいテンプレを作っている間にその気になり、広告対応テンプレを作ってみました。
もともとプラグイン5が記事の上に来ていたテンプレも、この機会に新システムに変更していきます。
要らなければ、そのプラグイングループを使わなければ表示されることはありませんから、これがあって迷惑する人はいないでしょう。

それでは説明に入ります。

プラグイン4
トップページとそれに続く記事一覧ページで、記事の上に表示されます。
プレビューにはなぜが表示されませんが、あの表示されているページがトップページではないからです。つまり、トップページだけに特別なデザインをしても、プレビューでは見られないということ。

プラグイン4はお知らせに使うとき用にタイトルが用意されていますが、デフォルテは広告用に非表示になっています。これを表示させたい場合は、テンプレート編集ページの右上にあるHTMLを直接変更することになりますが、ご心配なく。誰でも簡単に変更できるように、HTML内に説明書きがあります。

HTMLを少しスクロールすると、下記のところが出てきます。
オレンジで囲まれたところにある、style="display:none;" を削除すればタイトルが現れ、コピペでまた貼り付けるとタイトルはまた消えてなくなります。
とっても簡単ですから、タイトルを表示させたい方は試してみてください。

広告はトップページと記事一覧ページのみの表示ですが、全ページに表示させたい場合、ピンク色の<!--if_page-->と<!--/if_page-->を削除すれば、すべてのページで表示されます。
が、カテゴリーやアーカイブなど各検索ページにプラグインを表示させたくない場合は、緑色の<!--if_entry-->と<!--/if_entry-->をピンク色に付け加えれば、検索ページでは非表示となります。

<!--　==========▼▼ プラグイン　4　========== -->
        <!--if_page--><!--if_entry-->
        <!--plugin4-->
        <div class="Plugin4InnerBlock">
        
<!-- ▽▽▽ プラグインタイトルの表示方法　
style="display:none;"を削除してください ▽▽▽ -->
          <h3 class="Plugin4Title <!--$plugin_title_align-->" style="display:none;"><!--$plugin_title--></h3>          
<!-- △△△ --------------------------------------- △△△ -->
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
          </div>
          <div class="Plugin4Contents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="Plugin4Explanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
          </div>
        </div>
        <!--/plugin4-->
        <!--/if_entry--><!--/if_page-->
<!--　==========▲▲ プラグイン　4　エンド　========== -->

プラグイン5
こちらは個別記事ページ（詳細記事ページ）だけに表示されます。
トップページに広告があっても、検索で来る訪問者が見るのはこの詳細記事ページだけです。
また、プラグイン4をお知らせ等広告以外に使う場合も考えて、プラグイン5を記事ページに設置。
こちらは記事の下、コメントとの間に表示されます。

テンプレートによってはここにランキングバナーを貼り付けて使えるものもありますが、デザイン上の問題が出る場合が多いと思うので、ランキングバナーはできれば記事の中にあるバナー設置箇所に貼り付けてください。

次は「Cafe」と「colors」を修正

先に修正したテンプレートに続いて、気になっていた「cafe mélange」と「colors」を修正しました。
もともとプラグイン5が記事の上に来る仕様でしたが、今回の修正でプラグイン4を記事上部に、プラグイン5を記事の下にもって来ました。

まずプラグイン5ですが、詳細記事ページの記事ブロックとコメントフォームの間に表示されます。
これはタイトルなしで、広告や幅広プラグインだけを対象にしています。
ランキングバナーなどはここに入れるとデザイン的におかしくなるので、HTMLの所定の場所に貼り付けてください。

プラグイン4はどこにも表示されていませんが、これはプレビューがトップページではないからです。
更新されたテンプレートを実際に使うと、トップページとそれに続く記事一覧ページで、記事の上に表示されます。
こちらはHTMLでタイトルを非表示にしています。
「お知らせ」などのタイトルをつけたい場合は、HTMLの「プラグイン4ブロック」の中に表示の仕方が書いてありますので、それに従ってください。

詳しくはテンプレート集のテンプレート詳細記事に書き込みますが、修正が終わったばかりでぐったりなので、ちょいと一休みさせてください。

それと、拍手がどういう風に見えるかよく分かるように、拍手も設置しました。
ランキングバナーはHTMLに一度貼り付けるだけで、全記事の下に表示されます。
どんな方にでもできるように、分かりやすくHTMLのなかに書いてありますので、ランキングに参加されている方は利用してみてください。

フッターが修正されました

忍者がブログのフッターを変えましたね。
フッターに来る広告は２つありますが、その２つに入っていた広告の内容が変更されたのに気がついた人はいないかもしれません。

しかし、私のテンプレートを見れば一目瞭然。
忍者側の広告を利用して「powered by 忍者ブログ」と書いていたものだから、内容の変更とともに変てこになってしまいました（ため息）
ここのフッターはまだそのままにしているので、どんなに変てこになったかは下を見てみてください。
修正しました。

拍手に対応するためにテンプレートの半分をすで修正したところですが、こんなに変てこになったフッターを放置しておくわけにもいかないので、この間修正した分をもう一度修正しました。
修正のついでに、左に寄せていた「ミニ猫だらけ」を中央に持ってきました。
中央寄りのほうが、やはり万人向けでしょうね。

一気に17件もの修正で、最近テンプレートを出された作者さんには申し訳ありませんが、不可抗力だということでお許しいただけると幸いです。

残りのテンプレートも修正しますが、まだ暑いし、秋や冬のテンプレートは需要がないだろうということで、他のテンプレートは時期が来たら順次修正版を出していきます。


それとは別に、現在新テンプレートを製作中です。
こちらは来週か再来週に申請できるかも。