Customize in Ninja Blog

Body部分の指定に自分なりに少し追加します。
自分としては文字タイプが1つというのは気になるので、複数指定に変えます。

font-family :Verdana,"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",Osaka,sans-serif ;

左にあるものから順に優先的にしていされます。

また、Bodyにも余白の指定を入れておきます。

margin :0px ;
padding:0px ;

さらに行間の指定をいれます。

line-height: 150% ;

行の高さを文字サイズ×150％と指定しました。
逆に言えば、行と行の間の隙間を50％としたということになります。

それと、これはインターネットエクスプローラー(IE)独自のスタイルシートタグなのですが、付け加えておきます。

word-break : break-all ;
word-wrap :break-all ;

上の指定が文の改行の仕方について指定するもので、下が単語の途中で改行するかどうかを指定するものです。どちらも途中でも何でも改行するようにしました。
理由は、改行しないと長い単語かなにか(特にURL)がきたときに重なったり、幅が広くなってテンプレートが崩れたりするからです。

以上の変更を加えてスタイルシートのBody部分は

/*BODY全体に関する設定*/
body {
text-align : center ;
background-color:#ffffff;
background-position:left top;
background-image:url('http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/2');
font-size:12px;
color:#656565;
font-family :Verdana,"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",Osaka,sans-serif ;
font-weight:normal;
margin :0px ;
padding:0px ;
line-height: 150% ;
word-break : break-all ;
word-wrap :break-all ;
}

これで一応Body部分の指定は終わります
この状態でプレビューを見ても前回の状態とほとんど変わりありません。

今度は、ブラウザ間の誤差を修正する指定をいれます。
指定を入れる適当なものがないので新しく増やしました。

/*ブラウザ間の誤差修正*/
html * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

これは、内容的に/*BODY全体に関する設定*/の直前、「全ブロックの共通設定」の一番上にいれることにします。
入れるとテンプレートの編集機能がおかしくなるのでやめて、「トップブロック用デザイン」のすぐ上にいれることにしました。

それから、スクロールバーの指定です。
細い枠のように表示したかったのでこのように指定しました。

/*スクロールバーの色指定*/
html,body {
scrollbar-track-color : #ffffff ;
scrollbar-3dlight-color : #e6e6cc ;
scrollbar-arrow-color :#e6e6cc ;
scrollbar-darkshadow-color : #e6e6cc ;
scrollbar-face-color : #ffffff ;
scrollbar-highlight-color : #ffffff ;
scrollbar-shadow-color : #ffffff ;
}

実際にはこう見えます

背景色と似た色を使ったので違和感が少ないです。

ここで前にセンタリングの時に利用したmainBlockの指定にいきます。
いま背景画像が記事部分やサイド部分すべてに表示されてしまっています。
このままだとちょっと見づらいので記事になる部分は背景画像を見えないようにしたいと思います。これにはbackground-color(背景色)を白を指定したいと思います。

また、センタリングをするために余白でmarginを使いました。これはborderで指定される枠線の外側の余白を指定するものなので、内側も指定しておきたいと思います。内側はpaddingで指定します。

/*全体の設定*/
#mainBlock {
width:770px;
text-align: center;
margin :0px auto 0px auto ;
padding:0px ;
background-color:#ffffff;
}

ここまで指定するとこんな感じになります。


大分テンプレートらしくなってきました。
次はTOP部分の指定に行きたいと思います

追記：問題発生!!　Firefoxでは白に指定した部分が途中で途切れる!?
解決しました。下の部分に回りこみを解除するためclear:both;を入れたら直りました。

/*一番下のブロック（著作権表示が書かれる場所）の設定*/
#FooterBlock {
clear:both;
height: 200px;
text-align: center;
}