投稿日時、カテゴリーの表示位置の変更 # 28,Dec,2006 Thursday - 12:00 # |[ブログカスタマイズ]テンプレート

記事部分のデザインの準備として、投稿日時やカテゴリーの表示位置を変更しました。

フォント等を更に変更するかも知れませんが、今回はあくまで準備ということで。

日時の表記の仕方は海外のブログのパクリです（ｗ
表記に直接リンクさせずに"#"にリンクさせてます。あまりクリックすることのないリンクであろうという考えでデザイン重視です。

カテゴリーの表記位置は悩みましたが、あまり凝った事はしないというところで落ち着きました。読みずらいのが一番困りますもんね。

日時、カテゴリーの両方ともタイトルと同じブロックに配置しています。
ブロック数をいたずらに増やすとデザインが面倒なのでそうしました。
ＨＴＭＬの記述は以下の通りです。

<div class="EntryTitle">
<a href="<!--$entry_link-->">
<span class="EntryTitleFont"><!--$entry_title--></span></a>
<br>
<span class="EntryWriteDate"><!--$entry_wday_english-->,<!--$entry_day-->
<!--$entry_month_english-->,<!--$entry_year--> - <!--$entry_hour-->:<!--$entry_min-->
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/">
#</a>
</span>
|<span class="EntryCategory">
<a href="<!--$entry_category_link-->"><!--$entry_category--<>/a>
</span>
|</div>

スタイルシートは以下の通りです。

/*記事を投稿した日が記載されている部分*/
.EntryWriteDate {
text-align: left;
padding: 0px;
font-size:12px;
font-family:Helvetica,monospace;
}
/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {
margin-left: 5px;
margin-right: 5px;
font-size:12px;
font-family:Helvetica,monospace;
}

もうひとつの準備として、タイトル、記事、フッターのブロックの間隔を無くし、フッターブロックを白くしました。
テンプレートメーカーにはフッターブロックの色を指定する項目がないのでスタイルシートに直接書き込みました。

各ブロックの間隔の調節は下記の赤字の部分で出来ます。
このブログの場合は間隔を無くしたので0pxです。

/*各記事やコメント、トラックバックなどの総合のブロック部分*/
.EntryTextBox {
margin: 0px 0px;
background-color:#FFFFFF;
}

フッターブロックの設定は以下の通りです。
赤字が色の指定です。

/*記事へのリンク（コメントやトラックバック等）の背景*/
.EntryFooter {
text-align:right;
padding:5px;
font-size:12px;
background-color:#FFFFFF;
}