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;
}

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;
}

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

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


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

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

まずはHTMLの冒頭部分。1行目に

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

と、このように書かれてます。
これはドキュメントタイプ宣言の部分で、ここでどのHTMLでこのテンプレートが書かれているかを宣言しているのです。

忍者ブログではHTML4.01 Transitionalで書くことを宣言しています。
よって、このHTML4.01 Transitionalの記述法に従って書かないとテンプレートがうまく作れないということになります。

とはいってもHTML4.01 Transitionalはフレームが使えないだけで、非推奨のタグも使えるというものですのでたいていは大丈夫です。
XHTMLとはちょっと違うってぐらいでしょうか。
XHTMLとHTMLの違いが分からないという方は、気にしなくていいです。
気になる方はご自分で調べてください。

ここではHTML4.01 Transitionalで記述すればいいってことがわかればいいので、次の行に進んで、

<html lang="ja">

とありますが、これはlang属性というもので言語コードを指定しています。「ja」で日本語を指定しています。
これは問題ないと思います。

さらに次の行に<head>と書いてあります。
ここからヘッダ（HEAD）部分になります。
このヘッダ部分は<head>から始まって</head>までを言います。
この部分には、ブログキーワードやタイトル、使用するスタイルシートのURL、お気に入りアイコンなどの情報がかかれます。
ページ上には表示されませんが、そのページがどのような内容なのか、誰が作っているのかなどの基本的情報を表示している情報です。

忍者ブログでは、ヘッダ部分の一行目に

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

とあります。
これはmetaとあるのでmeta情報を記述しています。
meta情報にはいろいろなものを表示できます。name(http-equiv)で指定するものを、contentでその内容を示します。
ここでヘッダ部分の一行目の内容に戻ると、ここではContent-Typeをtext/html; charset=UTF-8とするとしてあります。
これは、言い換えると、「UTF-8という文字符号コードでこのページは記述しています」という意味になります。

日本語の文字コードには、3種に大別されていて、UTF-8の他にShift_JisやEUC-JPがあります。Shift_Jisで書いているのに、違う文字コードを指定するとすぐ文字化けします。
ブラウザ(簡単に言えばPC)に、「このページはUTF-8で書いてますよ」と知らせるためにこの情報を明記しているのです。
ブログパーツやブログペットを設置するときも文字コードを聞かれることがありますので、この文字コードをちょっと覚えておくといいです。

ヘッダ部分の2行目、3行目は次のようになってます。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

これは、1行めと同じようなもので、Content-Style-Typeはスタイルシートについてを、Content-Script-Typeはjavascriptについてをそれぞれ表示しています。これも文字コードと同様に、スタイルシートやjavascriptを正しく表示するために必要な情報です。

ここまではどのブログであろうがホームページであろうがほぼ同じです。
次のヘッダ部分の4行目から、忍者ブログの独自タグ使われています。

<meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->" />

これもmeta情報ですが、今度はkeywordsを表示します。

keywordsは、もじどおりそのページのキーワードです。
日記を書いているなら「日記」と書くだろうし、アフィリエイトについて書いているなら「アフィリエイト」と書く部分になります。
忍者ブログでは、このキーワードを管理画面から入力できるようになってます。
それが、<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3-->の部分に表示されます。
つまり、キーワードは３つ指定できるようになっているのです。

このキーワードの指定は、忍者ブログの管理画面から「環境設定」⇒「ブログの詳細設定」⇒「ブログのキーワード１」、「ブログのキーワード２」、「ブログのキーワード２」で指定することができます。
ご自分のページ内容にあったものを入力しておけば、自動的にパソコンで表示するときにHTMLに挿入さます。

もちろん、テンプレートのHTMLに直接記入すれば３つ以上のキーワードを指定することが可能です。その場合は、<!--$g_keyword3-->の後ろに記入していけばOKです。ちなみに、管理画面から指定した他に「日記」「写真」「風景」というキーワードを指定するときは

<meta name="keywords" content="<!--$g_keyword1--> <!--$g_keyword2--> <!--$g_keyword3--> 日記 写真 風景" />

という風にそれぞれのキーワードとキーワードの間をヒトマス空けて記入してください。

次は、

<meta name="description" content="<!--$g_explanation-->" />

となってます。また忍者ブログの独自タグが混ざってますが、今度に指定は、ブログの内容(要約)を表示するためのものです。
よくGoogleなどの検索を利用するときに表示されているのはこの部分です。
忍者ブログの場合は、ここに<!--$g_explanation-->という独自タグを使用しています。
これは、ブログの説明文章を表示するための変数ですので、ここには管理画面で入力したブログの説明文が表示されます。

多くのテンプレートはこのブログの説明文章をタイトル下に表示するようにつくってあるため、この部分をサブタイトルとして利用している方も多いと思います。サブタイトルではブログの説明というのとはちょっと違うと思った方は、この<!--$g_explanation-->を削除して、直接テンプレートに説明文や要約をいれるといいと思います。
その場合は

<meta name="description" content="個々に要約文や説明文を直接入力してください" />

となります。SEO対策などでは、ここの文章が重要になる・・・らしいです。
個人的には、SEOをやる前に内容を充実させないと意味がないとは思いますが・・・

ここで忍者ブログのテンプレートにおいてのmeta情報の指定は終わりです。
この他にも作者を示すなら、

<meta name="Author" content="作者名">

検索ロボットへの検索を拒否したい場合の、

<meta name="robots" content="noindex,nofollow">

などがあります。
ちなみに忍者ブログで作者を示すなら、<!--$plugin_profile_nickname-->という独自タグを使って、

<meta name="Author" content="<!--$plugin_profile_nickname-->">

というタグをHTMLに入れると、忍者ブログで登録しているニックネーム(管理者名)が表示されます。

また忍者ブログのテンプレートに戻って、ここからはlink情報の指定になります。
link情報はhref属性で指定したページ文書を参照し、外部スタイルシートや、他のページ文書との関連を示します。

忍者ブログでのlink情報は次の3つです。

<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://<!--$g_user_id-->/RSS/" />
<link rel="alternate" type="application/atom+xml" title="ATOM" href="http://<!--$g_user_id-->/ATOM/" />

上から順に、スタイルシート、RSS、ATOMのそれぞれのURLを示してます。
<!--$g_user_id-->という独自タグが入っていますがようは私の場合IDがstartなので
・スタイルシートアドレス･･･http://start.blog.shinobi.jp/css/
・RSSのアドレス･･･http://start.blog.shinobi.jp/RSS/
・ATOMのアドレス･･･http://start.blog.shinobi.jp/ATOM/
となります。逆に言えば<!--$g_user_id-->という独自タグは「ID.blog.shinobi.jp」と表示されるということですね。
また、スタイルシートを忍者ブログ以外から引っ張ってくるような場合には、http://<!--$g_user_id-->/css/という部分を変えればいいということになります。
テンプレートをひとつのブログで複数使うなどという場合には、ここをいじる必要がある・・・のではないかと。


この次に書かれているのはtitle情報です。
ここに示された情報が、お気に入り(ブックマーク)に表示されるものになります。
通常はブログのタイトルですね。忍者ブログでもそうなってます。

<title><!--$g_title--></title>

<!--$g_title-->が、ブログのタイトルを表示する変数です。

このあと</head>とあり、ヘッダ部分が終わります。
なんだか、細かく分析しすぎました(-_-)」
ほとんどHTMLの解説になってます。

まとめると、

• HTMLのタイプはHTML4.01 Transitional


• 文字コードはUTF-8


• キーワードは３つまでなら管理画面から入力可能


• 説明文も管理画面から入力可能


• スタイルシートアドレスは、http://ID.blog.shinobi.jp/css/


• RSSのアドレスは、http://ID.blog.shinobi.jp/RSS/


• ATOMのアドレスは、http://ID.blog.shinobi.jp/ATOM/

といった感じになります。
次は、ページとして表示されるメイン部分の<body>の部分です。