小粋空間  -  a cheap joke and a play on words site

Seesaa ブログでフッタバナーがセンタリングされない不具合を修正

公開中の Seesaa ブログテンプレートついて、「フッタにセンタリング表示している Seesaa ブログのバナーを Firefox 等の Mozilla 系ブラウザで閲覧するとセンタリングされない」という問題がみつかったため、修正致しました。

また Seesaa ブログで提供されているテンプレートについても同様の事象が発生しているようです（サンプル表示で確認した限り）ので、原因と対処方法を紹介します。

１．センタリングされない原因

公開テンプレートに設定されたフッタ（青色）はリスト1.1のようになっています。他のテンプレートも同様の設定のものが多いようです。

<div id="footer">
<% content_footer -%>
</div>

リスト1.1　Seesaa ブログのフッタ（テンプレート）

またそれに対応する CSS はリスト1.2のようになっています。

#footer {
    text-align: center;
}

リスト1.2　フッタのCSS

これで正常にセンタリングされるように思われますが、リスト1のテンプレートから再構築によって生成された HTML は、リスト1.3の青色の内容に変換されます。

<div id="footer">
<div class="powered">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://seesaa.jp"><img src="http://blog.seesaa.jp/img/seesaablog.gif" width="138" height="22" border="0" alt="Powered by Seesaa" /></a></td>
</tr>
<tr>
<td><div style="background-color:#9C9C9C;text-align:center;font-size:10px;padding:3px;margin:0px;"><a href="http://seesaa.jp" style="color:#FFF;">Seesaa</a><a href="http://blog.seesaa.jp" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>

リスト1.3　Seesaa ブログのフッタ（HTMLに展開後）

ご覧の通り、Seesaa ブログのバナーが table 要素（つまりブロックレベル要素）で括られます。

table 要素をセンタリングするためには、昨日エントリーした「CSSでブロックレベル要素をセンタリングする」の設定が必要ですが、リスト1.2 の設定しか行われていないとセンタリングされないという不具合が発生します。

公開テンプレートについては「バナーはインライン要素で表示」と思い込んでいたこと、また Firefox / Opera での表示の確認がきちんとできておりませんでした（IE6ではテンプレートは「後方互換モード」と認識されるため本問題が顕在化しません）。申し訳ございません。

２．対処方法

スタイルシートにリスト2.1のセレクタを追加してください

.powered {
    margin-left: auto;
    margin-right: auto;
    width:138px;
}

リスト2.1　スタイルシートに追加するセレクタ

当サイトの Seesaa ブログテンプレートをお使いの場合は、下記に該当する方が対象です。ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

• 2006.10.21 以前にテンプレートを利用
• テンプレートのフッタバナー部分を修正していない

他のテンプレートをご利用の方も同様の修正を行いますが、

• リスト1.1 のマークアップになっていること
• リスト1.2 の CSS が設定されていること

が前提です。該当しない場合は「CSSでブロックレベル要素をセンタリングする」を参考にして修正してみてください。