公開テンプレートの背景色をCSSで変更する
当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。
まずはサンプルをご覧ください。
変更前
変更後
以下、変更方法です。
１．固定レイアウト（3カラム／2カラム／1カラム）の場合
リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。
body.layout-three-column, body.layout-two-column-left, body.layout-two-column-right, body.layout-one-column { margin-bottom: 20px; text-align: center; background: #36414d; }- リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合
２．1カラムリキッドレイアウトの場合
リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。
body.layout-one-column-liquid { background: #36414d; }- リスト2.1 1カラムリキッドレイアウトの場合
３．変更例：背景色をグレーに変更
冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。
body.layout-three-column, body.layout-two-column-left, body.layout-two-column-right, body.layout-one-column { margin-bottom: 20px; text-align: center; background: #dddddd; }- リスト3.1 変更例
カラーの指定方法は、例えば下記にあります。
eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧
その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。
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でブロックレベル要素をセンタリングする」を参考にして修正してみてください。
