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

ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。

動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。

動作確認は以下のサンプルをご利用ください。

サンプル

１．ウィンドウの高さに合わせて画像を拡大・縮小する

ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  height: 20%;
}
#box img {
  height: 100%;
}

img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。

２．ウィンドウの幅に合わせて画像を拡大・縮小する

ウィンドウの幅にあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  width: 20%;
}
#box img {
  width: 100%;
}

img要素を括ったdiv要素にwidthプロパティを設定し、画像の幅を%で指定します。また、img要素に「width:100%」を設定します。

３．画像の拡大・縮小サイズを制限する

ウィンドウの高さにあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-heightプロパティ、min-heightプロパティを設定します。

#box {
  height: 20%;
  max-height: 256px;
  min-height: 10px;
}

ウィンドウの幅にあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-widthプロパティ、min-widthプロパティを設定します。

#box {
  width: 20%;
  max-width: 256px;
  min-width: 10px;
}

以上です。このテクニックはFirefoxのホームページを参考にしています。

昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS（とHTML）で実装できるようになります。

ということで、3D画像のサンプルを新旧織り交ぜていくつか紹介します。いずれもhacks.mozilla.orgに掲載されているもので、Google Chrome/Safari/Firefox10以上であれば正常に動作すると思います。

１．Fun with 3D rollovers

「Fun with 3D rollovers」は、MDNのロゴにマウスをポイントすると、MDNのロゴとその裏に隠れているHTML5のロゴが回転します。

Fun with 3D rollovers

２．3D CSS Tester

「3D CSS Tester」はCSSのパラメータを変更できるようになっており、変更することでリアルタイムに動作が変わります。

3D CSS Tester

上記のブラウザを使っていない方は以下のYouTubeでお楽しみください。

３．3D HTML5 LOGO

「3D HTML5 LOGO」は回転するHTML5のロゴと、そのパラメータを変更できるようになっています。

3D HTML5 LOGO

４．Poster Circle

「Poster Circle」は円錐状の3つのリングが回転しながら全体が回るサンプルです。

Poster Circle

５．Browser Memory

「Browser Memory」はいわゆる神経衰弱ゲームになっていて、HTML5のロゴを2枚クリックして、同じマークのブラウザロゴを当てていきます。ロゴが一致しなかったら自動的に元に戻ります。

Browser Memory

ということでお楽しみください。

あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。

例えばWordPressでjqueryを読み込んだときなど、

<script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>

と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。

知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。

１．キャッシュを制御する

ページ読み込みと同時に読み込まれるCSSやJavaScriptの内容はブラウザキャッシュに読み込まれ、ページを強制リロードしない限りブラウザキャッシュの内容が適用されるようです（詳細は４項参照）。

ですが、CSSファイルやJavaScriptファイルを更新してもキャッシュの内容が適用され続けるのは困るので、クエリー文字列を使って制御します。

具体的には、クエリーのバージョン番号やタイムスタンプを更新すると、ブラウザはそのクエリーつきのURLを「まだ取得していないファイルだ」と認識して、キャッシュから読み込まずに、サーバのファイルを取得します。

この手法はCSSファイルやJavaScriptファイル以外でも使えます。

２．クエリーが変更されないとキャッシュを使う理由

そういうものかと思ってこの技をなんとなく使っている訳ですが、ふと、HTTPの仕様として「クエリーが変更されないとキャッシュを利用する」ということがどこかに規定されているのではないかと思いました。

調べてみたところ、RFC2616の「13 Caching in HTTP」の「13.9 Side Effects of GET and HEAD」にそれらしき記述があるなので日本語訳から引用し、該当すると思われる箇所を赤字で示します。

ハイパーテキスト転送プロトコル -- HTTP/1.1 - 13.9 GET や HEAD の副作用

オリジンサーバがそれらのレスポンスのキャッシングを明示的に禁止していない場合に、あらゆるリソースへ GET や HEAD メソッドを適用する事によってそれらのレスポンスがキャッシュから取り出されたならば、誤った動作を導くような副作用を抱えるべきではない。それらは副作用を抱えるかもしれないが、キャッシュはそのキャッシング決定においてそのような副作用を考慮必要は無い。キャッシュは常にキャッシングにおいてオリジンサーバの明示的な制限を観察する事が期待される。
この規則の一つの例外について記す。アプリケーションの中には伝統的に重要な副作用を抱えた操作を実行するためにクエリ URL (それらは rel_path 部分に "?" を含んでいる) を伴う GET や HEAD を使用しているものがあるので、キャッシュはサーバが明示的有効期限を与えていなければそのようなURI へのレスポンスを新鮮であるように扱ってはならない。これは、そのような URI に対する HTTP/1.0 サーバからのレスポンスはキャッシュから取り出されるべきではない という事を特に意味している。関連する情報については section 9.1.1 参照。

「この部分ではない」ということであれば記事を修正しますので、ご指摘ください。

３．jQueryでキャッシュをクリアする

話がまったく横道にそれますが、キャッシュつながりということで、jQueryのAjaxで読み込むファイルのキャッシュをクリアする方法も掲載しておきます。

キャッシュをクリアするには、cacheプロパティを利用します。

$.ajax({
    url: 'http://user-domain/',
    type: 'GET',
    cache: false,
    success: function (data) {
        //
    }
});

ajaxSetupでも設定可能です。

$.ajaxSetup({
    cache: false
});
$('#foo').load('http://user-domain/');

４．実験結果

本当にブラウザキャッシュが使われているのかどうか、FirefoxのLive HTTP Headersを使って、当ブログのトップページのHTTPヘッダを確認してみました。

初回に読み込まれるCSSやJavaScriptは「200 OK」で返却されます。

2回目以降のアクセス（ロケーションバーにカーソルをあててリターン）ではリクエスト自体が送信されておらず、ブラウザキャッシュが利用されているものと考えます。

リロードボタンを押すとサーバにリクエストが送信されますが、サーバは「304 Not Modified」を返却（＝ブラウザキャッシュを利用）します。

強制リロード（Shift+リロードボタンまたはCtrl+F5）では、サーバから「200 OK」が返却されます。

また、本題であるクエリーを変更した直後も「200 OK」が返却されました。

クラスセレクタをくっつけて並べることで、特定の要素のスタイルを設定できる方法があまり知られていないようなので、エントリーしておきます。

通常は、次のようにクラスセレクタを半角スペースで区切って設定すると思います（サンプルの良し悪しはおいといて）。

CSS

.foo .bar {
    color: red;
}

HTML

<p class="foo">
  <span class="bar">あいうえお</span>
</p>
<p class="foo bar">
  <span>かきくけこ</span>
</p>

実行結果

ところが、クラスセレクタを詰めて記述すれば、指定したセレクタに対応するclass属性値がすべて設定された要素を指定できます。

CSS

.foo.bar {
    color: blue;
}

HTML（前と同じ）

<p class="foo">
  <span class="bar">あいうえお</span>
</p>
<p class="foo bar">
  <span>かきくけこ</span>
</p>

実行結果

このことは、CSS2.1 Specificationの「5.8.3 Class selectors」で次のように書かれています。

CSS 2.1 Specification - 5.8.3 Class selectors

For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

p.marine.pastoral { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

2011.06.18 追記：タイミング的に、以下の文章はこの記事を参考にして頂いた気がします。ありがとうございます。

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ - こんな指定方法も … クラス同時指定

pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。

１．CSS

以下のCSSでpre要素の文字が折り返せます。「white-space: pre-wrap」または「word-wrap: break-word」に未対応のブラウザはoverflowプロパティでスクロールします。

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

以下は、過去の記事でよくみかけた設定です。

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

「-moz-pre-wrap」はFirefox（Mozilla）のためのものですが、すでに削除されたようです（関連記事）。「-pre-wrap」「-o-pre-wrap」は過去バージョンのOpera用ですが、現バージョンのOperaは「white-space: pre-wrap」「word-wrap: break-word」に対応しています。

２．サンプル

適用前

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
    <input type="hidden" name="static" value="1" />
    <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
    <div id="comments-open-data">
        <div id="comment-form-name">
            <label for="comment-author">名前</label>
            <input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
        <div id="comment-form-email">
            <label for="comment-email">電子メール</label>
            <input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
    </div>
    <div id="comments-open-text">
        <label for="comment-text">コメント
        <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
        <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
    </div>
    <div id="comments-open-footer">
        <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="プレビュー" onclick="this.form.preview.value='1';" />
        <input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
    </div>
</form>

適用後　※適用されないブラウザではスクロール表示されます

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
    <input type="hidden" name="static" value="1" />
    <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
    <div id="comments-open-data">
        <div id="comment-form-name">
            <label for="comment-author">名前</label>
            <input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
        <div id="comment-form-email">
            <label for="comment-email">電子メール</label>
            <input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
    </div>
    <div id="comments-open-text">
        <label for="comment-text">コメント
        <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
        <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
    </div>
    <div id="comments-open-footer">
        <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="プレビュー" onclick="this.form.preview.value='1';" />
        <input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
    </div>
</form>

３．ブラウザ別の動作確認結果

ざっと確認したところ、プロパティの効果は次のようになりました（○：有効／×：無効）。

４．参考サイト

参考サイトは以下です。ありがとうございました。

• [ CSS ] pre でも改行を生かしたまま折り返す
• preタグ内のコードをボックス枠内で折り返すcss

Google Chromeでfloatレイアウトが崩れる事象が発生しました。

かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。

１．サンプル

サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。

(X)HTML（赤色が対象部分）

<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
</body>
</html>

CSS（すべて対象）

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
dl {
    margin: 10px;
}
dt {
    float: left;
    width: 120px;
    padding: 5px 5px 5px 0;
    text-align: right;
}
dd {
    padding: 5px 0 5px 8px;
}
input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

このサンプルは、Firefox 3.6.13では次のように期待通り表示されます。

２．問題点

冒頭の画像と同じですが、Google Chrome（9.0.597.107）では次のようにレイアウトが崩れます。

form要素にfieldset要素を挿入しても事象は変わりません。

３．事象の詳細

レイアウト崩れは、以下の条件を満たしたときに発生することを確認しています。

1. 文字エンコーディングがEUC-JP
2. 全称セレクタにmargin/padding/font-familyを設定
3. dt要素セレクタにpaddingを設定（topまたはbottomに0以外を同時に指定）
4. input要素セレクタにfont-family、値に「ＭＳ Ｐゴシック」を設定

例えば次の条件であればこの事象は発生しません。

• 文字エンコーディングがUTF-8である場合
• 全称セレクタにあるmargin/padding/font-familyのいずれかひとつでも欠けている場合
• dt要素セレクタのpadding-topまたはpadding-bottomのいずれかが0を設定、または設定されていない場合

４．対処

３項の1～4の条件をひとつでもはずせば問題は解消します。３項の条件を満たす必要がある場合でも、dd要素にいわゆるclearfixを設定すれば問題は解消されるようです。

(X)HTML

…前略…
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd class="clearfix"><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd class="clearfix"><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd class="clearfix"><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd class="clearfix"><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
…後略…

CSS

…前略…
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Google Chromeでの解消後の表示は次のようになります。

ちなみに、この事象が発生したのは文字エンコーディングがEUCのFC2ブログです。本問題について認識誤り（clearfixはそもそも必要など）等ありましたらご指摘頂ければ幸いです。

先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキュメントモード」が用意されています。これを利用すれば、IEの旧バージョンの表示や挙動などを確認できるようです。

ブラウザーモードの選択

ドキュメントモードの選択

が、公式サイトの「ブラウザーモード」と「ドキュメントモード」の説明（７項に掲載）を読んでも、それぞれの使い方が良く分かりません。

ということで、本エントリーで「ブラウザーモード」と「ドキュメントモード」を変更することで、なにがどうなるかを調査してまとめました。参考になれば幸いです。

１．サンプル

説明は後回しにして、「ブラウザーモード」と「ドキュメントモード」を変更すると何がどのように変わるか、簡単なサンプルを作ってみました。

サンプルページ

このページをIE8またはIE9で表示して「ブラウザーモード」と「ドキュメントモード」を切り替えれば、表示が色々変わるので試してみてください。

２．ユーザーエージェントを変更したい場合

ブラウザのユーザーエージェントを変更したい場合は、ブラウザモードを切り替えます。互換モードでもユーザーエージェントが変わります。サンプルでは次のJavaScriptでユーザーエージェントを表示しています。

<script type="text/javascript">
/* <![CDATA[ */
document.write(navigator.userAgent);
/* ]]> */
</script>

３．条件付きコメントの動作を確認したい場合

IEの条件付きコメントの動作を確認したい場合は、ブラウザモードを切り替えます。サンプルでは次のような条件付きコメントを設定しています。

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-style.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-style.css" />
<![endif]-->

４．CSSハックを確認したい場合

IE用のCSSハックの動作を確認したい場合は、ドキュメントモードを切り替えます。サンプルではバージョン別に表示が切り替わるように次のようなCSSハックを定義しています。

body {
    color: #0f0\9;
    *color: #f00;
    _color: pink;
}
body:not(:target) {
    color: #00f\9;
}

IE6/IE7/IE8/IE9のCSSハックについては以下の記事をご覧ください。

IE6/IE7/IE8/IE9のCSSハック

５．IEのCSSバグやバグフィックスによる表示を確認したい場合

IEのCSSバグによる表示を確認したい場合は、ドキュメントモードを切り替えます。サンプルではボックスモデルを使って表示が切り替わるようにしています。

６．IEのCSSサポート状況を確認したい場合

IEのバージョンの違いによるCSSサポート状況を確認したい場合も、ドキュメントモードを切り替えます。サンプルでは、IE8で追加された:beforeおよび:afterとcontentプロパティ、およびIE9で追加されたborder-radiusプロパティを使って表示が切り替わるようにしています。

７．公式ドキュメント

最後に、マイクロソフトの「Internet Explorer 8 開発者ツール マニュアル（Word形式）」からの抜粋です。

異なる動作モードでの Web ページのテスト

開発者ツールは異なる動作モードで Web ページのテストを行うことができるため、ユーザーが互換性の問題に直面する前に、それを速やかに解決することができます。最初に開発者ツールを開いた時は、Web ページのモード設定を検出し、そのページの既定のモードで処理を行います。その状態からブラウザー モード メニューとドキュメント モード メニューを使用して Web ページのテストを行うことができます。

ブラウザー モードのテスト

ブラウザー モードのメニューでは、ブラウザーが次の三つのプロパティをどのように返すかを選択できます。

開発者ツールのメニュー バーには、ブラウザー モードとして、上記の表で解説したプロパティをそれぞれ異なった状態に変更する、三つの選択肢が提供されます。次の表はこの選択肢について説明しています。

ドキュメント モードのテスト

Defining Document Compatibility で取り上げた通り、ブラウザーがどのように Web ページを解釈し表示するのかを制御するドキュメント互換性の概念が、Internet Explorer 8 に導入されています。開発者ツールでは、Web ページの表示のための互換モードを動的に選択することが可能です。それぞれの互換モード間の視覚上の差異を簡単に見ることができ、最も適切な互換モードを見つけることができます。

特定の Web ページのドキュメント互換性を変更するには、開発者ツール メニューのドキュメント モードをクリックします。このモードは、Internet Explorerがどのように Web ページを描画するかを決定しますが、バージョン ベクターやユーザー エージェント文字列には影響を与えません。ブラウザー モードとこのオプションを使用すると、どのドキュメント モードがあなたの Web サイトに最適かを速やかに決定できます。ドキュメント モードには三つの選択肢があります。

IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。

１．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック

以下の順番でプロパティおよびセレクタを記述してください。

body {
    color: red; /* all browsers, of course */
    color: green¥9; /* IE8 and below */
    *color: yellow; /* IE7 and below */
    _color: orange; /* IE6 */
}
body:not(:target) {
    color: black¥9; /* IE9 */
}

• IE6：値の先頭にアンダースコア「_」を付与
• IE7：値の先頭にアスタリスク「*」を付与
• IE8：値の末尾に「¥9」を付与
• IE9：セレクタの末尾に「:not(:target)」を付与＋値の末尾に「¥9」を付与

ある作業で必要に迫られて集めたもので、CSSハックを推奨する記事ではありません。

２．参考サイト

参考サイトは下記です。ありがとうございました。

• edelweiss - Internet Explorer (IE) 9 プレビュー版でCSSハックをいろいろ試してみた。
• Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters

当ブログでの配布テンプレートのカラムレイアウトサイズを簡単に変更するためのツール「ColumnResizer」をリニューアルしました。このツールは3年ほど前に公開していたものです。タイトルのWeb2.0風のロゴも懐かしい感じです。

ツールの上半分に表示されている操作パネルからカラムレイアウトを選択し、表示されたスライドバーを操作すると、下半分に表示されているブログのカラムレイアウトをダイナミックに変更するというものです。利用方法の詳細は下半分のブログ本文に記載しています。

リニューアルのきっかけは、8月に行ったサーバ移転で、トップページに表示しているColumnResizerのリンク切れになったのを発見し、リンクを直したときにツールの動作もあわせて確認し、「（手前味噌ですが）意外によくできていたなぁ」と感心したためです。

スライドバーの部分は、以前のままWebFX：Slider（参考記事）を使っています。

リニューアルによる主な修正箇所は次の通りです。

• フォントサイズの変更
• フッタの追加
• prototype.js→jQueryへの変更

Firebugなどを利用すれば、カラムサイズの変更はそれほど難しくない時代になったのですが、こういったツールもまだまだ捨てたものではないと思います。

ということで、当ブログのテンプレートをご利用の方、お試しください。

ドロップシャドウつきの画像をセンタリングする方法を紹介します。

以前紹介した、「CSSで画像に影をつける（ドロップシャドウ）」では、画像のセンタリングを行うことはできません。

本エントリーの設定を行うことで、次のようにセンタリングすることができます。確認ブラウザは Windows XP+ Firefox3.5/IE6/IE7/Opera10/Safari4 です。

１．基本

「CSSで画像に影をつける（ドロップシャドウ）」のマークアップに加え、さらに青色の div 要素を追加します。

<div class="image" style="width:300px">
  <span class="shadow">
    <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
  </span>
</div>

マークアップのキモは、追加した div 要素に、画像と同じ幅の width プロパティを設定することです。

そして、以下のセレクタを追加します（セレクタ名は相応しい名称に適宜変更してください）。

.image {
    margin: 0 auto;
}

２．IE6 以外に対応させる場合

１項の設定ではIE6に対応しません。IE6にも対応させる場合は、１項のマークアップをさらに div 要素で括ります。

<div class="image-ie6">
  <div class="image" style="width:300px">
    <span class="shadow">
      <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
    </span>
  </div>
</div>

そして、以下のセレクタを追加します（セレクタ名は相応しい名称に適宜変更してください）。

.image-ie6 {
    text-align: center;
}

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。

サンプル（クリックすればサンプルページに移動します）

Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。

ポイントは以下です。

• th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。
• 斜線（border）を適用する要素の前に &nbsp; を設定。&nbsp; がなかったり、要素の後方に&nbsp; があると、th のスタイルが隠れてしまう。
• クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。

HTML

<table summary="data">
  <thead>
    <tr><th>&nbsp;<span class="arrow"></span></th><th class="column">a</th><th class="column">b</th><th class="column">c</th></tr>
  </thead>
  <tbody>
    <tr><th class="record">x</th><td>1</td><td>2</td><td>3</td></tr>
    <tr><th class="record">y</th><td>4</td><td>5</td><td>6</td></tr>
    <tr><th class="record">z</th><td>7</td><td>8</td><td>9</td></tr>
  </tbody>
</table>

CSS

* {
    margin: 0;
    padding: 0;
    font-family:Verdana,Arial,sans-serif;
}
table {
    font-size:16px;
    margin: 30px 0 0 30px;
    border: 1px solid #ccc;
    border-spacing: 1px;
    line-height: 2;
}
th {
    width: 50px;
    color: #444;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
td {
    padding: 2px 5px;
    text-align: center;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.column {
    background-color: #ccffcc;
}
.record {
    background-color: #ffcccc;
}
.arrow {
   width: 0;
   height: 0;
   line-height: 0;
   border-top: 32px solid #ccffcc;
   border-left: 50px solid #ffcccc;
   border-right: none; 
   position: absolute;
 
   /* ie6 */
   top: 0px;
   left: 0px;
}
html>body .arrow {
   top: 32px;
   left: 32px;
}
*:first-child+html .arrow { /* ie7 */
   top: 0;
   left: 0;
}

以前、border プロパティを使ってふきだしを表現する方法が紹介されていましたが、ふきだしの三角形以外に使い道がないかと思ったのがきっかけです。

rynote - 知らなかった...CSSのborderで斜めに線を引く方法

なお、サンプルでは span 要素の内容に何も入ってないので valid な XHTML ではありません。Another HTML-lint gateway では減点されます。あしからず。

2009.10.27
はてぶで指摘がありましたので最後の一文を修正しました。ご指摘ありがとうございます。

当サイトでは、ソースコード等を pre 要素（+code 要素）で表示していますが、「1行だけのソースコードを表示している場合、IE7では適正に表示されません」というご指摘をいただきましたので修正致しました。

１．問題点

pre 要素で1行だけのソースコードを表示していると、IE7 では次のような表示になります。

IE7

２．原因

そもそも、IE6 以外のモダンブラウザで、「overflow: scroll;」指定を行なうと、下に冗長な空白が表示されます。これを避けるために、IE6 以外のモダンブラウザに対し、CSS ハックを利用して「overflow: auto;」を設定しているのですが、IE7 に「overflow: auto;」を適用されると、１項の問題が発生します。

pre {
    overflow: scroll;
}
html > body pre {
    overflow: auto;
}

３．対策

IE7 の CSS ハックを利用して、IE7 のみ「overflow: scroll;」でさらに上書きします（青色部分）。

pre {
    overflow: scroll;
}
html > body pre {
    overflow: auto;
}
*:first-child+html pre {
    overflow: scroll;
}

とりあえず現在は上記の設定にしています。以下、各ブラウザでの表示を確認しました。

IE6

IE7

Firefox

Opera

Safari

Google Chrome

より良い方法があればご教示ください。

４．参考サイト

下記です。ありがとうございました。

サラリーマン白書 - IE7をインストールしてみた

YUI（Yahoo! User Interface Library）を利用した、ドロップダウン式グローバルナビゲーションを紹介します。

ドロップダウンの部分は Movable Type のサブカテゴリーを自動的に出力するようにしています。

このエントリーでは、当サイトの配布テンプレートにあわせたデザインに修正していますが、元のサンプル（下）はより洗練されたデザインですので、そのまま使う方がいいかもしれません。

１．The Yahoo! User Interface Library (YUI) のダウンロード

「The Yahoo! User Interface Library (YUI)」の Download YUI をクリック

ダウンロードが開始されるので、yui_2.6.0.zip（2008年11月現在のバージョン）を任意のフォルダに保存してしてください。今回使用した元のサンプルは「Website Top Nav With Submenus Built From Markup」です。「Website Top Nav Using Animation With Submenus Built From Markup」を使用すればアニメーション表示することができます。

２．YUI ライブラリのアップロード

ダウンロードアーカイブ yui_2.6.0.zip を展開して、中にある build フォルダを丸ごとブログディレクトリにアップロードしてください。
ちなみにデフォルトのデザインで最低限使用するのは、build フォルダにある以下のフォルダのようです。

build/assets
build/container
build/menu
build/yahoo-dom-event

アニメーション動作をする場合は build/animation なども必要ですのでサンプルのソースコードを確認してください。

ダウンロードしたファイルの中に examples フォルダがあるので、その中のファイルで動作を確認することもできます。

３．マークアップ例

Menu 用のマークアップは次の通りです。id 属性、class 属性はそれぞれ必須です。

<div id="navi">
  <div class="bd">
    <ul>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1</a>
        <div class="yuimenu yuimenubarnav">
          <div class="bd">
            <ul>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-1</a></li>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-2</a></li>
              <li class="yuimenuitem menu_end"><a class="yuimenubaritemlabel" href="...">Cat 1-3</a>
                <div class="yuimenu yuimenubarnav">
                  <div class="bd">
                    <ul>
                      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-3-1</a></li>
                      <li class="yuimenuitem menu_end"><a class="yuimenubaritemlabel" href="...">Cat 1-3-2</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 2</a>
        <div class="yuimenu yuimenubarnav">
          <div class="bd">
            <ul>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">お知らせ</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="javascript:void()">Cat 3</a></li>
    </ul>
  </div>
</div>

４．Movable Type で利用する場合のテンプレート設定

当サイトで配布している Movable Type テンプレートへの適用例（冒頭の画面）です。ドロップダウンメニューをテンプレートタグで自動生成します。

ブログ管理画面の「デザイン」→「テンプレート」で「ヘッダー」テンプレートモジュール編集画面を開き、グローバルナビゲーションのマークアップ（青色）を追加します。

...前略...
<link rel="stylesheet" type="text/css" href="<mt:blogURL />build/menu/assets/skins/sam/menu.css"> 
<script type="text/javascript" src="<mt:blogURL />build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<mt:blogURL />build/container/container_core.js"></script>
<script type="text/javascript" src="<mt:blogURL />build/menu/menu.js"></script>
<script type="text/javascript">
    YAHOO.util.Event.onContentReady("navi", function () {
        var oMenuBar = new YAHOO.widget.MenuBar("navi", { 
                                                autosubmenudisplay: true, 
                                                hidedelay: 750, 
                                                lazyload: true });
        oMenuBar.render();
    });
</script>
 
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
<div id="box" class="clearfix">
 
<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>
 
<mt:ifArchiveTypeEnabled archive_type="Category">
<div id="navi" class="widget-content">
    <mt:topLevelCategories>
        <mt:subCatIsFirst>
            <mt:hasParentCategory>
        <div class="yuimenu">
            </mt:hasParentCategory>
            <div class="bd">
                <ul>
            <mt:unless name="start_flag">
                    <li><a href="<mt:blogURL />" title="Home">Top</a></li>
                    <li><a href="<mt:blogURL />about.html" title="about">About</a></li>
                <mt:setVar name="start_flag" value="1" />
            </mt:unless>
        </mt:subCatIsFirst>
        <mt:if tag="CategoryCount">
                    <li class="yuimenuitem<mt:subCatIsLast> menu_end</mt:subCatIsLast>"><a class="yuimenubaritemlabel" href="<$mt:categoryArchiveLink$>"<mt:if tag="CategoryDescription"> title="<mt:categoryDescription remove_html="1" encode_html="1" />"</mt:If>><mt:categoryLabel /></a>
        <mt:else>
                    <li class="yuimenuitem<mt:subCatIsLast> menu_end</mt:subCatIsLast>"><a class="yuimenubaritemlabel" href="javascript:void()"<mt:if tag="CategoryDescription"> title="<mt:categoryDescription remove_html="1" encode_html="1" />"</mt:if>><mt:categoryLabel /></a>
        </mt:if>
        <mt:subCatsRecurse />
                    </li>
        <mt:subCatIsLast>
               </ul>
           </div>
           <mt:hasParentCategory>
        </div>
           </mt:hasParentCategory>
        </mt:subCatIsLast>
    </mt:topLevelCategories>
</div>
</mt:ifArchiveTypeEnabled>

赤色で示した部分は Menu のマークアップに対する id 属性値です。id 属性値を変更する場合はこの部分が全て同じ値になるようしてください。

JavaScript の MenuBar のパラメータの意味は次の通りです。

autosubmenudisplay

true：マウスオーバーでドロップダウンを表示

false：クリックしてドロップダウンを表示

hidedelay

マウスアウト後に非表示にするタイミング

また、サブテンプレート内にある

            <mt:unless name="start_flag">
                    <li><a href="<mt:blogURL />" title="Home">Top</a></li>
                    <li><a href="<mt:blogURL />about.html" title="about">About</a></li>
                <mt:setVar name="start_flag" value="1" />
            </mt:unless>

は、カテゴリー以外のメニューを表示する場合に適宜利用してください。

５．Movable Type で利用する場合のCSS設定

４項の設定を行った後、スタイルシートに下記の内容を設定してください。

#navi {
    border-bottom: 1px solid #669;
    background: #fff;
    height: 25px;
}
html > body #navi,
html > body #navi ul li a { /* for Safari */
    height: 28px;
}
#navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi ul li {
    border-right:1px solid #333;
    width: 100px;
}
#navi ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2.3;
    text-decoration: none;
}
#navi ul li a:link,
#navi ul li a:visited {
    background: #fff;
}
#navi ul li a:hover {
    color: #000;
    background: #ccc;
}
#navi ul li li {
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}
#navi ul li li.menu_end {
    border-bottom: 1px solid #333;
}

６．その他

元のサンプルでは class 属性値に yuimenubarnav （赤色部分）を外すと、トップメニューの右矢印が非表示になります。

<div id="productsandservices" class="yuimenubar yuimenubarnav">

CSS レイアウトでネガティブマージンを使っていると、一部のモダンブラウザでリンクがクリックできなかったり、マウスでテキストを選択できない状態になる場合があります。

配布中の Movable Type 4.2 テンプレートをご利用の方からご指摘を頂きましたが、ネガティブマージンを使った CSS レイアウト全般で有効な対処方法と思われるので、備忘録として残しておきます。

１．問題点

次のように、左サイドバーの「Movable Type 入門セミナー」にマウスをポイントしてもリンクがアクティブになりません。

なお、この問題に関する、Windows XP での各ブラウザの動作状況は次の通りでした。

• FireFox3.0.3：NG
• Safari3.1.2：NG
• Opera9.5.2：OK
• Google Chrome：NG
• IE6：OK
• IF7：OK

２．原因

中央カラムにネガティブマージンを設定しているのですが、左サイドバーのマークアップが中央カラムより後方にあるため、左サイドバーのボックスが（ネガティブマージンにより）中央カラムの下に重なってしまっていたようです。

３．対処方法

クリックできないボックスに、次のようなプロパティを与えます。

#links-left {
    position: relative;
    z-index: 2;
}

z-index はボックスの重なりの順序を指定する際に使用します。値は 0 を基準とし、値が大きいものが上に重なります。ここでは 2 を指定して中央カラムのボックス（z-index 指定なし）より上に重なるようにしています。

なお、z-index はpositionプロパティでstatic以外の値が指定されている要素に適用されるので、position プロパティを併せて設定しています。

これでテキスト選択やリンクがアクティブになります。

配布中の Movable Type テンプレートも修正致しました。3カラムリキッドレイアウト（フッタつき）をご利用の方は最新版をご利用ください。

Movable Type テンプレート

４．参考サイト

• z-index－スタイルシートリファレンス
• CSS の透明バック

以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。

デフォルトテンプレート・配布テンプレートともにMovable Type 3.x からマークアップが変更されたため、本エントリーでヘッダに画像を設定する方法を簡単に紹介します。
この内容は Movable Type 以外のブログでも利用可能です。

エントリーの中で用いている背景画像は Link Style 様より利用させて頂きました。ありがとうございました。

１．基本

デフォルトテンプレートのヘッダー部分の(X)HTMLマークアップと、画像を表示するためのCSSの基本的な設定は次の通りです。

１．１ ヘッダーの (X)HTML マークアップ

デフォルトテンプレートのヘッダーの (X)HTML マークアップは、div 要素と h1/h2 要素、a 要素でブログのタイトルを表示しています。h1 要素はブログ名、h2 要素はブログの説明を表示します。

<div id="header">
    <div id="header-inner">
        <div id="header-content">
            <h1 id="header-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
            <h2 id="header-description">description</h2>
        </div>
    </div>
</div>

配布テンプレートも大体同じですが、div の入れ子はデフォルトテンプレートより少ないです。h1 要素はブログ名、p 要素はブログの説明を表示します。ブログの説明を h2 要素にしていないのは、ブログ記事タイトルを h2 要素にしているためです。デフォルトテンプレートではブログ記事タイトルは h3 要素になります。

<div id="header">
<h1 id="blog-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
<p class="blog-description">description</p>
</div>

画像を表示するにあたって、ヘッダーの (X)HTML マークアップを変更する必要はありませんが、基礎として覚えておくと良いでしょう。

なお、いずれのヘッダーも「ヘッダー」テンプレートモジュールにあります。構造を分かりやすくするため、上記のマークアップは再構築後のソースで表示しています。

１．２ ヘッダーの CSS

いずれの場合も、一番外側の div 要素に対し、下記の CSS を設定すれば背景画像（リストの「画像ファイル名」）を表示します。

#header {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

１．３ プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image

画像ファイル名を指定します。画像ファイル名の部分にはURL指定（例：http://domain/images/hogehoge.gif）・ドキュメントルートからの絶対パス（例：/blog/image/hogehoge.gif）・スタイルシートからの相対パス（例：../images/hogehoge.gif）が指定できます。ダブルクォーテーションは任意です。

background-position

画像の表示開始位置を指定します。ここではleft（水平位置が左端）と top（垂直位置が上端）を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。

background-repeat

画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat（繰り返しなし）」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

上記の各プロパティを background プロパティにまとめて記述することも可能です。ここではこの方法で説明を進めます。

#header {
    background: url("画像ファイル名") no-repeat left top;
}

注：画像ファイルを記述した右カッコの直後には、必ず半角空白を入れてください。空白がないとブラウザによっては画像が正常に表示されない可能性があります。
下は誤った例です。

#header {
    background: url("画像ファイル名")no-repeat left top;
}

２．デフォルトテンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や style.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ

なお、画像の設定だけではヘッダー上部に border の設定が残っているため、ヘッダー全体を画像で埋めるには次のように border-top-width プロパティを追加してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    border-top-width: 0;
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ

２．配布テンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や styles-site.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

/* ヘッダ */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
  
#header { 
    background: url("背景画像ファイル名") no-repeat top left; 
}

完成イメージ

４．リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしてください。

５．画像が垂直方向に収まらない場合

作成した画像がヘッダーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。配布テンプレートであれば、

/* ヘッダ */
#header {
    padding: 25px 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
...後略...

と、padding プロパティの上下方向の値を追加させることでタイトルバナー全体の縦幅が広がります。
デフォルトテンプレートの場合も padding プロパティで縦幅を広げることができます。

または、次のように line-height プロパティを与えます。

#header {
    line-height: 2.5;
}

デフォルトテンプレートでは #header-name に与えてください。

#header-name {
    line-height: 2.5;
}

値や単位の説明は省略しますので、他のサイトなどで調べてください。

６．ブログタイトルの位置を補正する

ブログタイトルの位置を補正したい場合は、padding プロパティを修正します。ここではデフォルトテンプレートの他のスタイルの背景画像

mt-static/themes/cityscape-portland/header.png

を利用して、左上に表示する例で説明します。

６．１ デフォルトテンプレートの場合

デフォルトテンプレートでは次のように設定します。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header {
    border-top-width: 0;
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") repeat-x top left;
    padding: 0 0 40px 5px;
}

完成イメージ

パディングを指定する順番は、左から時計回りに「上・右・下・左」です。ちなみにパディングを個別に指定する場合は、

padding-top: 0;
padding-right: 0;
padding-bottom: 40px;
padding-left: 5px;

とします。右のパディングについては

text-align: left;

と、テキストを左寄せにしているため、省略しても問題ありません（テキストを右寄せにする場合は必要になります）。

このように、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

ブログタイトルを右寄せにする場合は、#header に

text-align: right;

を追加します。

６．２ 配布テンプレートの場合

配布テンプレートでは次のように設定します。青色部分のように設定してください。

/* ヘッダ */
#header {
    padding: 25px 15px 75px 25px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
 
#header {
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") no-repeat top left;
}

完成イメージ

CSSでブログの横に影をつける方法です。

以前エントリーした、「CSSでブログに影をつける（ドロップシャドウ）」は、Movable Type 3 向け配布テンプレートの CSS レイアウトに合わせたものでしたが、Movable Type 4 では CSS レイアウトを変更したので、そのままでは適用できません。

ということで、Movable Type 4 向けの配布テンプレートによる設定方法を紹介します。このエントリーでは固定レイアウトのみを対象にしています。

１．ドロップシャドウの仕組み

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

基本的には、body 要素の背景画像（CSS で言えば body 要素セレクタの background プロパティ）に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記に(X)HTMLマークアップのイメージを記します。*2

<body>
  <div>　← ブログの幅を指定
    <div>　← 背景画像を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズをご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

• サンプル1：固定レイアウト（div 要素に背景画像を指定）
• サンプル2：固定レイアウト（body 要素に背景画像を設定）

２．配布テンプレートによるカスタマイズ

２．１ ドロップシャドウ用画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

• ドロップシャドウ用背景画像

保存したファイルは、サーバのブログディレクトリ（index.html があるディレクトリ）にアップロードしてください。
この背景画像は、配布テンプレートの3カラム固定レイアウトの幅に合わせています。

異なる背景画像を作りたい場合は、下記の記事を参考にしてください。

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

２．２ テンプレートの修正

ページ全体の修正イメージ（赤色を削除して青色を追加）は次の通りです。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
    ...中略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

このように変更するためには、まず、「ヘッダー」テンプレートモジュールに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
...後略...

次に、「フッター」テンプレートモジュールに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

...前略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

２．３ スタイルシートの修正

スタイルシートに対し、下記の修正（赤色を削除して青色を追加）を行ってください。

注：配布テンプレートのバージョンによっては修正前の内容が表示しているものと若干異なる場合があります。対応するセレクタ（.layout-three-column と組み合わせたもの）は同じなので、セレクタと変更内容をよく確認して修正してください。

/* カラム切り替え */
body.layout-three-column,
body.layout-three-column-right,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    text-align: center;
    background: #36414d;
}
...中略...
/* 固定レイアウト共通 */
.layout-three-column #box,
.layout-three-column-right #box,
.layout-two-column-left #box,
.layout-two-column-right #box,
.layout-one-column #box {
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    text-align: left;
    background-color: #fff;
}
 
/* 3カラム固定レイアウト幅 */
.layout-three-column-right #box,
.layout-three-column #box {
    width: 850px;
    width: 870px;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}
...中略...
/* フッタ */
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    border-bottom: 1px solid #669;
    height: 45px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 3.5;
    line-height: 3.7;
}
.layout-three-column #footer,
.layout-three-column-right #footer {
    width: 850px;
    width: 870px;
}
.layout-three-column #footer-inner {
    _height:100%;
    padding: 0 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #footer-inner {
    height:100%;
}
.layout-three-column #footer-inner p {
    color: #fff;
    background: #8fabbe;
}
...中略...
.clearfix:after {
    content: ""; /* ピリオドを削除*/
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

2008.09.17
２．２項の説明が誤っていたので修正しました。また、２．１項に背景画像を作る記事へのリンクを追加しました。

*1：これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2：div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません（本来はブログ全体を括る要素に与えるのが妥当）が、クロスブラウザ対応のためのテクニックとして記しています。

以前紹介した、「Highslide JS でサムネイル画像を拡大表示する」ですが、あれからバージョンアップが行われ、設定がかなり簡単になっていました（気がつくのが遅すぎかもしれません）。

細かい手順は省略して、変更点と思われる内容についてとりあえず記載しておきます。これから利用される方は、冒頭の元記事とあわせて参考にして頂ければと思います。

１．div要素の設定

以前は、body要素の直後に次のような空の内容のdiv要素の設定が必要でしたが、不要になっています。

<div id="highslide-container"></div>

２．キャプションの対応

以前は、ひとつのページにキャプション付きの画像を設定する場合は、次のようにid属性の対応が必要でしたが、不要になり、a要素の直後に記述した要素にclass="highslide-caption"が設定されていればキャプションと認識します。

<a href="[画像ファイルのURL]" id="thumb1" class="highslide" onclick="return hs.expand(this)">
 
<img src="[サムネイル画像のURL]" alt="..." />
</a> 
<div class="highslide-caption" id="caption-for-thumb1"><p>タイトル</p></div>
 
<a href="[画像ファイルのURL]" id="thumb2" class="highslide" onclick="return hs.expand(this)">
 
<img src="[サムネイル画像のURL]" alt="..." />
</a> 
<div class="highslide-caption" id="caption-for-thumb2"><p>タイトル</p></div>

Movable Type の、2階層のサブカテゴリーリストで、定義型リスト（dl/dt/dd：または定義リスト）によるマークアップを実現する方法です。ここでは Movable Type によるカスタマイズを記していますが、定義型リストの使い方の参考にもなると思います。

以前、ご質問を頂いたもので、本エントリーで情報展開しておきます。

１．完成例

親カテゴリーに dt 要素、子カテゴリーは全体を dd 要素で括った後、順不同リスト（ul/li）でリスト表示します。

<dl>
  <dt>親カテゴリーA</dt>
  <dd>
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </dd>
  <dt>親カテゴリーB</dt>
  <dd>
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </dd>
</dl>

ちなみに、上のリストを順不同リストで表現すると、次のようになります。

<ul>
  <li>親カテゴリーA
    <ul>
      <li>子カテゴリーA-1</li>
      <li>子カテゴリーA-2</li>
      <li>子カテゴリーA-3</li>
    </ul>
  </li>
</ul>
<ul>
  <li>親カテゴリーB
    <ul>
      <li>子カテゴリーB-1</li>
      <li>子カテゴリーB-2</li>
      <li>子カテゴリーB-3</li>
    </ul>
  </li>
</ul>

２．サブテンプレート

上記を実現するサブテンプレートは次のようになります。

<dl>
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasNoParentCategory><MTElse><dd><ul></MTHasNoParentCategory></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<MTHasNoParentCategory>
<dt><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]</dt>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
</MTHasNoParentCategory>
<MTElse>
<MTHasNoParentCategory>
<dt><MTCategoryLabel></dt>
<MTElse>
<li><MTCategoryLabel>
</MTHasNoParentCategory>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTHasNoParentCategory>
<MTElse>
</li>
</MTHasNoParentCategory>
<MTSubCatIsLast><MTHasNoParentCategory><MTElse></ul></dd></MTHasNoParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</dl>

余談ですが、定義型リストによるマークアップは、以前行われた「コーディングコンテストVol.1」で最優秀賞を獲得された、「TOTOCO.ORG」さんのマークアップで利用されていて、審査員の方から「dl要素の使い方が良い」と、高い評価を受けています。

コーディングコンテストVol.1：最優秀賞☆コーディングコンテストVol.1

下の画面がコンテストで最優秀賞を得たサイトです。ブラウザから[表示]-[ページのソース]でマークアップをみることができます。

例えば、グローバルナビゲーションは次のようなマークアップです（一部省略しています）。

<dl id="globalNav">
  <dt>主なカテゴリー</dt>
  <dd>
    <ul>
      <li><a href="index.html"><img src="nav_home_cr.gif" alt="ホーム" width="98" height="54" /></a></li>
      <li><a href="service/index.html"><img src="nav_biz.gif" alt="事業内容" width="98" height="54" /></a></li>
      <li><a href="products/index.html"><img src="nav_products.gif" alt="製品情報" width="98" height="54" /></a></li>
      <li><a href="recruit/index.html"><img src="nav_recruit.gif" alt="採用情報" width="98" height="54" /></a></li>
      <li><a href="about/index.html"><img src="nav_about.gif" alt="会社概要" width="98" height="54" /></a></li>
      <li><a href="contact/index.html"><img src="nav_contact.gif" alt="お問い合わせ" width="99" height="54" /></a></li>
    </ul>
  </dd>
</dl>

dt 要素は、次のCSSで非表示になっています（セレクタ名は一部省略）。

dl#globalNav dt{
    position:absolute;
    overflow:hidden;
    width:0;
    height:0;
}

丁度この時執筆していた、「Movable Type WEBデザインの新しいルール」のグローバルナビゲーションのカスタマイズにも、この定義型リストによるマークアップを利用させていただきました。

ブログのエントリー本文は、一般的に左寄せで表示しますが、「本文中の画像だけをセンタリングしたい場合はどうすればいいですか？」というご質問を頂きましたので、本エントリーで紹介します。

このカスタマイズを行えば、下の画面のように、画像だけをセンタリングすることができます。

ちなみに、これは昨年の11月に頂いた質問で、もっと早くエントリーを公開する予定でしたが、完全に忘却の彼方でした。大変申し訳ありません。

１．設定方法

エントリー全体が、

class="entry"

という class 属性で括られていると仮定した場合、CSS に、

.entry img {
    display:block;
    margin: 0 auto;
    text-align: center;
}

を追加するだけです。

class属性名が異なる場合は .entry の部分を変更してください。また、セレクタ名を img という要素セレクタにしてしまうと、ブログ全体に設定が蔓延してしまうので、必ずエントリー本文に絞り込むセレクタを設定してください。

２．Movable Type 4 の場合

Movable Type 4 であれば、ブログ記事に画像をアップロードした時に配置の設定が可能です。「位置」欄にある「中央」を選択すればOKです。

この設定を行うと、img 要素に style 属性として、

style="margin: 0pt auto 20px; text-align: center; display: block;"

が設定されます。

img 要素にダイレクトに CSS が設定されるので、カスケードの優先度から、テンプレートを入れ替えても効果は変わりません。

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。

このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1

１．サンプル１

h1 の後方に img を置く場合は、CSSハックを使います（h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…）。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。

画像置換サンプル1

(X)HTML

<div id="header">
<h1>タイトル</h1>
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
</div>

CSS

#header h1 {
    font-size: 100%;
}
#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: -19px;
    _top: -18px; /* IE6 */
    left: 0;
}
*:first-child+html #header div p {
    top: -18px; /* IE7 */
}
/* opera9 \*/
html:\66irst-child #header div p {
    top: -18px;
}

ここでは適用していませんが、Windows XP + Safari3 の CSS ハックは下記で有効になります。

body:first-of-type #header div p {
    top: -18px;
}

２．サンプル２

img 要素を h1 要素より前に記述すれば CSS ハックが不要になります。ただし文書構造的にはサンプル１の方がいいかもしれません。

画像置換サンプル2

(X)HTML

<div id="header">
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
<h1>タイトル</h1>
</div>

CSS

#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: 0;
    left: 0;
}

３．その他

上記の設定は、画像サイズが表示領域を超えないことを前提にしています（overflow: hidden を設定して試したところ、IE7 では適用されませんでした）。
上記の他、何か良いアドバイスがあればお待ちしています。

４．参考・関連サイト

• CSS Hack for Safari
• 一番簡単な画像置換の方法-imageReplace.js-
• ちょっとマシな画像置換

*1：このテクニックは「XREA のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。

XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ（タイトルバナー）にきれいに埋め込んで表示する方法です。質問を頂きましたので本エントリーにてカスタマイズを紹介します。

リキッドレイアウトであれば position プロパティを利用した絶対配置で比較的簡単に設定できますが、固定レイアウトでも position プロパティを組み合わせることで、決まった位置に表示させるテクニックがあります。

ここでは公開テンプレートを例に設定していますが、テンプレートに関係なく適用可能です。

１．（X）HTMLマークアップ

広告表示用の script 要素を追加し、script 要素を div と p で括ります（青色）。div に任意の class 属性、または ID 属性を設定します。

<div id="header">
<h1 id="blog-name"><a href="" accesskey="1">First Weblog</a></h1>
<p class="blog-description">test</p>
<div class="ad">
<p>
<script type="text/javascript" src="http://..."></script>
<noscript><iframe height="60" width="468" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="http://..."><a href="http://..." target="_blank"><img src="http://..." border="0" alt="xreaad"></a></iframe></noscript>
</p>
</div>
</div>

ちなみにこのまま表示すると、下記のようになります。

２．CSS

スタイルシートに下記の設定を追加します。

div.ad {
    position: relative;
    margin: 0;
}
div.ad p {
    position: absolute;
    top: -56px;
    right: 15px;
}
html > body div.ad p {
    top: -58px;
    right: 0;
}

仕組みは、親要素の div に position: relative; を設定し、div を相対配置にします。そしてその子要素の p に position: absolute; を設定することで、子要素の position プロパティの基点は、親要素（div）が配置されるべき位置となります。あとは子要素の p に対して、表示させたい位置に top や right プロパティ等で移動させます。

当サイトのテンプレートでは、IE6とそれ以外のブラウザで広告表示位置が若干異なるので、子セレクタ（>）を使って異なる値を設定しています。
また、div のマージンを0にして不要な空白が表示されないようにしています。

広告以外に、検索フォーム等を埋め込む時にも有効ですので、お試しください。

出遅れましたが、インプレスより XHTML+CSS 本が出版されています。

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 加藤 善規/平澤 隆/両見 英世 インプレスジャパン 2007-07-03 売り上げランキング : 512 Amazonで詳しく見る by G-Tools

ブログでも活躍されているお三方、加藤善規さん、平澤隆さん、両見英世さんの共著です。下のサイトを見て頂ければどなたかお分かりになると思います。

• WWW Watch
• CSS HappyLife
• ネットのサラダボウル

内容はタイトルの通り、100の法則が下記の6つの章に配されています。

第1章 (X)HTML の基本法則

第2章 CSS の基本法則

第3章 用途と目的に合わせたレイアウトの法則

第4章 ユーザビリティを向上させる CSS デザインの法則

第5章 実践的な CSS デザインの法則

第6章 プロを感じさせるデザインの法則

フルカラーで、各法則のタイトルにはポイントがずばりと記され、読み切り形式になっています。順番に読むのも、拾い読みするのも、どちらもいい感じです。
また巻末には用語集と豊富な索引が用意されていますので、初心者の方にもお勧めです。

シリーズ本で「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」も発売されています。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 石田優子/有限会社アルファサラボ インプレスジャパン 2007-07-03 売り上げランキング : 1070 Amazonで詳しく見る by G-Tools

最近すっかりオーソドックスになった、順序なしリスト（ul/li）を用いたグローバルナビゲーションを紹介します。

2年ほど前に書いた「ナビゲーションバー・シンプルタイプ」というエントリーは、アンカーテキストを並べた形式でしたが、グローバルナビゲーションの作り方についてコメントを頂きましたので、新たに作成してみました。

巷では、画像を用いたものやプルダウンメニューつきのグローバルナビゲーションをよく見かけるのですが、ここではテキストのみによるシンプルなグローバルナビゲーションを紹介します。

１項のサンプルコードは Movable Type のMTタグを埋め込んでいますが、MTタグを書き換えれば汎用的に使うことが出来ます。
動作は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。

１．テンプレートの設定

ヘッダの下にグローバルナビゲーションのマークアップ（青色）を追加します。

<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
</div>
 
<div id="navi">
<ul>
<li><a href="<$MTBlogURL$>" title="Home">Top</a></li>
<li><a href="<$MTBlogURL$>about.html" title="about">About</a></li>
<li><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></li>
<li><a href="<$MTBlogURL$>link.html" title="Link">Link</a></li>
<li><a href="<$MTBlogURL$>search.html" title="Search">Search</a></li>
<li><a href="<$MTBlogURL$>contact.html" title="Mail">Mail</a></li>
</ul>
</div>

２．CSS 追加

下記のグローバルナビゲーション用スタイルをスタイルシートに追加します。

#navi {
    border-bottom: 1px solid #669;
    background: #fff;
    height: 25px;
}
html > body #navi,
html > body #navi ul li a { /* for Safari */
    height: 28px;
}
#navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi ul li {
    float:left;
    border-right:1px solid #333;
    width: 100px;
}
#navi ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2.3;
    text-decoration: none;
}
#navi ul li a:link,
#navi ul li a:visited {
    background: #fff;
}
#navi ul li a:hover {
    color: #000;
    background: #ccc;
}

全体に border を与えているので XHTML のマークアップが div の分だけ冗長になってしまっています。すいません。
また、IE6のテキスト部分以外にマウスオーバーを有効にする対策では height を用いていますが、#navi ul li a に position: relative; を与える方法もあります。

2007.12.28
タイトルを「ナビゲーションバー・リストタイプ」から「グローバルナビゲーション」に変更し、併せて本文も修正しました。

ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。
ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。

１．概要

RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ（Movable Type）を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され（あるいはダウンロードのダイアログが表示され）、「これは一体何だろう？」と不思議に思ったものです（下）。

このリンクは RSSリーダ／アグリゲータ等が認識するための（XMLフォーマットの） URL を指しているだけなので、そもそも人がクリックして読むものではないのですが、リンクがあるとクリックして読みたくなるのが人の常というものです。
で、もう少し読めるフォーマットになっていると親切かもしれないということで、本稿のようなカスタマイズを行ないます。読めることで「人が読むためのリンク」と勘違いされるのは困りますが、その辺りは言及しません。

フィード（というかXML）を読みやすくするための、スタイルシートを適用させる仕様（下）があり、これを利用することで RSS/Atomフィード等の XML 文書を （X）HTML と同じように CSS で整形することができます。厳密に言えば、この仕様が実装されているブラウザで閲覧することが前提です。

• Associating Style Sheets with XML documents
• スタイルシートをXML文書に結びつける

２．適用方法

XML 文書に xml-stylesheet 処理命令を追加します。これは（X）HTML における link rel="stylesheet" の挙動に従います。

フィード用テンプレートの XML 宣言

<?xml version="1.0" encoding="utf-8"?>

のすぐ下に、次のどちらか1行を追加してください。

RSS2.0 の場合

<?xml-stylesheet href="styles-rss2.css" type="text/css"?>

Atom1.0 の場合

<?xml-stylesheet href="styles-atom1.css" type="text/css"?>

CSSファイルの名称は何でも構いませんが、とりあえず上記の名称で話を進めます。また、CSS 以外にも XSL を扱うこともできます。その場合は type 属性を text/xsl にします。

そして、下記のいずれかのファイルをダウンロードし、フィードと同じディレクトリにアップロードします。

styles-rss2.css

styles-atom1,css

上記ファイルの内容を簡単に説明しておきますと、例えば RSS2.0 のフォーマットをかなりおおざっぱに書くと、

<rss version="2.0">
   <channel>
      <item>
　　　　　：
      </item>
      <item>
　　　　　：
      </item>
   </channel>
</rss>

となっており、これに適用させるスタイルシートの内容は

rss {
　：
}
channel {
　：
}
item {
　：
}

となっています。Atom は要素名が異なりますが大体同じような構成になっています。

HTML や CSS に慣れていればそれほど難しいものではありませんので配布 CSS をカスタマイズしてみてください。

３．適用例

CSS は慌てて作ったのでグダグダですが、RSS に適用すれば多分下のように表示されるようになります。

RSS2.0（適用前）

RSS2.0（適用後）

Atom1.0（適用前）

Atom1.0（適用後）

閲覧および、スタイルシートのカスタマイズの確認には Opera9 を推奨します。IE6/7 は完全に適用されず（IE6はキャッシュをクリアしないとCSS変更が適用されない）、Firefox2 はブラウザ自体の機能で整形してしまうようです（間違ってたらご指摘ください）。

４．複数のスタイルシートを扱う場合

仕様に記載されている通り、複数の xml-stylesheet 処理命令は、HTML4.0 の link rel="stylesheet" と全く同じです。

<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">

は下記と等価です。

<?xml-stylesheet alternate="yes" title="compact" href="small-base.css" type="text/css"?>
<?xml-stylesheet alternate="yes" title="compact" href="small-extras.css" type="text/css"?>
<?xml-stylesheet alternate="yes" title="big print" href="bigprint.css" type="text/css"?>
<?xml-stylesheet href="common.css" type="text/css"?>

５．参考サイト

• Going My Way：index.rdfにスタイルシートを適用する。
• ADP：RSSがわからない
• ADP：RSS用のスタイルシート

2007.05.30
２項の「xml-stylesheet 要素」は誤記であったため、「xml-stylesheet 処理命令」に変更しました（４項の記述はそのまま）。

「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル（修正前）

追記文章の折りたたみ 2.0 サンプル（修正後）

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

１．表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト（この場合は追記部分全体）を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました（WindowsXP + IE7/Firefox2/Opera9 で確認しています）。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注：.entry の width プロパティに 100% を与えると他の不具合が生じます。

２．文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「«」および「»」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

先日エントリーした「CSS 変更（2007.02.11）」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカスタマイズをご紹介致します。

この変更を行なえば、ツリー画像が各親カテゴリー内に閉じた形で表示されるようになります。またカテゴリー表示が長大になる場合、従来の表示では親カテゴリーのツリー画像が途切れる可能性が高かったのですが、この方法であればある程度問題なく表示されると思います。

変更方法は、CSS の修正と親カテゴリー用の画像の用意です。

元のサンプルは「サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type」を利用していますが、CSS についてはブログツール・ブログサービスに依存しませんので、変更箇所を確認しながら修正してください。

スクリーンショットの完成例で使用している親カテゴリーのリストマークは、下記から頂きました。

Stylegala：Bullet Madness

全く同じマークは下から 30 番目あたりにあります。

下記にスクリーンショットと同じ変更をした CSS を示します。変更箇所は赤、追加は青で示していますが、お好みに応じて適宜修正してください。

変更前

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

変更後

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0px;
    padding: 0 0 0 17px;
    background: url([親カテゴリー用画像ファイル]) no-repeat 1px 0.15em;
    list-style: none;
}
ul.tree li li {
    margin: 0;
    padding: 0 0 0 15px;
    background: url(tree_lst.gif) no-repeat 4px 0;
    list-style: none;
}
ul.tree li li.tree_end {
    background: url(tree_end.gif) no-repeat 4px 0;
    list-style: none;
}

ご覧の通り、親カテゴリー用の li 要素セレクタと、子カテゴリー用の li 要素セレクタを分割しています。子カテゴリーは、li 要素セレクタを重ねて指定し、li 要素が再帰的に出現する場合のみ、ツリー画像を表示するようにしています。

参考までにサンプルのHTMLマークアップも掲載しておきます。折りたたみ用の div 要素が含まれてやや複雑になってますが予めご了承ください。

<ul class="tree">
  <li class="tree">
    <div class="subcategories" id="subcategories9name"><a href="..." title="9">ブログ</a> [1]</div>
    <div id="subcategories9list">
      <ul class="tree">
        <li class="tree_end">
          <div class="subcategories" id="subcategories10name"><a href="..." title="10">Movable Type</a> [1]</div>
          <div id="subcategories10list">
            <ul class="tree">
              <li class="tree"><a href="..." title="11">カスタマイズ</a> [1]</li>
              <li class="tree_end"><a href="..." title="12">テンプレート</a> [2]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="tree">
    <div class="subcategories" id="subcategories1name"><a href="..." title="1">日記</a> [1]</div>
    <div id="subcategories1list">
      <ul class="tree">
        <li class="tree_end"><a href="..." title="2">食事</a> [1]</li>
      </ul>
    </div>
  </li>
  <li class="tree_end">
    <div class="subcategories" id="subcategories3name"><a href="..." title="3">趣味</a> [1]</div>
    <div id="subcategories3list">
      <ul class="tree">
        <li class="tree">
          <div class="subcategories" id="subcategories5name"><a href="..." title="5">パソコン</a> [1]</div>
          <div id="subcategories5list">
            <ul class="tree">
              <li class="tree"><a href="..." title="7">Linux</a> [1]</li>
              <li class="tree_end"><a href="..." title="8">Windows</a> [1]</li>
            </ul>
          </div>
        </li>
        <li class="tree_end">
          <div class="subcategories" id="subcategories4name"><a href="..." title="4">車</a> [1]</div>
          <div id="subcategories4list">
            <ul class="tree">
              <li class="tree_end"><a href="..." title="6">VW</a> [1]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「公開テンプレートにフッタを追加する」でご質問を頂きましたので本エントリーにて紹介致します。スクリーンショットは固定レイアウトにフッタを追加した完成例です（フッタ部分のみ切り取って表示させています）。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

１．固定レイアウトの場合

１．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素（終了タグ）の間に青色で示したフッタを挿入します。

　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
　　　　　　：

１．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-two-column-left #footer,
.layout-two-column-right #footer {
    margin: 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、

.layout-two-column-left #box
.layout-two-column-left #content
.layout-two-column-right #box
.layout-two-column-right #content

で検索しましょう。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

またレイアウトによって下記も同様に修正してください。

左サイドバーの場合

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

右サイドバーの場合

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

２．リキッドレイアウトの場合

当サイトで公開しているリキッドレイアウトは左右カラムを absolute（絶対値）指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

２．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素（終了タグ）と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

左サイドバーの場合

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<br class="clear" />
　　　　　　：

右サイドバーの場合

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　：

２．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer {
    margin: 15px 0 0;
    padding: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。

１．「回り込み」とは

例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。

マークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

（X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、前の要素の右（または左）側に回り込みます。

ちなみに「float プロパティ = 回り込み」という解釈は正しくないようです。下記の記事に分かりやすい解説があります。

• てんぽ：floatは「回り込み」ではない

２．「回り込み解除」とは

画像の左（または右）に回り込んで表示されているテキスト（あるいは要素）を、回り込まない状態に戻すことをこのように呼びます。
画像の回り込みが有効な状態が持続すると、流し込むテキスト量によっては後続のテキスト等が一緒に回り込んでしまいます。リキッドレイアウトでブラウザの横幅をひろげた場合にありがちです。

回り込みを解除していないマークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p>
回り込まないテキスト?（略）?回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

このような予期しない表示を避けるため、回り込みを解除する必要があります。

３．回り込み解除方法

３．１ 後続の要素に clear プロパティを与える

回り込みを解除するために、回り込みさせた要素の後続の要素に clear プロパティを与える方法があります。

マークアップ

<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p style="clear: both">
回り込まないテキスト?（略）?回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

３．２ 親ブロック要素の after 擬似要素に clear プロパティを与える

具体的には、float プロパティの要素を含む親ブロック要素の after 擬似要素に対し、clear プロパティを与えます。

３．１項の方法では後続の要素で回り込み解除を設定しますが、回り込みさせた要素を含むブロック要素自身で回り込みを解除させる方が感覚的に本来のように感じます。
このような場合、after 擬似要素を用いれば可能らしいのですが、残念ながら IE6（多分IE7も）では after 擬似要素がサポートされていません。

が、調べているうちに、

「zoom プロパティを併用することで IE も対応可能」

といった内容の記事をみつけましたので、ここではその方法をご紹介致します。*1
参考記事は下記です。ありがとうございました。

• AOINA.COM：[css]floatの回り込み解除を親要素で処理
• u-ziq.com：CSS 回り込み解除の決定版

全体の構成は下記のようになり、float プロパティを与えた親のブロック要素（ここでは p 要素）に対し、回り込み解除用の class 属性を記述します。class 属性名は任意の名称で構いません。

CSS

.fbox {
    zoom: 100%;
}
.fbox:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

Windows XP + IE6 / IE7/ Firefox2 / Opera 9 では、height プロパティ、visibility プロパティは指定しなくても回り込み自体は解除されるようです（他の振る舞いについての差異は未確認）。

マークアップ

<p class="fbox">
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p>
回り込まないテキスト?（略）?回り込まないテキスト
</p>

表示

回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト

回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト

４．Movable Type でエントリーを書く場合

Movable Type でエントリーを記述する際、エントリー編集画面下の「改行設定」を「改行を変換する」にしている場合でも、class 属性つきの p 要素を手動で付与した場合は、p 要素は重複して自動付与されないので、３．２項の方法がそのまま利用できます。

５．関連リンク

• Cascading Style Sheets, level 2 CSS2 Specification：9.5.1 浮動体の位置決め ('float'特性)
• 同：9.5.2 浮動体に隣接する流れの制御 ('clear'特性)
• 同：5.12.3 :before 疑似要素及び :after 擬似要素

とまとめてみましたが、私自身回り込み解除を利用していなかったので、これから少しずつ過去のエントリーを修正していきたいと思います（反省）。

*1：zoom プロパティは IE（5.5 以上）の独自プロパティなので、利用した場合、CSS valid にならなくなります。

先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。

このツールを利用すれば表示を確認しながらリサイズすることができます。

また配布テンプレートのカラムサイズを変更する場合、スタイルシートの中から該当のセレクタを探して修正する必要がありましたが、その変更も簡単に行えるようになりました。

利用方法は上記リンクのサンプルブログの本文をご覧ください（お読みにならなくてもなんとなく分かると思います）。
配布テンプレートをご利用でない方も、テンプレートを自作される場合の参考になれば幸いです。

動作確認ブラウザ

Windows XP + IE6.0/IE7.0/Firefox 2/Opera9 です。

利用可能テンプレート（2007年2月現在）

Movable Type / WordPress（3カラム版） / Serene Bach / sb / FC2 ブログ / Seesaa ブログ / livedoor ブログ / さくらのブログ

注意事項

ツール上ではカレンダーもリサイズ可能にしていますが、配布テンプレートでは同じ振る舞いになりません（テンプレートによってカレンダーのマークアップが異なるという前提もありますが）。
Movable Type でツールのカレンダーと同じ振る舞い（幅可変）にしたい場合は、赤色部分の値を大きくしてください。

.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}

公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。
本カスタマイズはテンプレート配布のブログをお使いでしたらどれでも（多分）適用可能と思われます。また公開テンプレートでない場合も基本的な考え方は大体同じと思われます。色々試してみてください。

下記のリンクにサンプルを用意しましたので完成例をご覧ください。効果が分かりやすいよう、ブログ左右の背景は白にしています。

• 変更前
• 変更後

１．背景画像を設定する

公開テンプレートでサイドバータイトルをカラム幅に合わせて表示する場合、大きな変更点があります。それは中央カラム両サイドにある罫線を画像を用いて表示することです。

背景画像を用いる目的は、背景画像を用いない場合、中央カラム両サイドの罫線が中央カラムの内容分しか表示されません。
もしサイドバーが中央カラムの長さを超えて表示され、さらにサイドバータイトルが中央カラムの罫線がない位置に表示されると、スクリーンショットのような期待外れの結果になってしまいます。

以下、カスタマイズ方法です。

１．１ テンプレートの修正

テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

１．２ 画像のダウンロード・アップロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

• 背景画像

ダウンロードした背景画像をトップページのあるディレクトリにアップロードしてください。

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に大体合わせています。

１．３ スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
　　　　　：
　　　（かなり略）
　　　　　：
/* 3カラム用 */
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: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    border-bottom: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.layout-three-column #inner {
    _height:100%;
    background: url("back.gif") repeat-y top center;
}
　　　　　：
　　　　（略）
　　　　　：
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    width: 476px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

これで中央カラムに適用した背景画像の罫線が一番下まで表示されればOKです。なお上記のリストは、背景画像（back.gif）がスタイルシートと同じディレクトリにあることを想定しています。また、#inner の _height プロパティがないと、IE6 では背景が最後まで表示されないようです。
下記のリンクに、ここまでの変更が反映されたページのサンプルを示します。

• 背景画像を適用した状態

サンプルのようになっていない状態で作業を続行すると混乱をきたす原因となりますので、必ず同じ状態にしてから次の作業に進んでください。

２．サイドバータイトルの幅を変更する

続いてサイドバータイトルの幅を変更します。変更の目的を説明しながらスタイルシートの変更箇所を表示します。

２．１ 左右サイドバー全体の padding 変更

左右サイドバー全体の width および padding を変更します。

.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
    width: 187px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
    padding: 15px 0 20px 0;
    color: #ffffff;
}

width を 2px 増加させるのは、サイドバータイトルの左右の罫線をなくす分（計 2px）を増やしています。また padding はサイドバーの表示領域を制限していますが、左右の padding をなくすことで、サイドバータイトルおよびサイドバーの内容がサイドバー横一杯に広がります。下記の修正を行った時点でページをご覧頂ければお分かりになると思います。

なお、下の padding（20px）はサイドバーの内容が中央カラムより長くなった場合の、一番下の罫線との空白です。これはお好みの値に変更してもらって構いません。

２．２ サイドメニュータイトルの罫線削除

サイドメニュータイトルの border を上下のみに修正します。

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    padding: 2px 0 1px;
    _padding: 1px 0 2px;
    border: 1px solid  #666666;
    border-top: 1px solid  #666666;
    border-bottom: 1px solid  #666666;
    text-align: center;
    color: #444444;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 140%;
}

２．３ サイドメニューの位置微調整

サイドメニュー本体の位置を若干修正します。

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    margin: 10px 15px 20px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

お好みに応じて値を変更してください。

３．カレンダーの位置を修正する

上記の .side を修正するとカレンダーの位置に影響が生じます（当方のスタイル設定ミスです、すいません）。カレンダーをそのまま使用されている場合は、

<!-- カレンダー開始 -->
<div class="side">

を

<!-- カレンダー開始 -->
<div class="sideCalendar">

に変更して、

.sideCalendar{
    margin: 0 0 15px 13px;
    _margin: 0 0 15px 5px;
}

をスタイルシートに追加してください。

以上で完成です。

公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。

CSSは公開しているテンプレートで（多分）共通ですので、テンプレート配布のブログ（Movable Type / Serene Bach / FC2 ブログ / Seesaa ブログ / livedoor ブログ等）をお使いでしたらどれでも適用可能と思われます。

修正するのはスタイルシートのみです。スタイルシートを修正する箇所には似たようなセレクタが並んでおりますので、修正する際には、下記の該当する修正リストのセレクタ名の部分をマウスコピーして、編集画面（またはエディタ）上で検索すると良いでしょう。

なお、固定レイアウトの場合は下記のツールを是非ご利用ください。

テンプレートカスタマイズ支援ツール Column Resizer

１．固定レイアウト

１．１ 3カラムレイアウト

スタイルシート後方に出現する、リスト1.1 の赤色部分（2ヶ所）を変更します。

リスト1.1　固定レイアウト・3カラムの変更箇所

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　：
　　（中略）
　　　　：
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

上の 850px は3カラム全体（左・中央・右）の幅、そして下の 185px が左右サイドバーの幅です。ということで、まず 185px をお好みの幅に変更してください。ここでは 15px 加えて 200px にひろげる例で進めます。

そして、この値を元に上の 850px の部分を修正します。算出式は

元の値 + サイドバー幅の増分×2

になります。今回の例では、

850px + (200px - 185px) ×2 = 880px

となるので、880px を設定します。
サイドバーの幅をデフォルト値より少なくした場合は、逆に 850px から減算します。

ちなみにサイドバーの全体幅は 185px ですが、余白を左右 15px とっているので、実際に表示される幅はデフォルトで 155px です。Google Adsense のキーワード広告等、160px で設定されている部品をおさめるには、5px 加えて 190px にすれば（多分）大丈夫だと思います。

１．２ 2カラムレイアウト（左サイドバー/右サイドバー）

左サイドバーの場合、スタイルシート後方に出現する、リスト1.2 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.2　固定レイアウト・2カラム（左サイドバー）の変更箇所

.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}

右サイドバーの場合、左サイドバー同様、リスト1.3 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.3　固定レイアウト・2カラム（右サイドバー）の変更箇所

.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}

そして、左サイドバー・右サイドバー、いずれの場合もリスト1.4 の赤色部分を併せて変更してください。

リスト1.4　固定レイアウト・2カラム（左サイドバー・右サイドバー共通）の変更箇所

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

665px は 2カラム全体の幅を示しており、変更したサイドバー幅の値を元に、665px の部分を修正します。算出式は

元の値 + サイドバー幅の増分

となります。
例えば、サイドバー幅 185px を 200px にひろげた場合は、

665px + (200px - 185px) = 680px

となるので、680px を設定します。

２．リキッドレイアウト

２．１ 3カラムレイアウト

スタイルシート後方に出現する、リスト2.1 の赤色部分（3ヶ所）を変更します。

リスト2.1　リキッドレイアウト・3カラムの変更箇所

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

ちょっとややこしいですが、155px はサイドバーに実際に表示される部分の幅、最初の185px がサイドバー全体の幅が設定されています。

まず、サイドバーの表示部分 155px の値を変更した後、

元の値 + サイドバー幅の増分

を加算してください。例えばサイドバーの表示部分の幅を 155px から 160px に変更した場合、185px の部分は、

185px + (160px - 155px) = 190px

となり、190px を設定します。

２．２ 2カラムレイアウト（左サイドバー）

スタイルシート後方に出現する、リスト2.2 の赤色部分（2ヶ所）を変更します。

リスト2.2　リキッドレイアウト・2カラム（左サイドバー）の変更箇所

/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}

値の変更方法は２．１項を参考にしてください。

２．３ 2カラムレイアウト（右サイドバー）

スタイルシート後方に出現する、リスト2.3 の赤色部分（2ヶ所）を変更します。

リスト2.3　リキッドレイアウト・2カラム（右サイドバー）の変更箇所

/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

値の変更方法は２．１項を参考にしてください。

３．中央カラム幅も変更する（固定レイアウトの場合のみ）

３．１ 3カラムの場合

中央カラムの幅を変更する場合は下記の赤色部分を修正します。増加分はリスト1.1 の 850px の部分に、さらに追加します。

リスト3.1　固定レイアウト・3カラムの変更箇所

.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

３．２ 2カラム（左サイドバー）の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2　固定レイアウト・2カラム（左サイドバー）の変更箇所

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

３．３ 2カラム（右サイドバー）の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2　固定レイアウト・2カラム（右サイドバー）の変更箇所

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

中央カラム幅のみ変更する場合は「中央カラムにバナー広告を表示する」を参照願います。

ということで、本エントリーで、月別アーカイブリストの

• 年別ツリー化
• 年別折りたたみ
• 全体の折りたたみ

について、まとめてカスタマイズする手順を紹介致します。

以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。

１．プラグインのダウンロード・アップロード

下記のリンクよりプラグインをそれぞれダウンロードしてください。

ArchiveDateHeader プラグイン

ArchiveDateFooter プラグイン

ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの

メイン・メニュー > システム・メニュー > プラグイン

で、それぞれのプラグイン名が表示されればOKです。

２．スクリプトのダウンロード

下記のリンクより menufolder.js をダウンロードしてください。

download

３．スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。

リスト3.1 menufolder.js の修正箇所

// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives  = '▼';
var closeMarkForArchives = '▲';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

４．スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

５．テンプレートの修正（script タグ追加）

月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します（すでに他の折りたたみで設定済の方はこの項をスキップしてください）。

リスト5.1 script タグの追加

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

６．ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ダウンロードした画像ファイルのファイル名をそれぞれ

tree_lst.gif

tree_end.gif

に変更して、サーバにアップロードします。アップロード先は任意ですが、ここでは index.html と同じディレクトリにアップロードしてください。

７．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

月別アーカイブの年別ツリー化表示＋折りたたみができるタグ（リスト7.1）を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。

リスト7.1-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（div要素を利用）

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>

リスト7.1-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（dl/dt/dd要素を利用）

<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
</dd>

メニューリスト全体を折りたたみたい場合は、リスト7.1-1 または7.1-2 に、下記の青色部分 *1 を追加してください。

リスト7.2-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（div要素を利用）

<div class="sidetitle" id="monthlyname">
Monthly Archives
</div>
 
<div class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>

リスト7.2-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（dl/dt/dd要素を利用）

<dt class="sidetitle" id="monthlyname">
Monthly Archives
</dt>
 
<dd class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>

８．CSS

リスト8.1 をスタイルシートに追加してください。

リスト8.1 CSS

ul.tree {
    margin: 0 0 0 15px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0 0 0 10px;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 11px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

「CSSでブログに影をつける（ドロップシャドウ）」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる（かもしれない）方のために、Photoshop 6（CSは持ってません）を利用した作成方法を紹介します。

2006.12.02
記事を全面変更しました。

2008.09.11 追記
Movable Type 4.x 配布テンプレートご利用の方は「CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）」をご覧ください。

１．ドロップシャドウの仕組み

１．１ 固定レイアウト

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

基本的には、body 要素の背景画像（CSS で言えば body 要素セレクタの background プロパティ）に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。*2

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記にHTMLマークアップのイメージを記します。*3

<body>
  <div>　← ブログの幅を指定
    <div>　← 背景画像を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズ（２項）をご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

• サンプル1：固定レイアウト（div 要素に背景画像を指定）
• サンプル2：固定レイアウト（body 要素に背景画像を設定）

１．２ リキッドレイアウト

基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。

<body>
  <div>　← 背景画像（左用）を指定
    <div>　← 背景画像（右用）を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

こちらもサンプルを用意していますのでご覧ください。

• サンプル3：リキッドレイアウト

２．公開テンプレートによるカスタマイズ

２．１ 共通事項 - テンプレートの修正

固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

２．２ 固定レイアウトの場合

２．２．１ 画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

• ドロップシャドウ用背景画像

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。

２．２．２ スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* 3カラム用 */
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: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    width: 870px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}

これでドロップシャドウが表示されればOKです。なお上記のサンプルは、背景画像（back_fixed.gif）がスタイルシートと同じディレクトリにあることを想定しています。

#inner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

２．３ リキッドレイアウトの場合

２．３．１ 画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

• ドロップシャドウ用背景画像（左）
• ドロップシャドウ用背景画像（右）

２．３．２ スタイルシート修正

スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。（略）と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。

/* タイトルバナー */
#banner {
    margin:0 15px;
    _height: 100%;
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
*:first-child+html #banner {
    height: 100%;
}
　　　　　　：
　　　　　（略）
　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    margin: 0 200px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    left: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    right: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #inner {
    background: url("back_liquid_left.gif") repeat-y top left;
}
.layout-three-column-liquid #box {
    background: url("back_liquid_right.gif") repeat-y top right;
    width:100%;
}

#banner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2007.05.09 追記
CSS に IE7 対応のセレクタを追加しました。

*1：これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2：背景画像の高さは、他のサイトを拝見すると、3px?5pxと、非常に薄いものが多いです。CSS によって繰り返し表示するということはブラウザのレンダリング性能に依存する訳ですが、どの程度の高さが妥当であるかは不明です。個人的にはサンプルで示している高さでも特に問題ないと思ってます。言い換えると、繰り返し表示することでブラウザ下の部分が「はみだす」とか「帳尻が合わない」ということにはならないようです。

*3：div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません（本来はブログ全体を括る要素に与えるのが妥当）が、クロスブラウザ対応のためのテクニックとして記しています。

「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に

*:first-child+html

を付与します。例えば、IDセレクタ #banner に適用させる場合、

*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

となります。

なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。

#banner {
　　　　　　：
　　[IE7以外のスタイルを記述]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

以下で紹介する CSS ハックは、以前、Lucke bag::blog さんが CSS hacks から引用された記事（下記）から内容が変更されているようですので、下手な訳をつけて再掲しておきます。
IE7 およびモダンブラウザ、Opera9 に対応しています。

Lucky bag::blog：IE7 を含むモダンブラウザ向けの CSS ハックまとめ

以下、CSS hacks より抜粋・和訳

ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。

IE 6 and below （IE6以下）

* html {} 

IE 7 and below （IE7以下）

*:first-child+html {} * html {} 

IE 7 only （IE7のみ）

*:first-child+html {} 

IE 7 and modern browsers only （IE7 とモダンブラウザ）

html>body {} 

Modern browsers only (not IE 7) （IE7 以外のモダンブラウザ）

html>/**/body {} 

Recent Opera versions 9 and below （最近の Opera9 以下）

html:first-child {} 

「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。

上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。

例えば、あなたが必要とするセレクタが

#foo .bar

であり、それをIE7だけに適用したいのであれば、セレクタは

*:first-child+html #foo .bar

になるでしょう。

以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。

インライン要素をセンタリングする場合は、その要素のCSSで

text-align: center;

という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、

<div id="test">[ブロックレベル要素]</div>

をセンタリングする場合は、CSSに下記のような設定を行います。

#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1

したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、

<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>

追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2

#wrap {
    text-align: center;
}
#test {
    margin-left: auto;
    margin-right: auto;
    width: [ブロックレベル要素の幅];
}

これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。

逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って

#test {
    text-align: center;
}

というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。

*1：「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。

*2：参考 - Web標準普及プロジェクト：ブロックレベル要素をセンタリングする方法

タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。

ここでは、以前紹介した「ナビゲーションバー・シンプルタイプ」に「サイドバーの折りたたみ」の折りたたみマークを合体させ、ナビゲーションバーの左右に折りたたみマークを配置するカスタマイズを紹介します。

下記にサンプルを用意しました。

ナビゲーションバーにサイドバーの折りたたみマークを並べて表示

以下、基本構造および公開テンプレートによるサンプルで説明します。仕組みはタイトルの通り、3カラムレイアウトのCSSをナビゲーションバー部分に適用しています。
ナビゲーションバーの他、横型カレンダーとの組み合わせも（多分）可能です。

１．基本構造

１．１ HTML

HTMLマークアップは次のようになります。ul - li 要素は div 要素でも問題ありません。下から2行目の br 要素（の class 属性）は回り込み解除のため必須です。

リスト1.1　基本的なHTML

<div id="navi">
<ul id="left"><li>[左に表示する部品]</li></ul>
<ul id="navbar"><li>[中央に表示する部品]</li></ul>
<ul id="right"><li>[右に表示する部品]</li></ul>
<br class="clear" />
</div>

１．２ スタイルシート

下記の通りです。基本的な構造は3カラム固定レイアウトと同じです。

リスト1.2　基本的なCSS

#navi {
    padding: [部品全体のパディング];
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: [中央に配置する部品の幅];
    text-align: center;
}
#left {
    width: [左に配置する部品の幅];
}
#right {
    width: [右に配置する部品の幅];
}
.clear {
    clear: both;
} 

２．ナビゲーションバーとサイドバーの折りたたみマークを合体

サイドバーの折りたたみ用タグ

リスト2.1　サイドバーの折りたたみ用タグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

と、ナビゲーションバーのタグ

リスト2.2　ナビゲーションバーのタグ

<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

を合体すると下記のようになります。ナビゲーションバー部分は青で示しています。

リスト2.3　同時に表示させる場合のタグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

これだけでは横1列に並んで表示されないため、１項と同じ構造にするため、赤色部分を追加します。

リスト2.4　同時に表示させる場合のタグを修正

<div id="navi">
<ul id="left"><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul id="navbar"><li>
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</li></ul>
<ul id="right"><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
<br class="clear" />
</div>

これに下記のCSSをスタイルシートに追加します。折りたたみマークは text-align プロパティで一旦両端に配置してから padding プロパティで位置を調整しています。

リスト2.5　同時に表示させる場合のCSS

#navi {
    border-bottom: 1px solid #666699;
    padding: 3px 0;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: 600px;
    _width: 598px;
    text-align: center;
}
#left {
    width: 125px;
    text-align: left;
}
#left li {
    padding-left: 18px;
}
#right {
    width: 125px;
    text-align: right;
}
#right li {
    padding-right: 18px;
}

以上です。やっつけで作ったものですので誤りがありましたらお許しを。

CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性（または alt 属性）を指定した時のようにツールチップを表示させる方法です。*1
これは mixi の「小粋なユーザコミュニティ」の質問「ブログのタイトルバナー画像に alt 属性は設定できますか？」の回答です。*2

CSS の background 画像に alt 属性を設定することはできませんが、同様の機能を実現することは可能です。

とりあえず img 要素を用いた画像と、div 要素に background 指定した画像のサンプルを用意しましたのでお試しください。
右クリックすれば異なる設定であることがお分かりになると思いますが、いずれの画像もマウスをポイントするとツールチップを表示するようにしています。

img 要素 + alt 属性のサンプル

div 要素 + background 指定のサンプル

ということで回答です。
background 指定の画像は、画像を設定した元の HTML タグに title 属性を設定することでツールチップを表示させています（青色部分）。

HTML

<div id="logo" title="This is Movable Type logo."></div>

CSS

#logo {
    width:120px;
    height:60px;
    background: url(http://path/to/images/logo.gif) no-repeat;
}

サンプルは div 要素を用いましたが、title 属性が設定可能なタグであればツールチップの表示が可能と思われます。また画像を表示しなくても、例えばテキストにマウスをポイントしてもツールチップは表示されます。

参考サイト：RE: [css-d] ALT attributes in CSS background images

2006.09.18 追記
*1、*2 を追加しました。

2006.09.21 追記
「alt 属性= ツールチップ表示」という誤解を招くため、タイトル変更しました。

*1：alt 属性は、画像が表示されない場合の代替テキスト表示が本来の目的で、ツールチップ表示はブラウザ依存です（エントリー投稿以前よりその認識はありましたが説明不足でした）。例えば img 要素を Mozilla 系ブラウザ（Firefox 等）や Opera で表示する場合、title 属性を設定しないとツールチップは表示されません（サンプル（上）は title 属性も設定しています）。

*2：質問自体はツールチップ表示を期待されたものであるかどうかは定かではありません（私の一方的な解釈です）。「代替テキスト表示」が目的であれば解決するための内容はありません。

公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。

１．概要

参考までに、上記タイトルバナーの縦幅は、スタイルシートの

/* タイトルバナー */
#banner {
    padding: 15px;
　　　　　：

の赤色部分を

/* タイトルバナー */
#banner {
    padding: 27px 15px;
　　　　　：

に変更しています。デフォルトより縦幅の広い画像を表示する場合等はこの部分を変更してください。画像の設定方法は「CSSでタイトルバナーに画像を表示する」を参照ください。

２．補正方法

サイドバーの垂直方向の開始位置を補正するには、スタイルシートの下記の赤色部分を修正（値を大きくする）してください。なお利用しているレイアウトによって変更箇所が異なりますのでご注意ください。

3カラムの場合

　　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

2カラム（左サイドバー）の場合

　　　　　　　：
/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
　　　　　　　：

2カラム（右サイドバー）の場合

　　　　　　　：
/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

　　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 119px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 119px;
    right: 15px;
    color: #ffffff;
}
　　　　　　　：

CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td）にフォントサイズが反映されないという問題があります。

この不具合を回避するには2通りの方法があります。

１．ページ先頭のXML宣言を削除する

ひとつめの方法は、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

を削除します。
XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします（「後方互換モード」と「標準準拠モード」については後述）。

２．th 要素、td 要素に直接プロパティを設定する

後方互換モードのままでも、例えば

th, td {
  font-size: 10px;
}

と設定することで、プロパティの値を反映させることができると思います。

標準準拠モードと後方互換モード・DOCTYPE宣言について

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる！ホームページ作成リファレンス：標準モードと互換モードについて
カスタムチャンス! 雑記帖：文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

IE5.5/6.0 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blog：xml宣言について

IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない

IE5.5/6.0 の後方互換モード（および5.5以前）の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト＠CSSバグ辞典スレッド：フォントサイズの指定が表要素に継承されない

上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。

color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform

１．基本的な設定方法

バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。

HTML

HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。

<h1><a href="http://～/">タイトル</a></h1>

CSS

この h1 タグに対し、下記のような CSS を設定すれば背景画像（リストの「画像ファイル名」）が表示されます。リストは画像以外のプロパティを省略しています。

h1 {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image

画像ファイル名を指定します。画像ファイル名の部分にはURL指定（例：http://domain/images/hogehoge.gif）・ドキュメントルートからの絶対パス（例：/blog/image/hogehoge.gif）・スタイルシートからの相対パス（例：../images/hogehoge.gif）が指定できます。

background-position

画像の表示開始位置を指定します。ここではleft（水平位置が左端）と top（垂直位置が上端）を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。

background-repeat

画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat（繰り返しなし）」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

プロパティをまとめる

各プロパティを background プロパティで次のようにまとめて記述することも可能です。

h1 {
    background: url("画像ファイル名") no-repeat left top;
}

サブタイトルがある場合

また、タイトルバナーにはタイトルの下にサブタイトルを表示している場合が少なくないと思います。

<div id="banner">
<h1><a href="http://～/">タイトル</a></h1>
<h2>サブタイトル</h2>
</div>

このような場合は h1 タグではなく、タイトルおよびサブタイトルを括っている div タグがあると思いますので、この div タグ（の id 属性）に対してスタイルを設定します。

#banner {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

２．公開テンプレートの設定方法

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>

タイトルバナー部分のCSSは下記のようになっていますので、赤色の背景色設定用の background プロパティを削除します。
そして、そのすぐ下に記述しているコメントアウトマーク（「/*」と「*/」）も削除してください。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

このコメントアウトされていたプロパティを利用して画像表示の設定をします。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

３．Movable Type デフォルトテンプレートの設定方法

Movable Type のデフォルトテンプレートも左のスクリーンショットのように青色の背景色を設定しています。参考までにデフォルトテンプレートのHTMLは下記のようになっています。

<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>

先程よりやや複雑な構造ですが、スタイルは一番外側の div タグの id 属性（banner）に設定します。スタイルシート（styles-site.css）のタイトルバナーのCSSに対して赤色を削除します。

#banner {
    width: 710px; /* necessary for ie win */
    background: #a3b8cc;
}

そして２項と同様、画像表示の関連プロパティを追加します。

#banner {
    width: 710px; /* necessary for ie win */
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

４．リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしましょう。

５．画像が垂直方向に収まらない場合

苦労して作成した画像がタイトルバナーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。公開テンプレートであれば、

/* タイトルバナー */
#banner {
    padding: 30px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

と、padding プロパティの上下方向の値を増加させることでタイトルバナー全体の縦幅が広がります。

６．タイトルを任意の位置に表示する

５項の設定ではタイトルは左中央に配置されます。タイトルを左上や右上等に表示する場合は、５項の padding プロパティを修正します。ここでは左上に表示する例で説明します。

まず、５項で修正した padding プロパティ

padding: 30px 15px;

の値は下記の意味になります。

• 30px：上下のパディング
• 15px：左右のパディング

なお、これは上下パディングと左右パディングを一括設定する場合の省略形で、

padding: 30px 15px 30px 15px;

と書いても同様の効果があります。指定する順番は、左から時計回りに「上・右・下・左」です。
ちなみにパディングを個別に指定する場合は、

padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;

とします。なお右のパディングについては

text-align: left;

と、テキストを左寄せにしていることと、テキストの右側は他のプロパティでブログ全体の幅を指定しているため、省略しても問題ありません（テキストを右寄せにする場合は必要になります）。

さて、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

padding: 15px 15px 45px 15px;

下パディングの値が少ないと画像の表示範囲が少なくなりますのでご注意ください。
左右のパディングは一括して設定できるので、

padding: 15px 15px 45px

としても良いです（2番目の値が左右パディング）。

なおテキストを右寄せにする場合は、

text-align: right;

とします。

１．テンプレートの修正

Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。

<h3 class="entry-header">●<$MTEntryTitle$></h3>

<$MTEntryTitle$> が実際にはエントリータイトルに変換されます。「●」は私が勝手につけたもので、エントリータイトルの先頭に付与されます。
この「●」を削除して、

<h3 class="entry-header"><$MTEntryTitle$></h3>

としてください。テンプレートの修正はこれだけです。他のテンプレートをお使いの方は、エントリータイトルを囲むタグに

class="entry-header"

が設定されていればOKです。

この entry-header を利用して次項でスタイルを設定しますが、補足しておくと entry-header という class 属性は不要で、

<h3><$MTEntryTitle$></h3>

として、hx（ここでは h3）タグに直接スタイルを設定することも可能です。ここでは h3 を h2 や h1 に変更する時の利便性を考慮してこのような設定にしていますが、hx タグにスタイルを設定する手法が本来的と思われます（同じ hx に異なるスタイルを設定する場合は class 属性を与えます）。

２．CSSの修正

スタイルシートで、エントリータイトル部分のスタイルを指定する entry-header に青色のプロパティを追加します。公開テンプレートを誤使用でない方も、青色部分のプロパティ設定は同じです。

/* エントリータイトル */
.entry-header {
    margin: 15px 0 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    padding-left: 17px;
    background: url(http://hogehoge/images/image.gif) no-repeat 0px 0.2em;
}

padding-left プロパティはテキストタイトルの左側に余白を作り、そこに画像を表示させるために設定します。
background プロパティで画像を表示させます。後続の設定の意味は下記の通りです。

url(?)

表示させたい画像のURL（background-image）

no-repeat

画像を繰り返さない（指定しないと繰り返し表示されます）（background-repeat）

0px

画像の左端からの表示位置（background-position）
*単に"0"でもOKですが値を設定する場合を考慮して単位を付与しています

0.2em

画像の上端からの表示位置（background-position）

カッコ内はプロパティを別々に設定した時に対応する名称です。
テキストタイトルのパディングと画像の表示位置は画像サイズによって変動するため、適宜調整してください。"17px" および "0.2em" という値を変えることで微調整できます。

またここでは説明を割愛しますが、画像をエントリーのテキスト全体に背景として表示させることも可能です。

３．非推奨

画像を表示する場合、img タグをテンプレートに設定して

<h3 class="entry-header"><img src="http://hogehoge/images/image.gif"><$MTEntryTitle$></h3>

とする手もありますが、ウェブスタンダード的には

• 文書構造とデザインの混在
• 転送バイト数の増加

の点からお勧めではありません。

具体的には、画像を他の画像に変更したい場合、HTMLに img タグを直接記述していると文書構造を表すHTMLを変更しなければなりません。また、エントリータイトルが同一ページに複数存在する場合、img タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。

CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。

前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。

サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。

CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。

１．cookie 保持スクリプトの追加

状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

このスクリプトは QuirksMode：Cookies からの抜粋です。

２．スタイル切り替えスクリプトに cookie 保持起動の追加

CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
　　　　　：
　　　（中略）
　　　　　：
  }
  createCookie('style', id, 365);
}
//-->
</script>

createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。

３．ページ読み出し時の cookie 取得処理追加

状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。

<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
    changeColumn(id);
}
//-->
</script>

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。

とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。

以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。

その理由は、現在公開しているテンプレートでは1つのスタイルシートに

• 3カラムリキッドレイアウト
• 3カラム固定レイアウト
• 2カラムリキッドレイアウト（右サイドバー）
• 2カラム固定レイアウト（右サイドバー）
• 2カラムリキッドレイアウト（左サイドバー）
• 2カラム固定レイアウト（左サイドバー）
• 1カラムリキッドレイアウト
• 1カラム固定レイアウト

の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。

<body class="layout-three-column">

CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。

body.layout-three-column {
    margin-bottom: 20px;
}
.layout-three-column #box {
    width: 850px;
}
.layout-three-column #content {
    float: left;
    width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。

つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。

以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。

１．スクリプトの追加

切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。

<script type="text/javascript">
<!--
function changeColumn(id) {
  var elements = document.getElementsByTagName('body');
  document.getElementById('links-right-box').style.display = 'block';
  document.getElementById('links-left-box').style.display = 'block';
  if(id == '3'){
    elements[0].setAttribute('class','layout-three-column');
    elements[0].setAttribute('className','layout-three-column');
  } else if(id == '3l') {
    elements[0].setAttribute('class','layout-three-column-liquid');
    elements[0].setAttribute('className','layout-three-column-liquid');
  } else if(id == '2l') {
    elements[0].setAttribute('class','layout-two-column-left');
    elements[0].setAttribute('className','layout-two-column-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2ll') {
    elements[0].setAttribute('class','layout-two-column-liquid-left');
    elements[0].setAttribute('className','layout-two-column-liquid-left');
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '2r') {
    elements[0].setAttribute('class','layout-two-column-right');
    elements[0].setAttribute('className','layout-two-column-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '2rl') {
    elements[0].setAttribute('class','layout-two-column-liquid-right');
    elements[0].setAttribute('className','layout-two-column-liquid-right');
    document.getElementById('links-left-box').style.display = 'none';
  } else if(id == '1') {
    elements[0].setAttribute('class','layout-one-column');
    elements[0].setAttribute('className','layout-one-column');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  } else if(id == '1l') {
    elements[0].setAttribute('class','layout-one-column-liquid');
    elements[0].setAttribute('className','layout-one-column-liquid');
    document.getElementById('links-left-box').style.display = 'none';
    document.getElementById('links-right-box').style.display = 'none';
  }
}
//-->
</script>

２．切り替え用プルダウンメニューの追加

１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。

　　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
 
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select> 
</form>
 
<div class="blog">
　　　　　　　　：

リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）

<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>

３．スタイルの追加

２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。

#cc {
    text-align:center;
    padding-top: 15px;
}

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

<?xml version="1.0" encoding="utf-8"?>

が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト（XML宣言なし）と異なる結果になっていました。
表示の違いについては以下のサンプルでご確認ください。

XML宣言あり／XML宣言なし

XML宣言が影響する原因は、下記の2点です。

1. XML宣言が記述されている場合に「後方互換モード」になる
2. IE6 の後方互換モード（および5.5以前）の場合、img 要素に padding プロパティが有効にならない

以下、順を追って説明します。

概要（標準準拠モードと後方互換モード・DOCTYPE宣言）

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言（文書型宣言）に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる！ホームページ作成リファレンス：標準モードと互換モードについて

カスタムチャンス! 雑記帖：文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

1番目の原因で、IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blog：xml宣言について

後方互換モードで img 要素の padding プロパティが有効にならない

そして2番目の原因として、IE6 の後方互換モードでは img 要素の padding プロパティが有効にならないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト＠CSSバグ辞典スレッド：img要素にパディングが効かない

このような経緯で、マークアップ1行目のXML宣言によって「画像枠が表示されない」という問題が発生します。

まとめ

IEで画像枠（padding）を表示するためには、下記の条件を満たしている必要があります。

1. 1行目の先頭に DOCTYPE 宣言がある
2. 標準準拠モードが有効になるDOCTYPE 宣言が記述されている

2番目の「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」の意味は、DOCTYPE宣言を1行目の先頭に記述しても、宣言内容によっては後方互換モードとして解釈される場合があります。
下記の DOCTYPE 宣言では標準準拠モードとして解釈され、画像枠が表示されることを確認しています。

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

HTML 4.01 Frameset DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Tranditional DTD（URLあり）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE宣言と標準準拠モード対応について

2番目にある「標準準拠モードが有効になるDOCTYPE 宣言が記述されている」ですが、DOCTYPE宣言と標準モードの対応状況については Microsoft の下記のサイトに掲載されています。

MSDN Online：Internet Explorer 6 における CSS の拡張の !DOCTYPEの例

該当部分を引用させて頂くと下記の通りです。

一覧の「Label / Definition / URL あり / URLあり」の組み合わせで有効（=標準準拠モード）・無効（後方互換モード）が決まります。例えば「HTML 4.01 Transitional」については「URLあり」の場合のみ有効になることがお分かりになると思います。
XHTMLについてはXML宣言を削除すれば有効になります。

*1 スクリーンショットは完成イメージです。

背景画像を固定するのエントリーで背景画像を透過させるカスタマイズを紹介しましたが、背景画像を薄く透過する方法についてご質問を頂きましたので、本エントリーで紹介致します。

以下、公開テンプレートの3カラム固定レイアウトを例にした説明です。リキッドレイアウトの場合、ここで紹介する方法では全てのカラムできれいに透過させることができませんが、部分的に透過する方法を４項で説明しています。
完成サンプルはいずれもエントリーの最後のリンクからご覧ください。

１．背景色の削除

カラム横に表示される背景色の設定（赤色部分）をを削除します。この背景色の代わりに背景画像を表示します。

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

２．背景画像の表示

CSSに body セレクタを追加して背景画像を指定します。ここでは background-attachment プロパティを追加して画像を固定していますが固定しない場合は不要です。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

３．ブログ全体を透過する

２項の body セレクタに下記の filter プロパティおよび opacity プロパティ（青色部分）の追加します。これでブログ全体を透過して背景画像を表示することができます。

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」がブログ全体の透明度を表しますのでお好きな比率に調整してください。

４．リキッドレイアウトの場合

本サイトで公開しているリキッドレイアウトテンプレートはCSSの制約上、左右サイドバーの余白部分について背景画像を薄く表示することができません。ということでここでは中央カラムのみ透過する方法を紹介します。

２項および３項の設定を行った後、.blog セレクタに background プロパティを設定してください。

.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。

2006.03.10 追記
Firefoxで正常に表示されていなかったため、CSSを修正しました（@import 文が誤ってました）。

先日、リキッドレイアウトの背景色を変更するというカスタマイズを紹介しましたが、本エントリーは中央カラムとサイドバーで異なる背景画像を表示するカスタマイズです。

便宜上、公開テンプレートを例に説明しますが、同様の構造であれば他のテンプレートでも適用可能です。なお背景画像を固定するで使用した象を背景に用いています。大きい象は中央カラム、小さい象はサイドバーに表示するためのものです。

１．中央カラム・サイドバーともにスクロールする

１．１ リキッドレイアウト

[サンプル]
背景色を変更するに従って考えると、下記のように青色の部分をスタイルシートに追加すればOKです。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

１．２ 固定レイアウト

[サンプル]
固定レイアウトの場合は、body 要素ではなく、box セレクタにサイドバー用の背景画像を設定します。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

２．サイドバーの背景画像を固定する

２．１ リキッドレイアウト

[サンプル]
サイドバーの画像を固定する場合は、１．１項の設定にbackground-attachment プロパティを追加します。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

２．２ 固定レイアウト

[サンプル]
固定レイアウトも先と同様、１．２項の設定にbackground-attachment プロパティを追加します。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

３．中央カラムの背景画像を固定する

この方法はIEの場合、画像が固定されないようですので予めご容赦ください。

１項・２項の設定では、中央カラムで固定した画像以外の背景（ブラウザを画像の上下左右）に、 body 要素に指定した背景画像が重なってしまいます。[リキッドレイアウトの失敗サンプル]

アプローチはいくつかあると思いますが、ここでは

• content セレクタに背景で白を指定して、サイドバーの背景が中央カラムに表示されないようにする
• blog セレクタに中央カラムの画像を指定

という手法を使いました。

３．１ リキッドレイアウト

[サンプル]
#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します（大きい値が上に表示されます）。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    z-index:1;
    background-color: #ffffff;
}

３．２ 固定レイアウト

[サンプル]
リキッドレイアウト同様、#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します（大きい値が上に表示されます）。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    z-index:1;
    background: #ffffff;
}

参考にさせて頂いたのは下記のサイトです。ありがとうございました。

• 1976design.com：Easy CSS drop shadows
• A List Apart：CSS Drop Shadows
• nlog(n)：アップロードした画像に影をつけるには
• POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる
• 今日の覚え書き：cssの設定で自動的に画像に影を付ける
• 花と写真とblogと。：画像に影をつけてみる。

最初の1976design.com等で図を用いて解説されているので、仕組みがお分かりになるのではないでしょうか。

１．画像のHTML記述方法

下記のように img 要素を span 要素で括り、class 属性 "shadow" を付与します。span 要素の代わりに div 要素でも構いませんが、インライン要素の方が色々と都合がいいかも？と思い、ここでは span 要素で括ってみました。p 要素でもOKです。

<span class="shadow"><img src="hogehoge.jpg" alt="hogehoge" /></span>

２．ドロップシャドウ用背景画像のダウンロード

当サイトでは用意しておりませんのでPOCHIKING*：画像に自動的に影をつけてテキストを回り込ませるからダウンロードしてください。ダウンロードしたら任意のディレクトリ（FC2ブログは固定ですね）へアップロードしてください。

３．スタイルシートの追加

スタイルシートに下記の設定を追加します。色々な方法があるようですので他のサイトの内容もお試しください。

.shadow {
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}
 
.shadow img {
    position: relative;
    left: -5px; /* 画像を左へ移動 */
    top: -5px; /* 画像を上へ移動 */
    padding: 5px; /* 画像枠 */
    background: #ffffe0; /* paddingを設定した場合の背景色 */
    border: 1px solid #999999; /* 画像の枠線 */
}

背景画像のパスは、２項でアップロードしたドロップシャドウ用背景画像のパスまたはURLを指定してください。

表示については Windows 2000/XP+IE/Firefox/Operaで確認しております。なお画像枠のpaddingについて、当サイトではIEでは正常に表示されておりませんので予めご了承ください（試験サイトで作ったサンプルでは等しく表示されましたので、CSSの別の設定と干渉しているかもしれません）。IEで画像枠を表示する場合は標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するを参照ください。

４．その他

いろいろ試していて気がついた点をいくつか。

• div で括るときは img タグの間に改行がない方が良いみたいです。
• やや上・左よりになるので、位置補正のため下記のように magrin プロパティを .shadow セレクタに設定すると良いでしょう。値は試しながら修正してください。

.shadow {
    margin: 10px 0 0 5px;
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}

2006.03.15 追記
IEで画像枠を表示する場合の記述を追加しました。

背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサンプルも作ってみました。

１．背景を固定する

CSSの body 要素に背景画像を指定し、背景画像の指定に対して下記のように青色のプロパティ background-attachment プロパティを追加します。このプロパティの値が fixed の場合、画像が固定表示されます。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

公開テンプレートの場合、この設定を styles-site.css の一番下に追加してください（場所はどこでも大丈夫だと思います）。画像の配置位置は background-position プロパティで指定します。上のリストでは「右下」を指定していますが、プロパティの値は

水平方向：左：left／中央：center／右：right

垂直方向：上：top／中：center／下：bottom

のいずれかお好きなものを指定してください（"%"指定等、他の設定方法についてはここでは割愛します）。

また上のサンプルでは background-repeat プロパティで画像を繰り返し表示しない設定になっています。水平方向に繰り返し表示する場合は background-repeat プロパティに repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を指定してください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

２．他の背景に隠れないようにする

上記のサンプルでお分かりの通り、画像の上に表示される各オブジェクトに対し背景色を指定していると部分的に隠れてしまいます。固定レイアウトは画像の影も形もありません。これは日付やエントリー部分、固定レイアウトの場合は全体に背景色として「白」を指定しているため、画像が隠れてしまう訳です。

画像を隠さないようにするためには、該当のセレクタ（.entry）の background プロパティ（下記赤色）

.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
　　　　　　：
　　　　　（略）
　　　　　　：
}

を削除してください。
固定3カラムや固定2カラムの場合は、さらに下記の赤色部分を削除してください。

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;
}
　　　　　　　　：
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

３．画像を透過する

２項の設定でかなり画像の露出度が向上しましたが、日付やサイドメニュータイトルといった background を指定しているものについては隠れてしまっているのがお分かりになると思います。そこでさらに透過指定を行うことで、画像を日付やサイドメニュータイトルの下からうっすらと表示させることができます。

下記の filter プロパティおよび opacity プロパティ（青色部分）の追加で透過することができます（方法は他にも色々あると思いますがとりあえず）。

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

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column-liquid #links-left{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
.layout-three-column-liquid #links-right{
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

3カラム固定レイアウトの場合

body {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column #links-left,
.layout-three-column #links-right {
　　　　　：
　　　　（略）
　　　　　：
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」が透明度を表しますのでお好きな比率に調整してください。また2カラムの場合は設定するセレクタが異なります（layout-two-column や layout-two-column-liquid-left 等）ので、ご注意ください。
なお半透明にする詳細については、背景を半透明にするを参照ください。

公開テンプレートに設定したサンプル（リキッドレイアウト／固定レイアウト）

画像は Suggestive Contour Gallery より拝借しました。
これぞまさしく、

他のブログ記事や情報を引用する場合に、

これは引用文です

という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、当サイトのカスタマイズ記事ではリストを表示する時によく使用しています。

実はブログを始めた当初、この引用の設定方法がわからず（CSSもよく分かっていなかった）、調べるのに結構苦労した記憶があります。この表示方法を何という単語で検索して良いのかさえ分かりませんでした。

ということで、このエントリーでは引用の設定方法について説明します。

１．引用文を blockquote 要素で囲む

HTMLでは引用を明示する意味的なタグとして blockquote 要素が用意されています。
上記の例では本文中に

<blockquote><p>これは引用です。</p></blockquote>

という指定を行うだけです。blockquote 要素の子要素として p 要素等のブロック要素が構造上必要ですが、表示についてはブラウザ依存と思われます。

blockquote のデフォルトスタイルは上下左右にインデントが付与されますので、CSSの設定を行わなくてもそれなりの表示になります。余談ですが、短い引用（テキストの両端に「"」をつける）の場合は q 要素を使って、

<q>これは引用です。</q>

とします。

Movable Type 3.1x 以降の編集画面であれば、編集画面右上にある

というリンクアイコンを使うと便利です。使い方は、引用したいテキストをマウス等で選択状態にしてからこのアイコンをクリックすると、選択状態のテキストの両端に blockquote タグが付与されます。

２．スタイルを設定する

blockquote に任意のスタイル（枠線・背景等）を与えるために、CSS（styles-site.css）に下記のように blockquote のタイプセレクタを作ります。

blockquote {
}

この中に「プロパティ」と呼ばれるものを設定して、フォントや背景・枠線等の装飾を行います。下記に設定のサンプルを示します。各プロパティの意味は右側のコメント（/* */ の部分）を参考にしてください。
これは当サイトの blockquote に近い設定内容になっています。

blockquote {
    margin: 15px; /* 枠線を表示する上下左右の空白 */
    padding: 10px; /* 枠線から文字までの上下左右の空白 */
    background: #fffff6; /* 背景色 */
    border: 1px solid #999999; /* 文字色 */
    font-size: 10px; /* フォントサイズ */
    line-height: 150%; /* 改行幅 */
}

枠線（border）については、以前書いた枠線（border）の指定が参考になれば幸いです。

スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタイルが切り替わります。

以前よりご紹介しているスタイルシート切り替えのメニュー部分のみの変更ですので、その他の、

１．スタイルシート作成

２．テンプレート修正

３．styleswitcher.js のダウンロード・アップロード

４．テンプレートに styleswitcher.js インクルードの設定

につきましてはスタイルシート切り替えの１?４項を参照ください。
ということで、ここでは５項のみ掲載します。

５．切り替えメニューの追加

各テンプレートのサイドバーに以下のタグを追加します。JavaScript によるプルダウンメニューの状態保持を行わない場合と、状態保持を行なう場合の2種類のリストを掲載します。「プルダウンメニューの状態保持」とは、ブラウザの更新や新しくブラウザを開いた時に、それまでに選択されていたプルダウンメニューと同じメニューを表示することを意味します。状態保持を行わない場合は常に一番上のメニュー（ここでは "default"）が表示されます。

状態保持を行うとユーザビリティが向上するので、当サイトでは後者（５．２項）を推奨します。

５．１ 切り替えメニュー（プルダウンメニューの状態保持を行わない）

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form>
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>

option 要素は元エントリーのサンプルに合わせてますので value 属性や値（青色部分）は適宜変更してください。
公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form>
　　　：
</form>
</div>
</div>

５．２ 切り替えメニュー（プルダウンメニューの状態保持を行う）

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。５．１との差分を青色で示しています。差分は form 要素への id 属性および、状態保持を行う JavaScript です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form id="stylesheet">
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>
 
<script type="text/javascript">
<!--
var style = readCookie('style');
var nodes = document.getElementById('stylesheet').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].value == style){
        nodes[i].selected = true;
    }
}
//-->
</script>

スタイルシート名（ここでは "Large"や "Netscapte"）は５．１項と同様に任意の名称に変更してください。なおこれらを変更しても JavaScript 部分を変更する必要はありません。

公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください（５．１と同じ）。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form id="stylesheet">
　　　：
</form>
</div>
</div>
 
<script type="text/javascript">
　　　　：

	印刷用スタイルシートにより出力の最適化を行うカスタマイズです。 左上の画像は通常のブラウザによる表示で、同じページを印刷すると左下のような出力になります（画像はブラウザの「印刷プレビュー」を選択したものです）。具体的には、印刷用のページはタイトルやサイドバー等の不要な項目を表示しないように最適化して、本文のみ印刷できるようにしています。 以下設定方法です。

１．印刷用スタイルシート追加

管理メニューの「テンプレート」をクリックし、次のページの「インデックス・テンプレート」の右側にある「新しいインデックス・テンプレートを作る」をクリック。次のページで下記をそれぞれ設定します。

• テンプレートの名前：スタイルシート・印刷用（なんでもいいです）
• 出力ファイル名：print.css
• 再構築オプション：チェックを外す
• このテンプレートにリンクするファイル：（空白）
• テンプレートの中身：スタイルシート（styles-site.css）の中身を丸ごとコピー

２．印刷用スタイルシートの修正

１項でコピーしたスタイルシートから、印刷に不要なIDセレクタおよびクラスセレクタ（サイドバー等）のプロパティを

display:none;

に変更します。公開テンプレートを例に挙げると、左カラム全体の指定は通常のスタイルシートでは

#links-left-box {
    float: left;
    width : 185px ;
}
 
#links-left {
    color: #ffffff;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

となっていますが、#links-left-box の指定を display プロパティだけに置き換えて、

#links-left-box{
    display:none;
} 

とします。#links-left は #links-left-box の内側にある要素で、表示されなくなるため削除します。そのまま残していても問題ありません。注：以前のテンプレートには #links-left-box はありませんので、#links-left に display プロパティを与えてください。
これと同じ要領で印刷時の表示が不要なものについて display プロパティを与えます。

３．テンプレートに link 要素追加

各テンプレートに印刷用の link 要素を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="<$MTBlogURL$>print.css" type="text/css" media="print" />

上記リストのように、現在の link 要素（rel 属性が stylesheet となっているもの）に青色部分を追加し、印刷用スタイルシートの link 要素を1行追加します。
スタイルシート切り替えのカスタマイズを行っている場合の link 要素追加も同様で、既存の link 要素に media="screen,tv" を追加して新しい link 要素を追加します。

４．色要素を変更

白黒でプリントする場合、色で表示の見栄えを指定している部分は出力に反映されません。このような指定を行っている場合は併せてスタイルシートを変更すると良いでしょう。例えばこのサイトではカスタマイズ記事のリストで赤色と青色を使っていますので、それぞれ下線および二重下線に変更しています。

以上です。２項のスタイルシートの修正はブラウザの「印刷プレビュー」で確認しながら少しずつ修正されることをお勧めします。