Customize in Ninja Blog

記事タイトルを表示しているのは、

<div class="EntryTitle">
<a href="<!--$entry_link-->"><!--$entry_title--></a>
</div><!-- //EntryTitle// -->

の部分です。
これを、記事詳細ページ以外では、記事詳細ページへのリンクに、記事詳細ページではリンクにしないように指定したいと思います。また、追加して、記事タイトルに見出しとしての意味づけもしたいと思います。h1はブログタイトル、h2はブログ説明文としているので、記事タイトルはh3を振ることにします。

これには、条件式を使って

<div class="EntryTitle">
<!--if_entry-->
<ｈ3><!--$entry_title--></ｈ3>
<!--/if_entry-->
<!--if_not_entry-->
<ｈ3><a href="<!--$entry_link-->"><!--$entry_title--></a></ｈ3>
<!--/if_not_entry-->
</div><!-- //EntryTitle// -->

とします。

ここまでHTMLをしてら、新しく入れた<ｈ3>に対するスタイルシートを指定します。

/*記事タイトルの指定*/
h3 {
margin:0px;
padding:2px 0px 0px 0px;
font-size:14px;
font-weight:normal;
}

さらに、リンクの状態を通常のリンクと変えて

/*記事タイトルのリンク色の指定*/
h3 a:link , h3 a:visited {
color :#503030;
text-decoration:none;
}
h3 a:hover , h3 a:active {
color :#cc9966;
text-decoration:none;
}

とすることにします。
これらのh3に関するスタイルの指定はスタイルシートの「記事ブロック用デザイン」の最後に付け加えました。

今度は日時の表示を記事タイトルの下に移動させたいと思います。
HTMLに

<span class="EntryWriteDate">
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/"><!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day--> (<!--$entry_wday-->)</a>
</span&gt

とある部分を切り取ります。
このままだとこれはこのように表示され、この日付へのリンクとなってます。

2006/03/19 (Sun)

そしてこれを次のように変更します。このとき記事編集へのリンクもつけておいてしまいます。
表示形式は、

2006年03月19日(日)　00時00分00秒　│記事編集

アンダーラインを引いたところはリンクになります。
このHTMLは次のようになります。

<div class="EntryWriteDate">
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/" title="<!--$entry_year-->年<!--$entry_mon-->月<!--$entry_day-->日(<!--$entry_youbi-->)の記事へ"><!--$entry_year-->年<!--$entry_mon-->月<!--$entry_day-->(<!--$entry_youbi-->)</a>
<!--$entry_hour-->時<!--$entry_min-->分<!--$entry_sec-->秒
│<a href="/hoge/EditEntry/<!--$entry_no-->/" title="‘<!--$entry_title-->’を編集">記事編集</a>
</div><!-- //EntryWriteDate// -->

基本はクラス指定は変化させず、div要素に変化させただけです。
これを記事タイトル下、記事本文上に挿入します。

</div><!-- //EntryTitle// -->
ここに挿入
<div class="EntryTextBox">

HTMLに挿入し終えたら、スタイルを編集しておきます。
/*記事を投稿した日が記載されている部分*/というものがスタイルシートにありますのでそこで編集します。
初期設定だと

.EntryWriteDate {
margin-left: 5px;
}

となっているのを

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

と指定しなおします。これで記事タイトル下に日付がきました。

今度は追記へのリンクを編集します。前に右寄せになっているのを左寄せにしましたが今度はリンクの色などを変えたいと思います。
左寄せにした時点でスタイルシートに

/*追記文書が記載される部分*/
.EntryPsText {
padding: 20px;
text-align: left;
}

のように指定されてます。文字サイズを少し大きくしておきます

/*追記文書が記載される部分*/
.EntryPsText {
padding: 20px;
text-align: left;
font-size:13px;
}

そしてこの部分のリンクの指定を

/*追記文書が記載される部分のリンク*/
.EntryPsText a:link {
color:#503030;
text-decoration:none;
background-color:#f5f5cc;
}
.EntryPsText a:visited{
color:#503030;
text-decoration:none;
background-color:#f5f5cc;
}
.EntryPsText a:hover {
color:#cc9966;
text-decoration:none;
background-color:#ffffff;
}
.EntryPsText a:active{
color:#cc9966;
text-decoration:none;
background-color:#ffffff;
}

のようにして、また、スタイルシートの「記事ブロック用デザイン」の最後に付け加えておきました。

最後に、クラス名だとEntryFooterとなっている部分の編集です。先ほどここから日付の部分を切り取っているのでこうなってます。

<div class="EntryFooter">
<span class="EntryUserName">│<!--$entry_name--></span>
<span class="EntryCategory">
<a href="<!--$entry_category_link-->"><!--$entry_category--></a>
</span>
<!--if_tb_receipt-->
<span class="EntryTrackback">
<a href="<!--$entry_link-->#trackback">Trackback(<!--$entry_trackback_num-->)</a>
</span>
<!--/if_tb_receipt-->

<!--if_cm_receipt-->
<span class="EntryComment">
<a href="<!--$entry_link-->#comment">Comment(<!--$entry_comment_num-->)</a>
</span>
<!--/if_cm_receipt-->
</div><!-- //EntryFooter// -->

これを、私の場合カテゴリー名が長いので、Trackback、Commentはカタカナにしてマウスを置いたときに噴出しで説明しておこうかと思います。また、コメントとタイトルの表示順を入れ替えました。さらに最後にページの一番上に戻るリンクをつけることにします。
表示のイメージは

投稿者：名前│カテゴリー│コメント：0│トラックバック：0│TOP

のような感じです。
その結果のソースはこちら

<div class="EntryFooter">
<span class="EntryUserName"></span>
<span class="EntryCategory">
<a href="<!--$entry_category_link-->" title="このカテゴリーの一覧へ"><!--$entry_category--></a>
</span>
<!--if_cm_receipt-->
│<span class="EntryComment">
<a href="<!--$entry_link-->#comment" title="‘<!--$entry_title-->’へのコメント">コメント:<!--$entry_comment_num--></a>
</span>
<!--/if_cm_receipt-->
<!--if_tb_receipt-->
│<span class="EntryTrackback">
<a href="<!--$entry_link-->#trackback" title="‘<!--$entry_title-->’へのトラックバック">トラックバック:<!--$entry_trackback_num--></a>
</span>
<!--/if_tb_receipt-->
│<a href="./#pagetop" title="このページの一番上へ">TOP</a>
</div><!-- //EntryFooter// -->

さらにページのトップに戻るために一番初めの<body>の直後に

<a name="pagetop"></a>

を入れておきます。
この部分に対応するスタイルシートも変更しておきます。

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

ここまでで、記事を実際に表示する部分の改造は終了です。

なんだか少しは自分のイメージに合ってきたかな？と思います。(というか思いたいところ)
プレビューで見るとこういう風になりました。

ランキングとかアドセンス広告は無視してください。

次は、コメント投稿部分を改造しようと思ってます。

エントリー部分(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部分が完了です。

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