普段GoogleChromeを使っていて、自分のブログを他のブラウザで見たことがなかった。IEで見てみたら崩れまくってたため、調整してみた。
CSSで調整
[デザイン]→[デザイン設定]→[使っているCSS名]（私の場合はシンプルホワイト両サイドバー）をクリック。内容を編集していきます。
※内容を全て選択、テキストエディタ等にコピペしてバックアップをおすすめします。もしおかしくなっても元に戻せます。
右カラムが落ちていたため、全体の幅を広げます。
・containerの幅を変更
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #333;
background:#FFF;
margin:0px;
padding:0px;
}
#container{
width:920px; ・・・・940に変更
text-align:left;
margin:0px auto 0px auto; /* Mozilla系ブラウザでセンタリング */
}
h1 {
margin:0px;
padding-top:0px;
font-weight:bolder;
font-size:30px;
padding: 5px;
}
記事部分の横幅と余白を調整します。
・contentのmargin調整
/* アーカイブページの前後リンク */
.navi {
color:#006A6A;
font-size:90%;
text-align:center;
margin-bottom:10px;
width:100%;
}
/* 記事全体 */
#content {
margin-bottom:30px;
margin-top:25px;
margin-left:10px;
margin-right:10px; ・・・・ここを追加
float:left;
width:500px;・・・・500pxに変更
}
/* エントリー全体 */
.blog {
width:100%;
}
右カラムと中央カラムの間を調整します。
・links（右カラム）のmargin-leftを調整
/* 左カラム */
#links-left {
font-weight:normal;
width:20%;
float:left;
margin-left: 5px;
margin-right: 10px;
margin-top:25px;
}
/* 右カラム */
#links {
font-weight:normal;
width:20%;
float:left;
margin-left: 10px; ・・・・20pxに変更
margin-right: 5px;
margin-top:25px;
}
/* カレンダー */
#calendar {
width:100%;
}
まとめ
とりあえずのヤッツケ感がひどいですが、なんとかカラム落ちはしなくなりました。
もっとHTMLとCSSの勉強をして思い通りのデザインで作れるようになりたいとは思いますが、根本的にデザインのセンスが無い・・・
センスを磨くほうが難しいような気が・・・
