Customize in Ninja Blog

エントリー部分(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を編集してさらにカスタマイズすることにします。