Date:2007/01/08 09:00
ブログデザインを変更してはや1ヵ月。見慣れてきたものの、いまだに違和感が・・・。それは右カラムが中途半端なところにあることだ。いろいろCSSをいぢってみたが、どうしても上に行ってくれないのだ。

そこでお願い。
どなたかCSSに詳しい方、右カラムをもっと上に(要するに、上に空きスペースを作らないように)表示させるには、どこをどう訂正すればいいのか教えてください。あ、できたら「左カラムを下げる」もついでにご教示ください。
CSSは次のページです(「...READ MORE」をクリックして下さい)。
body, h1, h2, h3, h4, form,p { margin: 0; padding: 0; }
table { border: 0; }
/* ページ全体の設定 */
body{
margin: 0px;
font-size : 10pt;
background-color: #f4dda5;
}
/* 投稿欄、ボタンの設定 */
input,textarea,select,button,submit{
font-size : 10pt;
line-height: 10.5pt ;
color: #636363;
font-family: "Verdana", "\30D2\30E9\30AE\30CE\20Pro\20W3", "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", "Osaka";
border-width: 1px;
background-color: #fafafa;
border-color: #cccccc;
}
a {
text-decoration : none ;
color : #000000 ;
}
a:hover {
text-decoration: none;
color: #FF6633;
}
/* 区切り線(コメント表示欄で使用)の設定 */
hr{
border:1px dashed #E7E3DF;
}
/* id */
#wrapper {
margin: 0 auto;
border-top: 10px solid #990000;
width: 912px;
}
#container {
padding-top: 5px;
}
/* admin */
#admin {
width: 100%;
color: #336600;
text-align: right;
}
#admin a:link {color: #669900; text-decoration: none;}
#admin a:active {color: #669900; text-decoration: none;}
#admin a:visited {color: #336600; text-decoration: none;}
#admin a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}
/* center main */
#centerWrapper {
width: 730px;
float: right;
}
#contents {
width: 100%;
}
/* title */
#header{
margin-top: 5px;
margin-bottom: 10px;
width: 548px;
height : 270px;
background: url(http://blog-imgs-10.fc2.com/u/m/a/umakara/top2.jpg) left top no-repeat #FFF;
overflow: hidden;
}
/* title detail */
h1 {
padding-top: 2px;
padding-left: 10px;
margin: 180px 0 0 0;
height: 28px;
font-size: 28px;
text-align: left;
color: #FFF;
background-color: none;
}
#header a {color: #F9C; text-decoration: none;}
/* blog description */
#site_description{
margin: 0;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
height: 20px;
text-align: left;
font-size : 10pt ;
color : #FFF;
overflow: hidden;
}
#site_description strong {
font-weight: normal;
}
#box_main {
width: 548px;
float: left;
}
#topentry {
width: 100%;
}
/* entry title */
h2 {
margin-top: 5px;
padding: 5px 10px 0px 10px;
height: 22px;
font-size: 12pt;
text-align: left;
background-color: #990000;
color: #FFF;
font-weight : bold;
}
h2 a {color: #FFF; text-decoration: none;}
h2 a:hover {text-decoration: none;}
/* entry article */
.main_txt {
padding-top: 2px;
padding: 5px 15px 8px 15px;
width: 518px;
font-size : 10pt;
color : #3D3D3D;
background-color: #FFF;
}
.main_txt a:link {color: #669900; text-decoration: none;}
.main_txt a:active {color: #669900; text-decoration: none;}
.main_txt a:visited {color: #336600; text-decoration: none;}
.main_txt a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}
.post_date {
margin-bottom: 15px;
font-size: 8pt;
color: #999;
text-align: right;
}
/* link to thema ,genre */
.community {
font-size: 8pt;
color: #999;
}
/* state (post date,etc) */
.state {
margin-top: 8px;
font-size: 8pt;
color: #C8A848;
letter-spacing : 1px;
text-align: right
}
/* comment and trackback title */
h3.entry_title{
margin-top: 5px;
padding: 5px 10px 0px 10px;
height: 22px;
font-size: 12pt;
text-align: left;
background-color: #990000;
color: #FFF;
font-weight : bold;
}
.comment {
width: 100%;
overflow: hidden;
}
/* to other pages */
.navi{
margin-top: 3px;
padding: 2px;
font-size : 9pt ;
color : #858275 ;
text-align: center;
}
.navi a:link {color: #3D3D3D; text-decoration: none;}
.navi a:active {color: #3D3D3D; text-decoration: none;}
.navi a:visited {color: #3D3D3D; text-decoration: none;}
.navi a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}
/* 両サイドバーの設定 */
/* left side */
#leftSideBar {
width: 175px;
float: left;
overflow: hidden;
}
/* right side */
#rightSideBar {
width: 175px;
float: right;
overflow: hidden;
}
/* side bar */
.side_bg{
margin-top: 5px;
width: 100%;
color : #3D3D3D ;
background: #FFF;
}
h3.side_title {
margin: 0;
padding: 2px 2px;
color : #FFF;
font-weight : bold;
font-size: 10pt;
background: #f7c114;
}
/* left_side, right_side */
.side_txt {
margin: 0px;
padding: 3px 2px;
font-size: 9.5pt;
}
.side_txt ul{
margin: 0 2px 0 2px;
padding : 0;
list-style-type: none;
}
.side_txt li{
padding: 0 0 0 13px;
background: url(http://blog-imgs-10.fc2.com/u/m/a/umakara/icon_yazi.gif) 0px 1px no-repeat;
}
.side_txt p{
}
/* 著作権表示の設定 */
#copyright{
margin-top: 3px;
width: 910px;
font-size : 8pt ;
color : #FFF;
background: #990000;
text-align: center;
}
#copyright a:link {color: #FFF; text-decoration: none;}
#copyright a:vlink {color: #FFF; text-decoration: none;}
#copyright a:hover {color: #FFF; text-decoration: none;}
/* 記事検索の設定 */
.search input{
font-size :12px;
line-height: 15px;
border-width:1px;
background-color:#fafafa;
border-color:#cccccc;
font-family: "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",Osaka ;
}
/* プロフィール画像の設定 */
.pay {
text-align: center;
margin: 5px 0px 0px 5px;
}
/* link to pagetop */
.pagetop {
text-decoration:none;
border-width: 0;
font-size: 8pt
text-align: right;
}
/*カレンダー*/
table.calender {
font-size: 13px;
margin: 1px 20px 8px 20px;
}
.calender caption {
padding: 1px 15px 0 15px;
}
.calender th {
font-weight: normal;
padding: 0 0 0.2em 0;
text-align: center;
font-family: georgia, serif;
}
.calender td {
width: 26px;
text-align: center;
padding: 1px 0;
background: #FFF;
}
.calender td a {
display: block;
font-weight: bold;
}
th#sun {
color: #CC3D3D;
}
th#sat {
color: #2996CC;
}
.calender td a:link, #calendar td a:visited, #calendar td a:hover, #calendar td a:active {
text-decoration: none;
}
.calender td a:link { background: #FFF; border: 1px solid #008000; }
.calender td a:visited { border: 1px solid #999; color: #004000}
.calender td a:hover, #calendar td a:active { background: #FFE080; border: 1px solid #FFE080; color:#FF6633; }
この記事に対するコメント
>sparrowさん
やはり<DIV>の位置とfloat設定あたりに問題があるんですね。参考にさせていただきます。
html内<div id="rightSideBar">の全てを<div id="centerWrapper">の直前に移動する。
css 「#centerWrapper」の width:730px を 548px に変更する。
css 「#rightSideBar」に margin-left:7px; を加える。
以上で如何でしょうか?
html内で、メインより右サイドの方が先に記述されてはしまいますが、表示はご要望どおりになると思います(たぶん、です。もちろん要バックアップですのでよろしくです)
>Professorさん
おっしゃる通りにすると、どういうわけか右カラムが左カラムの下に行っちゃう、つまり、2カラムになってしまうんですよ(;_;)
cssだけでなくテンプレート自体もいじられましたか? 右サイドバーの内容を表示する<div id="rightSideBar">〜</div>が中央コンテンツを表示する<div id="centerWrapper">の内側にあるのが原因のように思われます。
現在のテンプレートとCSSをテキストファイルなりなんなりにバックアップした上で、以下をためしてみてください。
1. テンプレートの、<div id="rightSideBar">から始まる右サイドバー表示部分を全部、<br clear="all" />の直前に移動させる。
2. cssの#centerWrapperのwidth: 730pxを548pxに変更。
テストできる環境がないので、これでうまくいくとは断言できませんが(前よりひどくなる可能性もあるので、バックアップは必ずとってくださいね)、ダメモトの気分になったときにお試しください。