リキッドレイアウトのサイドバー表示位置を補正する
公開テンプレートのリキッドレイアウトでサイドバーの表示開始位置を補正するカスタマイズです。
１．概要
|
左のスクリーンショットは当サイトで公開しているリキッドレイアウトの一部分です。
「絶対値指定」というのは、例えば「ブラウザの左端からxピクセルの位置から表示」という指定のことを指し、CSSの「position: absolute;」というプロパティ値で指定します。リキッドレイアウトではこのプロパティを利用して、左サイドバーは左端から、右サイドバーは右端からの表示開始位置を指定しているので、常にブラウザの両端に表示される仕組みになっています。 なおスクリーンショットでお分かりの通り、縦幅を広げても中央カラムの開始位置がタイトルバナーに追従して表示されているのは、中央カラムは絶対値指定を行っていないためです。 |
このようにタイトルバナー下部とサイドバーの距離が近づくか、重なってしまいます。これはリキッドレイアウトのサイドバーを絶対値指定で配置しているためです。参考までに、上記タイトルバナーの縦幅は、スタイルシートの
/* タイトルバナー */
#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 のフォントサイズ指定が table に反映されない問題
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宣言を記述しても後方互換モードとして解釈されるためです。
IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない
IE5.5/6.0 の後方互換モード（および5.5以前）の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。
上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。
color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform
CSSでタイトルバナーに画像を表示する
|
ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます（季節に合わない画像ですいません）。１．基本的な設定方法
バナー部分の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;とします。
