TopCSS > 2007年1月
2007年1月14日

サイドバーのタイトル背景をカラム幅にあわせて表示する

January 14,2007 2:39 AM
Tag:[, , ]
Permalink

サイドバーのタイトル幅をカラム幅にあわせる公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。
本カスタマイズはテンプレート配布のブログをお使いでしたらどれでも(多分)適用可能と思われます。また公開テンプレートでない場合も基本的な考え方は大体同じと思われます。色々試してみてください。

下記のリンクにサンプルを用意しましたので完成例をご覧ください。効果が分かりやすいよう、ブログ左右の背景は白にしています。

1.背景画像を設定する

公開テンプレートでサイドバータイトルをカラム幅に合わせて表示する場合、大きな変更点があります。それは中央カラム両サイドにある罫線を画像を用いて表示することです。

中央カラムの罫線がサイドバーの表示内容より短い例背景画像を用いる目的は、背景画像を用いない場合、中央カラム両サイドの罫線が中央カラムの内容分しか表示されません。
もしサイドバーが中央カラムの長さを超えて表示され、さらにサイドバータイトルが中央カラムの罫線がない位置に表示されると、スクリーンショットのような期待外れの結果になってしまいます。

以下、カスタマイズ方法です。

1.1 テンプレートの修正

テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
   :
   (中略)
   :
</div>
</div>
</body>

1.2 画像のダウンロード・アップロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

ダウンロードした背景画像をトップページのあるディレクトリにアップロードしてください。

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に大体合わせています。

1.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 では背景が最後まで表示されないようです。
下記のリンクに、ここまでの変更が反映されたページのサンプルを示します。

サンプルのようになっていない状態で作業を続行すると混乱をきたす原因となりますので、必ず同じ状態にしてから次の作業に進んでください。

2.サイドバータイトルの幅を変更する

続いてサイドバータイトルの幅を変更します。変更の目的を説明しながらスタイルシートの変更箇所を表示します。

2.1 左右サイドバー全体の 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)はサイドバーの内容が中央カラムより長くなった場合の、一番下の罫線との空白です。これはお好みの値に変更してもらって構いません。

2.2 サイドメニュータイトルの罫線削除

サイドメニュータイトルの 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%;
}

2.3 サイドメニューの位置微調整

サイドメニュー本体の位置を若干修正します。

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    margin: 10px 15px 20px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

お好みに応じて値を変更してください。

3.カレンダーの位置を修正する

上記の .side を修正するとカレンダーの位置に影響が生じます(当方のスタイル設定ミスです、すいません)。カレンダーをそのまま使用されている場合は、

<!-- カレンダー開始 -->
<div class="side">

<!-- カレンダー開始 -->
<div class="sideCalendar">

に変更して、

.sideCalendar{
    margin: 0 0 15px 13px;
    _margin: 0 0 15px 5px;
}

をスタイルシートに追加してください。

以上で完成です。

Comments [21] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3