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

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

Posted at October 25,2006 12:17 AM
Tag:[Seesaa, Template]

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

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

1.センタリングされない原因

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

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

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

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

リスト1.2 フッタのCSS

#footer {
    text-align: center;
}

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

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

<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>

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

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

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

2.対処方法

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

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

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

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

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Seesaaブログ iPhone スタイルシート改造 1/3 from anarchy in the web
iPhoneフォント一覧 [続きを読む]

Tracked on April 8, 2010 12:21 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)