記事タイトルを表示しているのは、
<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>
とある部分を切り取ります。
このままだとこれはこのように表示され、この日付へのリンクとなってます。
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;
}
ここまでで、記事を実際に表示する部分の改造は終了です。
なんだか少しは自分のイメージに合ってきたかな？と思います。(というか思いたいところ)
プレビューで見るとこういう風になりました。
ランキングとかアドセンス広告は無視してください。
次は、コメント投稿部分を改造しようと思ってます。
