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

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ヶ所）を変更します。

.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;
}

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

上の 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 の赤色で示したサイドバーの幅を、お好みの値に変更します。

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

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

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

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

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

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

/* 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;
}

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

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

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

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

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

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

２．リキッドレイアウト

２．１ 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;
}

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

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

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

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

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

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

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

２．２ 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;