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

リキッドレイアウトのサイドバー表示位置を補正する

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

１．概要

左のスクリーンショットは当サイトで公開しているリキッドレイアウトの一部分です。 このリキッドレイアウトでタイトルバナーの縦幅を広げると、

このようにタイトルバナー下部とサイドバーの距離が近づくか、重なってしまいます。これはリキッドレイアウトのサイドバーを絶対値指定で配置しているためです。 「絶対値指定」というのは、例えば「ブラウザの左端から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;
}
　　　　　　　：