Top ＞ CSS ＞ サイドバーのタイトル背景をカラム幅にあわせて表示する
2007年1月14日

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

Posted at January 14,2007 2:39 AM
Category：[CSS]
Tag：[, , ]

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

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

１．背景画像を設定する

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

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

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

１．１ テンプレートの修正

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

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

１．２ 画像のダウンロード・アップロード

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

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

この背景画像は当サイトで配布しているテンプレートの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 では背景が最後まで表示されないようです。
下記のリンクに、ここまでの変更が反映されたページのサンプルを示します。

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

２．サイドバータイトルの幅を変更する

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

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

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

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

２．３ サイドメニューの位置微調整

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

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

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

３．カレンダーの位置を修正する

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

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

を

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

に変更して、

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

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

以上で完成です。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

背景画像がリンク切れになっています

[1] Posted by panser : January 15, 2007 3:53 AM

＞panserさん
こんにちは。
ご連絡ありがとうございました。
リンク切れ、修正致しました。

[2] Posted by yujiro : January 15, 2007 10:16 AM

エントリーテンプレートと日付テンプレートでサーバーエラー発生して困っています。

１）エントリーテンプレートでは、トラックバックを挿入すると再構築の際にサーバーエラーが発生します。
トラックバックのソース内容は下記のようにしています。

<!-- 最近のトラックバック開始 -->
<div class="border_body"><!--外枠用-->
<div class="sidetitle2" id="recenttrackbacksname">
Recent Trackbacks
</div>
<div class="side" id="recenttrackbackslist">
<MTEntriesRecentlyPinged lastn="10">
<MTEntryCategories glue=", ">
<strong><a href="<$MTEntryLink$>#trackbacks" class="cat<$MTCategoryID$>" title="[ <MTParentCategories glue = " → ">
<$MTCategoryLabel cutfirstchar="3"$></MTParentCategories> ]">
<$MTEntryTitle trimj2_to="25"$></strong></a>[<$MTEntryTrackbackCount$>]
</MTEntryCategories>
<ul>
<MTPings lastn="5" sort_order="descend">
<li><a href="<$MTPingURL$>" target="_blank" rel="nofollow" title="<$MTPingDate$> (<$MTPingTitle$>)"><$MTPingBlogName trimj2_to="20"$></a></li>
</MTPings>
</ul>
</MTEntriesRecentlyPinged>
</div>
</div>
<script type="text/javascript">
<!--
FoldNavigation('recenttrackbacks','on',false);
//-->
</script>
<script type="text/javascript" language="javascript">
<!--
generateNormalTree("recenttrackbackslist");
//-->
</script>
<!-- 最近のトラックバック終了 -->

２）日付テンプレートは、カテゴリー部分を挿入すると再構築の際にサーバーエラーが発生します。ソース内容は下記のようにしています。

<!-- カテゴリーリスト開始 --> <div class="border_body"><!--外枠用--> <div class="sidetitle2" id="categoriesname"> Categories </div> <!-- サブカテゴリー用 --> <div class="side" id="categorieslist"> <div id="categories"> <MTTopLevelCategories> <MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount"> <li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><MTHasSubCategories></div></MTHasSubCategories> <MTElse> <li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories> </MTElse> </MTIfNonZero> <MTSubCatsRecurse> </li> <MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast> </MTTopLevelCategories> </div> </div> </div> <!-- サブカテゴリー用 --> <script type="text/javascript"> <!-- FoldNavigation('categories','off',false); //--> </script> <script type="text/javascript" language="javascript"> <!-- generateSubcategoryTree("categorieslist"); //--> </script> <script type="text/javascript"> <!-- generateSubcategoryTree(); //--> </script> <script type="text/javascript"> <!-- <MTTopLevelCategories> <MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories> <MTSubCatsRecurse> </MTTopLevelCategories> //--> </script> <?php readfile("new.php"); ?> <!-- カテゴリーリスト終了 -->

上記いづれに関してのみ再構築の際にサーバーエラーが発生し、メインページをはじめ他のテンプレートに関しては正常です。

お手数ですがアドバイス頂ければ幸いです。
宜しくお願いします。

[3] Posted by panser : January 15, 2007 10:46 PM

昨日からの不具合の件でBlogを一旦削除していちからやりなおしたところ少し変化して今度は、下記のようにすると再構築の際にサーバーエラーが発生します。

１）エントリー、日付テンプレートと共に月別部分を下記のようにすると再構築の際にサーバーエラーが発生します。
月別のソースは、下記のようにしています。これは、他のテンプレートと同じものです。

<!-- 月別アーカイブリスト開始 --> <div class="border_body"><!--外枠用--> <div class="sidetitle2" id="MonthlyArchivesname"> Monthly Archives </div> <div class="side" id="MonthlyArchiveslist"> <MTArchiveList archive_type="Monthly"> <MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader> <li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter> </MTArchiveList> </div> </div> <script type="text/javascript"> //<![CDATA[ <MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader> </MTArchiveList> //]]> </script> <script type="text/javascript"> <!-- generateNormalTree("MonthlyArchiveslist"); //--> </script> <script type="text/javascript"> <!-- FoldNavigation('MonthlyArchives','off',false); //--> </script> <!-- 月別アーカイブリスト終了 -->

お手数ですがアドバイス頂ければ幸いです。
宜しくお願いします。

[4] Posted by panser : January 16, 2007 10:46 PM

＞panserさん
こんばんは。
再構築エラー（500エラー）ですが、DBにかなり負荷がかかっているのではないでしょうか。
コメントされている部品をPHP モジュール化されれば再構築の負荷は大幅に減少すると思います。
それではよろしくお願い致します。

[5] Posted by yujiro : January 17, 2007 1:47 AM

アドバイス頂き早速修正しましたところ正常に再構築できました。　ありがとうございました。　下記のようにモジュールしましたけどこれで宜しいでしょうか？

<!-- 月別アーカイブリスト開始 --> <?php readfile("http://vita.qee.jp/monthly＿list.php"); ?> <!-- 月別アーカイブリスト終了 -->
[6] Posted by panser : January 17, 2007 4:08 AM

＞panserさん
こんにちは。
ご連絡ありがとうございました。
無事に解決できたようで良かったです。
ご質問の件については問題ないと思います。
それではよろしくお願い致します。

[7] Posted by yujiro : January 17, 2007 11:07 AM

当Blogのカウンターを下記のようにしていますが文字の大きさを調整（現状より小さくしたい）したいと思いますのがどのように修正すれば良いでしょうか？お手数ですがアドバイス宜しくお願いします。

<div class="border_body"><!--外枠用--> <div class="sidetitle2" id="Countername"> Counter </div> <div class="side" id="Counterlist"> <table align="center"> <tr> <td align="left" width="200">■ Total</td> <td><img src="pcounter/pcounter.php?ct=4&dg=7&im=1"> </td> </tr> <tbody> <tr> <td align="left" width="200">■ Today</td> <td><img src="pcounter/pcounter.php?ct=1&dg=6&im=2"> </td> </tr> <tr> <td align="left" width="200">■ Yesterday</td> <td><img src="pcounter/pcounter.php?ct=2&dg=6&im=2"> </td> </tr> </tbody> </table> </div> </div> <script type="text/javascript"> <!-- FoldNavigation('Counter','off',false); //--> </script>
[8] Posted by panser : January 18, 2007 1:06 PM

追記
また、Bl.ogの全体のスタイルがIE６などでは正常なのですがMozilla Firefoxでは全体大きく崩れます。スタイルシートが影響してると思うのですがどのように修正すれば良いでしょうか？　お手数ですがアドバイス宜しくお願いします。

[9] Posted by panser : January 18, 2007 1:37 PM

誠に失礼しました。崩れる件コメントしたと同時に不具合箇所がわかりました。　行き違いで大変お騒がせしました。

[10] Posted by panser : January 18, 2007 1:46 PM

カウンターの文字サイズの変更の件、記事を拝見させて頂き解決しました。ありがとございました。

http://www.koikikukan.com/archives/2006/07/24-021206.php

[11] Posted by panser : January 18, 2007 4:09 PM

どうしてもエントリーページの右カラムのみが崩れてしまいます。先日より修正に取り組んでいるのですがどうしてもどこが悪いのか？わかりません。恐れ入りますがアドバイスの程宜しくお願いします。

[12] Posted by panser : January 20, 2007 3:08 AM

＞panserさん
こんばんは。
ご質問の件ですが、まずは Another HTML-lint gateway で文法チェック（というかタグの入れ子がきちんとできているか）してみてください。
拝見させて頂いたところでは、エラーの最後の方で div タグの対応できちんとできていないようです。
それではよろしくお願い致します。

[13] Posted by yujiro : January 20, 2007 3:16 AM

そうですか。もう一度見直してみます。ありがとございました。

[14] Posted by panser : January 20, 2007 3:57 AM

一度カスタマイズ前のテンプレートにしてみました。その場合でもエントリーテンプレートのみ崩れてしまいます。divタグの対応ではないように思えるのですがどうでしょうか？

[15] Posted by panser : January 21, 2007 2:04 AM

＞panserさん
こんばんは。
CSS をデフォルトに戻すと正常に表示されるようですので CSS の設定に不具合があるようです。

申し訳ありませんが、毎日のコメント回答で数時間要しているのと、panser さんから頂いたご質問にはこれまで多数回答致しておりますので、頑張ってご自身で解析してみて頂けますでしょうか。
それではよろしくお願い致します。

[16] Posted by yujiro : January 21, 2007 2:30 AM

あれからエントリーページをなんとか表示させる事ができました。ただ、今度はIEのフッター部分で線が最後まで表示されず切れてしまいます。また、Mozilla Firefoxではまったく線が表示されなくなりました。

[17] Posted by panser : January 22, 2007 8:18 PM

あれから更に何度も見直し不具合箇所を見つけ出す事はできなかったのですが他の箇所の不具合箇所の修正にとりかかったところ解決していました。このような事から特に原因に不明です。何度もお騒がせしてすみませんでした。

[18] Posted by panser : January 23, 2007 2:25 AM

＞panserさん
こんにちは。
ご質問の件、自己解決されたようでよかったです。
私は問題箇所を切り分ける時に、HTML lint gateway で分からない場合は、HTMLであればカラム別に内容を削除しています。3カラムであれば、まず左カラムの内容を削除して正常に表示されることを確認。それを中央カラム、右カラム、フッタがあればフッタも同じ作業を繰り返します。
CSSについては、まずは W3C のチェッカーですね。ご参考まで。

[19] Posted by yujiro : January 23, 2007 9:42 AM
コメントする

*必須



お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!