サイドバーのタイトル背景をカラム幅にあわせて表示する
公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。
本カスタマイズはテンプレート配布のブログをお使いでしたらどれでも（多分）適用可能と思われます。また公開テンプレートでない場合も基本的な考え方は大体同じと思われます。色々試してみてください。
下記のリンクにサンプルを用意しましたので完成例をご覧ください。効果が分かりやすいよう、ブログ左右の背景は白にしています。
１．背景画像を設定する
公開テンプレートでサイドバータイトルをカラム幅に合わせて表示する場合、大きな変更点があります。それは中央カラム両サイドにある罫線を画像を用いて表示することです。
背景画像を用いる目的は、背景画像を用いない場合、中央カラム両サイドの罫線が中央カラムの内容分しか表示されません。
もしサイドバーが中央カラムの長さを超えて表示され、さらにサイドバータイトルが中央カラムの罫線がない位置に表示されると、スクリーンショットのような期待外れの結果になってしまいます。
以下、カスタマイズ方法です。
１．１ テンプレートの修正
テンプレートに下記の 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;
}をスタイルシートに追加してください。
以上で完成です。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
背景画像がリンク切れになっています
＞panserさん
こんにちは。
ご連絡ありがとうございました。
リンク切れ、修正致しました。
エントリーテンプレートと日付テンプレートでサーバーエラー発生して困っています。
１）エントリーテンプレートでは、トラックバックを挿入すると再構築の際にサーバーエラーが発生します。
トラックバックのソース内容は下記のようにしています。
<!-- 最近のトラックバック開始 --> <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"); ?> <!-- カテゴリーリスト終了 -->
上記いづれに関してのみ再構築の際にサーバーエラーが発生し、メインページをはじめ他のテンプレートに関しては正常です。
お手数ですがアドバイス頂ければ幸いです。
宜しくお願いします。
昨日からの不具合の件で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> <!-- 月別アーカイブリスト終了 -->
お手数ですがアドバイス頂ければ幸いです。
宜しくお願いします。
＞panserさん
こんばんは。
再構築エラー（500エラー）ですが、DBにかなり負荷がかかっているのではないでしょうか。
コメントされている部品をPHP モジュール化されれば再構築の負荷は大幅に減少すると思います。
それではよろしくお願い致します。
アドバイス頂き早速修正しましたところ正常に再構築できました。 ありがとうございました。 下記のようにモジュールしましたけどこれで宜しいでしょうか？
<!-- 月別アーカイブリスト開始 --> <?php readfile("http://vita.qee.jp/monthly＿list.php"); ?> <!-- 月別アーカイブリスト終了 -->
＞panserさん
こんにちは。
ご連絡ありがとうございました。
無事に解決できたようで良かったです。
ご質問の件については問題ないと思います。
それではよろしくお願い致します。
当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>
追記
また、Bl.ogの全体のスタイルがIE６などでは正常なのですがMozilla Firefoxでは全体大きく崩れます。スタイルシートが影響してると思うのですがどのように修正すれば良いでしょうか？ お手数ですがアドバイス宜しくお願いします。
誠に失礼しました。崩れる件コメントしたと同時に不具合箇所がわかりました。 行き違いで大変お騒がせしました。
カウンターの文字サイズの変更の件、記事を拝見させて頂き解決しました。ありがとございました。
http://www.koikikukan.com/archives/2006/07/24-021206.php
どうしてもエントリーページの右カラムのみが崩れてしまいます。先日より修正に取り組んでいるのですがどうしてもどこが悪いのか？わかりません。恐れ入りますがアドバイスの程宜しくお願いします。
＞panserさん
こんばんは。
ご質問の件ですが、まずは Another HTML-lint gateway で文法チェック（というかタグの入れ子がきちんとできているか）してみてください。
拝見させて頂いたところでは、エラーの最後の方で div タグの対応できちんとできていないようです。
それではよろしくお願い致します。
そうですか。もう一度見直してみます。ありがとございました。
一度カスタマイズ前のテンプレートにしてみました。その場合でもエントリーテンプレートのみ崩れてしまいます。divタグの対応ではないように思えるのですがどうでしょうか？
＞panserさん
こんばんは。
CSS をデフォルトに戻すと正常に表示されるようですので CSS の設定に不具合があるようです。
申し訳ありませんが、毎日のコメント回答で数時間要しているのと、panser さんから頂いたご質問にはこれまで多数回答致しておりますので、頑張ってご自身で解析してみて頂けますでしょうか。
それではよろしくお願い致します。
あれからエントリーページをなんとか表示させる事ができました。ただ、今度はIEのフッター部分で線が最後まで表示されず切れてしまいます。また、Mozilla Firefoxではまったく線が表示されなくなりました。
あれから更に何度も見直し不具合箇所を見つけ出す事はできなかったのですが他の箇所の不具合箇所の修正にとりかかったところ解決していました。このような事から特に原因に不明です。何度もお騒がせしてすみませんでした。
＞panserさん
こんにちは。
ご質問の件、自己解決されたようでよかったです。
私は問題箇所を切り分ける時に、HTML lint gateway で分からない場合は、HTMLであればカラム別に内容を削除しています。3カラムであれば、まず左カラムの内容を削除して正常に表示されることを確認。それを中央カラム、右カラム、フッタがあればフッタも同じ作業を繰り返します。
CSSについては、まずは W3C のチェッカーですね。ご参考まで。
yujiroさんこんにちは。
いつも参考にさせていただいております。
以前にも助けていただいたのに、また甘えてしまっても良いでしょうか・・（汗）
しかも、この記事のカスタマイズとは少し内容が違ってくるのですが、
同じサイドバーのタイトルについてなので、
大変申し訳ないのですが、こちらに質問させていただいちゃいますー。
問題ありましたら削除していただいてかまいません。
ＦＣ２ブログでプラグイン対応の公式テンプレートを使用しています。
サイドバーのタイトル（見出し）をそれぞれ個別の【画像】に変更したいのですが、上手くいきません（泣）
変更したいのは、プロフィール、最近の記事、最近のコメント、月別アーカイブなどすべてです。
↓の方法を参考にしたのですが、
http://fc2blogwalker.squares.net/modules/xpwiki/?Q%A1%A7%B8%AB%BD%D0%A4%B7%A4%F2%B2%E8%C1%FC%A4%CB%A4%B7%A4%BF%A4%A4
このやり方で、とりあえず【プロフィール】のタイトルを画像に変更してみたところ、
その他のプラグイン１のタイトルもすべて同じ画像が表示されてしまいました。
個別に画像を変更するにはどのように編集したら良いのでしょうか。
使っているテンプレートは公式テンプレートの《japon》です。
↓下記のように編集しました。
<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="plg_title" style="text-align:<%plugin_first_talign>"><img src=画像のＵＲＬ/<%plugin_first_tag>.gif></dt>
<!--plugin_first_description--><dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description-->
<dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd>
<!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2-->
</dl>
<!--/plugin_first-->
<!--/plugin-->
【使用する画像のファイル名を、それぞれのプラグインタイトル名にします。】とあったので画像のファイル名は profile.gif にしました。
お忙しいと思いますので、お時間かかってもかまいません。
どうぞよろしくお願いします。
すみません・・（汗）↑そのまま記述してしまいました。
<!--plugin-->
<!--plugin_first-->
<dl class="sidemenu_body">
<dt class="plg_title" style="text-align:<%plugin_first_talign>"><img src=画像のＵＲＬ/<%plugin_first_tag>.gif></dt>
<!--plugin_first_description--<dd class="plg_header" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></dd><!--/plugin_first_description-->
<dd class="plg_body" style="text-align:<%plugin_first_align>"><%plugin_first_content></dd>
<!--plugin_first_description2--><dd class="plg_footer" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></dd><!--/plugin_first_description2-->
</dl>
<!--/plugin_first-->
<!--/plugin-->
【使用する画像のファイル名を、それぞれのプラグインタイトル名にします。】とあったので画像のファイル名は profile.gif にしました。
お忙しいと思いますので、お時間かかってもかまいません。
どうぞよろしくお願いします。
