久しぶりにブログデザインをちょっとだけ調整した
Monday,February 17,2014

久しぶりにブログデザインをちょっとだけ調整した

IMG_0902

普段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の勉強をして思い通りのデザインで作れるようになりたいとは思いますが、根本的にデザインのセンスが無い・・・


センスを磨くほうが難しいような気が・・・





posted by taks at 16:09 | Comment(0) | TrackBack(0) | SeeSaaカスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。