Top > CMS・ブログ > Seesaaブログテンプレート > 2006年10月
2006年10月31日

公開テンプレートの背景色をCSSで変更する

October 31,2006 12:59 AM
Tag:[, , ]
Permalink

当サイトで配布しているテンプレート(3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト)の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前
変更前

変更後
変更後

以下、変更方法です。

1.固定レイアウト(3カラム/2カラム/1カラム)の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト(3カラム/2カラム/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;
}

2.1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。1項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

3.変更例:背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.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;
}

カラーの指定方法は、例えば下記にあります。

eWebWeb配色の見本Webセーフカラー216色カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Comments [0] | Trackbacks [1]
2006年10月25日

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

October 25,2006 12:17 AM
Tag:[, ]
Permalink

公開中の 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でブロックレベル要素をセンタリングする」を参考にして修正してみてください。

Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3