Customize in Ninja Blog

実際に作ってみたものはこちらになります。

<div class="PageLinkBlock">
<!--if_entry-->
←<!--pagelink_10-->
NO.<!--$pagelink_10_link-->
<!--/pagelink_10-->→
<!--/if_entry-->
<!--if_not_entry-->
<!--pagelink_10-->
<!--$pagelink_10_link-->P
lt;!--/pagelink_10-->
<!--/if_not_entry-->
</div><!-- //PageLinkBlock// -->

<!--if_entry-->～<!--/if_entry-->と<!--if_not_entry-->～<!--/if_not_entry-->を使って、ページごとに表示を変えるように指定しました。
これで、カスタマイズ完了です。
詳細記事ページだとこのリンクは記事NOの前後５件のリンクになるので、ちょっと表示を変えたかったのです。

3/22追記：どうも10ページを表示させるものと前後5ページを表示させるものは別物みたいです。これはたぶん10ページのほう

エントリー部分(id=EntryBlock)の冒頭にあるページリンク

<div class="PageLinkBlock">
<!--pagelink_10--> [<!--$pagelink_10_link-->]
<!--/pagelink_10-->
</div><!-- //PageLinkBlock// -->

は、前後5ページ分のリンクだそうです。
初期設定だと「[1][2][3]・・・」のように表示されているもののようです。
[]でくくられれているが味気ないし、ページリンクだということをもうちょっと分かるようにしてみようかと思います。

<div class="PageLinkBlock">
<!--pagelink_10-->*頁<!--$pagelink_10_link-->　<!--/pagelink_10-->
</div><!-- //PageLinkBlock// -->

という感じにしてみました。
実際の表示「*頁１　*頁２　*頁３････」のように表示することにしました。
(3/20追記：前後５ページへのリンクの表示をページ別表示ににあるとおり、表示を変えました)

この10ページリンクの下に<!--entry-->とありますので、ここからが本格的に記事を表示させる部分です。

まずは、忍者ブログの編集機能を利用してみます。

編集機能はこのような感じになってます。
ある程度はありますが、あまり細かくは設定できなそうです。
とりあえずここでは
全体の背景色･･･#ffffff(白)
全体の背景画像･･･　繰り返しなし　位置：左の中央
記事タイトルの背景色･･･#f5f5dd(ベージュ)
記事タイトル文字･･･サイズ：14px　色：#503030(こげ茶)
記事タイトル余白･･･上下右すべて0px　左は20px
記事タイトル周りのボーダー･･･線を引く　上：0px　右：0px　下：1px　左：0px　色：#cccccc(灰色)
記事ブロックの背景色･･･#ffffff(白)
記事ブロックの背景画像･･･画像使用なし
記事本文の文字･･･サイズ：12px　色：#656565(濃灰色)
記事へのリンク部分の文字･･･サイズ：10px　色：#503030(こげ茶)
記事とリンクの境界線･･･線を引く　太さ：1px　色：#cccccc(灰色)
としました。これをプレビューで見るとこんな感じになります。（記事のアイコンが入ってない状態ですが･･･）

なんだかちょっと変です。それはこれからスタイルシートで直すこととします。

設定終了後の「記事ブロック用デザイン」のところのスタイルシートをみてみます。
まずは一番上の/*記事繰り返し処理全ての部分の設定*/です。
設定終了後は青字の部分はありません。青字は追加したところです

#EntryBlock {
width: 550px;
float: left;
text-align: left;
margin:0px;
padding:0px;
}

これは余白の指定を追加しただけです。

次は、/*記事表示部分の背景や余白等の設定*/です。

.EntryInnerBlock {
padding: 10px;
text-align: left;
margin:5px 0px 5px 0px ;
}

これも余白の設定の追加のみです。

こんどは/*各記事タイトル部分の設定*/の指定になります。

.EntryTitle {
text-align: left;
border-style:solid;
background-color:#f5f5dd;
font-size:14px;
color:#503030;
padding-top:0px;
padding-right:0px;
padding-bottom:0px ;
padding-left:20px ;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:1px;
border-left-width:0px;
border-color:#cccccc;
line-height:20px;
}

paddingやborderの要素は統合したくなりますが、編集機能が使えなくなりそうなのでそのままにします。
追加は行間の指定です。

/*各記事やコメント、トラックバックなどの総合のブロック部分*/は設定後の指定のままです。

.EntryTextBox {
margin: 5px 0px;
background-color:#ffffff;
}

/*記事本文が記載される部分*/も今のところは設定後のままです。

.EntryText {
padding: 10px;
font-size:12px;
color:#656565;
}

/*追記文書が記載される部分*/は追記があるときの詳細記事へのリンクです。右寄せになっているのを左寄せにします。

.EntryPsText {
padding: 20px;
text-align: right;
}

これは右寄せになっているので、左寄せにすることにします。

.EntryPsText {
padding: 20px;
text-align: left;
}

これで左寄せになりました。

今度は/*記事へのリンク（コメントやトラックバック等）の背景*/とあります。
各記事の一番下にあるコメント数などを表示してあるところです。
ここは、編集機能で設定したborderがちょっと変なので、直したいと思います。

.EntryFooter {
text-align:right;
padding:5px;
border-style:solid;
color:#503030;
border-top-width:1px;
border-color:#cccccc;
font-size:10px;
border-left:0px;
border-right:0px;
border-bottom:0px;
}

枠線をこの部分の￣にだけ表示するようにしました。

以下のスタイルシートは、後ほどHTMLを改造してから使うことになる･･･と思います。今のところはこのままで。

/*記事の投稿者名が記載されている部分*/
.EntryUserName {
}
/*記事を投稿した日が記載されている部分*/
.EntryWriteDate {
margin-left: 5px;
}
/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {
margin-left: 5px;
}
/*記事へのコメントリンクが記載されている部分*/
.EntryComment {
margin-left: 5px;
}
/*記事へのトラックバックリンクが記載されている部分*/
.EntryTrackback {
margin-left: 5px;
}

最後に/*次の記事やHOMEへのリンクが表示される背景部分*/です。
ナビの部分なので文字サイズを他の部分より少し小さくしておこうかなと思います。

.PageLinkBlock{
text-align:center;
padding:10px;
margin:5px 0px;
font-size:10px;
}

これをプレビューすると以下の感じになります。


このくらいで大体のスタイルシートの指定は終わりました。
でも、これだと個人的に使い勝手が悪いので、次回HTMLを編集してさらにカスタマイズすることにします。

実際にHTMLを改造する前に</div>のあとに注釈を入れておくことにします。
例えばmainBlockなら

<div id="mainBlock">
ここに内容
</div><!-- //#mainBlock// -->

のようにして閉じタグを分かりやすくしておきます。
mainBlock以外にはTOP部分しか編集してないのであとはTOP部分だけこれをしておきます。
他の部分はやらないで置くと自分がどこまで編集したかが分かります♪…ということもあります。
これは、</div>をつけるたびにやっておくと便利です。

また、「ここからここまではエントリーブロックです」のようなメモもつけておくと便利かもしれません。

閉じタグの注釈と合わせると、トップ部分は次のようにしてます。

<!-- ▼TOP部分▼ -->
<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div><!-- //TopTitle// -->
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div><!-- //TopExplanation// -->
<div align="right">
<a href="<!--$g_url-->hoge/">ログイン</a>│<a href="<!--$g_url-->hoge/Logout/">ログアウト</a>
</div><!-- //align-right// -->
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

こういう風にしておくと、後で見直すときに少しは楽になります(^^v

注釈を付けたら、さっそくコメント編集時に見える部分を変更します。

トップ部分を改造する前に、そっとしておいたタグをここでいじることにします。
<!--if_not_edit-->～<!--/if_not_edit-->の部分です。<!-- ▼TOP部分▼ -->～<!-- ▲TOP部分▲ -->でくくったとしたら、<!-- ▼TOP部分▼ -->の直前に<!--if_not_edit-->があるはずです。
また、<!--/if_not_edit-->のタグは、大分下のほうに行って「コメントを編集する」という言葉がある2.3行上にあります。

これは前にも書いたとおり、忍者ブログの独自タグで、このタグの間に入るものは「コメント編集のページ以外で表示される」という意味らしいです。
これに対応するというか、逆の意味、つまり「コメント編集のページでのみ表示される」というものが<!--if_edit-->～<!--/if_edit-->になるとあります。
<!--/if_not_edit-->が探せたら、そのすぐ下に<!--if_edit-->があると思います。<!--/if_edit-->は、<div id="FooterBlock">の上辺り、もうHTMLの最後のほうにあります。

さぁて、ちょっと混乱してきたので、HTMLの略図を書きます。

<div id="mainBlock">
<!--if_not_edit-->
<!-- ▼TOP部分▼ -->
<div id="TopBlock">
タイトルなどを表示
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

<!-- ▼プラグイン部分▼ -->
<div class="PluginBlock">
プラグインカテゴリー１から５を表示
</div><!-- //PluginBlock// -->
<!-- ▲プラグイン部分▲ -->

<!-- ▼エントリー部分▼ -->
<div id="EntryBlock">
記事・コメント投稿フォーム・コメント・トラックバック・ページリンクなどを表示
</div><!-- //EntryBlock// -->
<!-- ▲エントリー部分▲ -->
<!--/if_not_edit-->

<!-- ▼コメント編集部分▼ -->
<!--if_edit-->
コメント編集ページ
<!--/if_edit-->
<!-- ▲コメント編集部分▲ -->

<!-- ▼フッタ部分▼ -->
<div id="FooterBlock">
<!--CM1--> <!--CM2-->
</div><!-- //FooterBlock// -->
<!-- ▲フッタ部分部分▲ -->
</div><!-- //mainBlock// -->

大体こんな感じになっているかと思います。
これをどうするかというと、<!--if_not_edit-->と<!--/if_not_edit-->つまり上の2つの緑色のタグは削除します。
そして赤く示してあるタグを<!-- ▲コメント編集部分▲ -->の下に移動します。

その結果・・・

<div id="mainBlock">

<!-- ▼TOP部分▼ -->
<div id="TopBlock">
タイトルなどを表示
</div><!-- //TopBlock// -->
<!-- ▲TOP部分▲ -->

<!-- ▼プラグイン部分▼ -->
<div class="PluginBlock">
プラグインカテゴリー１から５を表示
</div><!-- //PluginBlock// -->
<!-- ▲プラグイン部分▲ -->

<!-- ▼エントリー部分▼ -->
<div id="EntryBlock">
記事・コメント投稿フォーム・コメント・トラックバック・ページリンクなどを表示



<!-- ▼コメント編集部分▼ -->
<!--if_edit-->
コメント編集ページ
<!--/if_edit-->
<!-- ▲コメント編集部分▲ -->

</div><!-- //EntryBlock// -->
<!-- ▲エントリー部分▲ -->

<!-- ▼フッタ部分▼ -->
<div id="FooterBlock">
<!--CM1--> <!--CM2-->
</div><!-- //FooterBlock// -->
<!-- ▲フッタ部分部分▲ -->
</div><!-- //mainBlock// -->

となります。
これでコメントの編集のときにも、タイトルなどが表示された詳細ページのままになる・・・ハズです。

まずは、HTMLの確認から・・・
HTMLのBody部分の最初は

<body>
<div id="mainBlock">
<!--if_not_edit-->
<div id="TopBlock">
<div id="TopTitle">
<a href="<!--$g_url-->"><!--$g_title--></a>
</div>
<div id="TopExplanation">
<!--$g_explanation-->
</div>
</div>

続く・・・

2行目のmainBlockの指定までは終わっているので次は3行目からになります。
3行目の指定は忍者ブログの独自タグです。
<!--if_not_edit-->～<!--/if_not_edit-->
の間の「～」に入るものはコメント編集のページ以外で表示されるという意味です。
これは後々いじることになりますが、今はそっとしておきます。

次にTOP部分の編集に入ります。
編集はまず編集画面でできるものから先に指定してしまいます。

ここでは、私の場合
背景色･･･#FFFFFF(白)
背景画像･･･未使用
タイトル文字サイズ･･･24px
タイトル文字色･･･#cc9966
高さ･･･100px
に指定しました。

↑が指定した結果になります。タイトルが大きくなりました。
そのせいかすこし上に詰まって見えてしまってます。
また、下の記事部分やサイド部分との境がなくちょっとぼやけた感じがするのでここにも枠線を下に指定したいと思います。

また、スタイルシートのほうは次のようになりました。

/*一番上のブロック（タイトルが書かれる場所）の設定*/
#TopBlock {
width:770px;
height:100px;
text-align: left;
background-color:#ffffff;
}
/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 0px 0px 20px;
font-weight:bold;
font-size:24px;
color:#cc9966;
}
/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 10px 0px 0px 20px;
}

まず、TOP部分全体を指定しているのはTopBlockの部分なので、ここに枠線の指定を加えます。
また、上に詰まった感じをなくすために余白を指定します。

#TopBlock {
width:770px;
height:100px;
text-align: left;
background-color:#ffffff;
margin:0px;
padding:10px;
border-bottom:3px double #e6e6cc;
}

これで、TOP部分の下に2重の線が引かれると思います。

次の/*ページタイトル文字部分の設定*/はスタイルシートはこのままでよいと思いますが、外側の余白もついでなので指定しておき

/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 0px 0px 20px;
font-weight:bold;
font-size:24px;
color:#cc9966;
margin:0px;
}

とします。同様に/*ページタイトルの下に来るブログの説明文書*/にも外側の余白の指定をしておきます

/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 10px 0px 0px 20px;
margin:0px;
}

ここまででとりあえず終わりにしてもいいのですが、見栄えを変えて機能を追加したいのでもう少し今度はまたHTMLを編集してみます。

先ほど上で表示したTOP部分に見出し用のタグを入れます。
見出しはその部分がページの中で重要ですよという意味を持ちます。
文字サイズを変えるだけではないのでご注意を・・・

<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div>
</div>

<h*>と指定したのが乱しようのタグですが*の数字の部分が小さいほど重要度が増します。*は6まで設定できます。

この上で、タイトル部分の文字のリンクの指定を行います。
全体のリンク指定だと、カーソルが上に来たときにアンダーラインが出てしまうのでここではそれを消すことにします。
また、特にリンクだからといって色も変えないように設定しようと思います。

それではスタイルシートに次の指定を加えます。

h1 {
margin:0px;
padding:0px;
font-size:24px;
}
h1 a:link, h1 a:visited {
color :#cc9966;
text-decoration:none;
}
h1 a:hover, h1a:active {
color :#cc9966;
text-decoration:none;
}
h2{
margin:0px;
padding:0px;
font-size:12px;
font-weight:normal;
}

これを「フッターブロック用デザイン」とある直前、「トップブロック用デザイン」の項目の最後に入れます。

最後にログイン・ログアウトのリンクを作ろうと思います。

<div id="TopBlock">
<div id="TopTitle">
<h1><a href="<!--$g_url-->"><!--$g_title--></a></h1>
</div>
<div id="TopExplanation">
<h2><!--$g_explanation--></h2>
</div>
<div align="right">
<a href="<!--$g_url-->hoge/" title="管理部屋に入る">ログイン</a>│<a href="<!--$g_url-->hoge/Logout/" title="管理部屋から出る">ログアウト</a>
</div>
</div>

上の青い部分が付け加えたところです。

以上でTOP部分が完了です。

↑のようにログイン・ログアウトボタンが無事設置できました(＾＾)

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

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

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


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

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