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

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

Posted at July 27,2006 12:30 AM
Tag:[CSS, Template]

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

1.概要

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

リキッドレイアウトのタイトルバナー縦幅を広げた後このようにタイトルバナー下部とサイドバーの距離が近づくか、重なってしまいます。これはリキッドレイアウトのサイドバーを絶対値指定で配置しているためです。

「絶対値指定」というのは、例えば「ブラウザの左端からxピクセルの位置から表示」という指定のことを指し、CSSの「position: absolute;」というプロパティ値で指定します。リキッドレイアウトではこのプロパティを利用して、左サイドバーは左端から、右サイドバーは右端からの表示開始位置を指定しているので、常にブラウザの両端に表示される仕組みになっています。
しかしながら上端からの表示開始位置も併せて指定する必要があるため、サイドバーの上に表示しているタイトルバナーの幅を広げると先の事象が発生します。本エントリーではサイドバー垂直方向の表示開始位置を補正して、この事象を解消します。

なおスクリーンショットでお分かりの通り、縦幅を広げても中央カラムの開始位置がタイトルバナーに追従して表示されているのは、中央カラムは絶対値指定を行っていないためです。

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

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

の赤色部分を

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

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

2.補正方法

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

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;
}
       :
関連記事
トラックバックURL


トラックバック

POSITIONプロパティに関する考察(CSS) from Molto vivace
 小粋空間テンプレートで、リキッドレイアウトは、左右のサイドバーにPOSITION:ABSOLUTEプロパティ値を使用し... [続きを読む]

Tracked on September 1, 2006 7:11 PM
コメント

 yujiroさん、早速のエントリー有り難うございます。リキッドレイアウトならではの「絶対値指定」の為というご説明、よく分かりました。どうりでただの3カラムに設定した月別アーカイブやカテゴリーアーカイブ、個別エントリ画面ではきれいに表示されてたのだと理解できました。リキッドレイアウトの調整もこれで自由にできます。感謝します。

[1] Posted by 路子 : July 27, 2006 7:12 AM

>路子さん
こんにちは。
ご連絡ありがとうございます。
この質問は過去から時々受けていました。今回まとめることができましたので、質問を受けたらこのエントリーへ誘導したいと思います。
ではでは!

[2] Posted by yujiro : July 27, 2006 10:47 AM

こんちは、おひさしぶりです。っいっても覚えてませんよね。(;´д`)

食い込みの解消法のひとつのヒントになればと思って、トラックバックさせていただきました。

レイアウトを勘案してCSSのTOP値を直接調整入力しても、例えば、Google キャッシュページなどの表示で、余計なバナーが付加されている場合などは、結局表示崩れを起こすので、そゆのが気になる人向けです。

[3] Posted by いちろう : September 1, 2006 7:21 PM

>いちろうさん
こんばんは。
ご無沙汰してます。覚えてますよ!
アドバイス、どうもありがとうございました。
また時間をみて試してみたいと思います。
ではでは!

[4] Posted by yujiro : September 2, 2006 1:22 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)