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

公開テンプレートにフッタを追加する（2カラム版）

公開テンプレートの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;
}

CSS の after 擬似要素で回り込みを解除する

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 にならなくなります。

2013.03.12
本文の誤記を修正しました。

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

先日紹介した 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;
}