サイドバーの背景を最後まで表示する

サイドバーの背景を最後まで表示する

Posted at August 1,2005 11:50 PM
Tag:[Background, Customize, MovableType, Template]
修正前

float 指定のマルチカラムテンプレートのデザインで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文(中央カラム)の表示より短くなった場合、背景色がそこで途切れてしまうことです。

例えば、本サイトの公開テンプレート(2カラム・右にサイドバー表示)のCSSの右サイドバーに背景色(ピンク)を追加してみます。

/* 右カラム */
#links-right{
    float: left;
    background-color: pink;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    }

この設定例で、サイドバーの表示が本文より短い場合、最初の画像のように指定した背景が途中までしか表示されません。

ということで、ページの最後までサイドバーの背景色を表示するカスタマイズ方法です。

1.画像を用意する

次のような画像を用意します。これは中央カラム(白)およびサイドバーの背景(ピンク)となるものです。サンプルのテンプレートは横幅が700pxですので、長さ700pxにしています(サンプルは縮小表示していますのでクリックして実物を確認してください)。

背景画像

この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをキャプチャソフト(フリーで色々あると思います)でキャプチャして、その一部分を切り抜いたものです。

2.画像のアップロード

作成した画像を images ディレクトリ等にアップロードします。ここでは back.jpg としています。

3.スタイルシート修正

styles-site.css を下記のように修正します。公開テンプレートでは中央カラムにボーダーを表示していますが今回の例では削除して、画像の線を使っています(無理に罫線を入れる必要はありませんが)。また冒頭に書いた links-right の background-color は不要です。

/* 3カラム全体 */
#box {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 0px;
    padding-bottom: 20px;
    width: 700px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #FFFFFF;
    background: url(images/back.jpg) repeat-y;
}
 
       : 
 
/* エントリーのある大段落(3カラム) */
#content {
    float: left;
    width: 514px;
    border-bottom: 1px solid #666699;
/*    border-left: 1px solid #666699;*/
    border-right: 1px solid #666699;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

画像は横幅いっぱいのものでなくても大丈夫だと思います。例えばサイドバーの幅の
画像を作って #box に

background: #ffffff url(images/back.jpg) repeat-y top right;

とすれば右寄りに画像が配置されます(間違ってたらすいません)。

修正後以上です。これで左のようにページの最後まできれいに表示されます。
関連記事
トラックバックURL


コメント

yujiroさん、ありがとうございました。
視覚の問題は解決できますね。
でも実質、サイドバーは短いままということしか
できないと言うことですね。
何か、空白のコンテンツを作り、のばすことを考えてみます。
本当にありがとうございました。
使わせて頂きます。

[1] Posted by まいこ : August 2, 2005 1:00 PM

>まいこさん
こんにちは。
コメントありがとうございます。
ご質問の解釈を間違っていたようで、申し訳ありません。

サイドバーの height プロパティ値に content の高さを適用されたいということであれば、次の JavaScript を各テンプレートの最後の方に挿入されてはいかがでしょうか。

<script type="text/javascript"> h = document.getElementById('content').clientHeight; document.getElementById('links-left').style.height = h + 'px'; </script>

なお、clientHeight には margin / border / padding は含まれないようです。
また上記のスクリプトは提案レベルですので動作を保証するものではございません。

以上です。
それではよろしくお願い致します。

[2] Posted by yujiro : August 2, 2005 2:30 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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