04
12
FC2ブログのエントリーの日付をおしゃれに表示2
2008-04-12
まずHTML内の<!--topentry-->と<h2>の間に下記のようなタグを挿入します。
<!--topentry-->
<div class="date0">
<p class="date1"><%topentry_month></p>
<p class="date2"><%topentry_day></p>
</div>
<h2><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entryblock">
次にスタイルシートの内容を記述します。画像についてはこちらのものを使っていますので右クリックで保存し各自のサーバにアップしてお使いください。くれぐれも直リンクしないでくださいね。
.date0{
background-image : url(画像のURL);
background-repeat : no-repeat;
float : left;
margin : 0 0 -5px 10px;
}
.date1{
padding: 15px 15px 0 15px;
font-size : 24px;
font-weight : bold;
color : white;
margin : 0px;
}
.date2{
color : #777;
margin : 10px 0 10px 0;
font-size : 20px;
font-weight : bold;
padding : 5px 0 7px 20px;
}
また、今回は月と日でしたが下記のタグを挿入すると曜日なども表示できます。
<%topentry_year> - 年を表示
<%topentry_month> - 月を表示
<%topentry_day> - 日を表示
<%topentry_hour> - 時を表示
<%topentry_minute> - 分を表示
<%topentry_second> - 秒を表示
<%topentry_youbi> - 曜日（洋風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示
<%topentry_month> - 月を表示
<%topentry_day> - 日を表示
<%topentry_hour> - 時を表示
<%topentry_minute> - 分を表示
<%topentry_second> - 秒を表示
<%topentry_youbi> - 曜日（洋風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示
【追記】
記事のタイトルと日付が近くなるとのコメントをいただいたので対応を紹介します。
記事のタイトルと日付が近くなるとのコメントをいただいたので対応を紹介します。
.date0{
background-image : url(画像のURL);
background-repeat : no-repeat;
float : left;
margin : 0 30px -5px 10px;
}
ポイントは赤字の部分でこの数字を変えることで右側の距離を指定します。
