Customize in Ninja Blog

Body部分の1行目には

<div id="mainBlock">

とあります。これはこのテンプレートを画面全体のどのぐらいの位置にブログ全体を表示するかを決めるためのもののようです。これは最後の</body>の手前に閉じタグ</div>があります。

といっても分かりにくいので、下の図を作りました。
画面全体がbodyで指定される部分で、その中に水色の部分があります。これが<div id="mainBlock">～</div>が表示する部分です。



なんでBodyで全体の指定を指定しているのに、さらにブログの全体を表示するためのタグを入れているかと思うこともあります
テンプレートによりますが、この方が全体をセンタリングするときに有効なのです。

それではテンプレートを作り始めながら分析していくことにします。
初期の何も入力していないテンプレートはこのように見えていると思います。


気づいたことはありませんか？
たいていのブログはブログ全体が真ん中によって、左右に余白があります。
これは左に内容が寄ってます。
センタリングをしてないからです。

なのでセンタリングをしたいのですが、残念なことに忍者ブログのテンプレートの作成システムにはこのセンタリングの項目はないです。
なので自分で指定するしかありません。

指定はスタイルシートで行います。
まずBody部分に真ん中に表示するよう指定します。

/*BODY全体に関する設定*/
body {
text-align : center ;
}

この上でmainBlock部分全体を真ん中に寄せるようスタイルシートを記入します。
この真ん中寄せには余白を指定するmarginを利用します。

/*全体の設定*/
#mainBlock {
margin-top : 0px ;
margin-right :auto ;
margin-bottom : 0px ;
margin-left : auto ;
}

と、指定します。意味は上の余白は「0px」、右の余白は「自動で決めます」、下の余白は「0px」、左の余白は「自動で決めます」という意味になります。
左右の余白をブラウザに自動的に決めさせると、左右の余白が等しくなって結果的に真ん中によります。

結果的に上の４つmargin指定は統合することが可能なので、初期設定の幅と合わせると

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

のようになるかな、と思います。
この指定がが終わるとプレビューは次のようになります。


ここで忍者ブログ独自のテンプレート作成システムで背景色、背景画像、文字サイズ、リンク色、リンクの装飾などを決めます。
下がその場所です。


私の場合は

背景色･･･#ffffff(白)
背景画像･･･URL：http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/2
画像の位置･･･左上
画像の繰り返し･･･繰り返す
文字色･･･#656565（灰色）
文字タイプ･･･sans-serif(ゴシック)
文字の太さ･･･normal(標準)
リンクの色･･･#cc9966(薄めの茶色)
リンクの装飾･･･none（なし）
マウスが来たときのリンク色･･･#ccb17a(上よりもさらに薄い茶色)
マウスが来たときのリンクの装飾･･･underline(下線)

と指定しました。

これでスタイルシートにどのように指定されているかを見てみると、

/*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:sans-serif;
font-weight:normal;
}
/*通常のリンクの設定*/
a:link {
color:#cc9966;
text-decoration:none;
}
/*過去に見たことがあるページのリンクの設定*/
a:visited{
color:#cc9966;
text-decoration:none;
}
/*アクティブ状態のリンクの設定*/
a:active {
text-decoration:underline;
color:#ccb17a;
}
/*カーソルが合っている状態のリンクの設定*/
a:hover {
text-decoration:underline;
color:#ccb17a;
}

のようになりました(変化した部分だけを表示してます)。

この指定でプレビューを見ると次のようになります。


これで大体、全体が整ったでしょうか？

次はもう少し細かく設定を加えたいと思います。