スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログのエントリーの日付をおしゃれに表示2

 以前「FC2ブログのエントリーの日付をおしゃれに表示」ということで紹介しましたがこのブログのように設置するにはどうしたらよいかという質問をいただいたので具体的に紹介してみます。
 まず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">
 次にスタイルシートの内容を記述します。画像についてはこちらのものを使っていますので右クリックで保存し各自のサーバにアップしてお使いください。くれぐれも直リンクしないでくださいね。
date2008-4-12.png
.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> - 曜日(和風)を表示
【追記】
記事のタイトルと日付が近くなるとのコメントをいただいたので対応を紹介します。
.date0{
  background-image : url(画像のURL);
  background-repeat : no-repeat;
  float : left;
  margin : 0 30px -5px 10px;
}
 ポイントは赤字の部分でこの数字を変えることで右側の距離を指定します。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
さっそく アドバイス頂きありがとうございます。

日付 お洒落に変更することができました。

ただ その日付と記事のタイトルの文字がレッツFC2さんのと比較すると くっつきすぎて窮屈な感じがします。

日付と記事タイトルの間に半角か全角 一文字文のスペースをいれるにはどのようにしたらいいのか 教えてもらえないでしょうか?
【2008/04/12 14:41】 | kobako #JnL/fmVo | [edit]
ご質問の件について対応法を追記で紹介しました。
どうぞご参考にしてください。
【2008/04/13 17:17】 | 管理人 #6urEx/7U | [edit]
対応法を追記してもらい ありがとうございます。

さっそく 修正してみました。ただ 30pxでは間隔が空きすぎるので
10pxで変更をしたところ ちょうど良い感じになりました。
【2008/04/13 18:17】 | kobako #JnL/fmVo | [edit]
はじめまして!monmonといいます。
ブログのテンプレート使わさせていただくことにしました。
かなり気に入ってます。サイトにも詳しいTipsなど載っていて参考になります。
なかなかFC2に特化した説明が無くて重宝しています。
これからも面白い、役に立つ情報お願いいたします!
【2008/04/27 13:42】 | monmon #- | [edit]
はじめまして、FC2ブログでテンプレート3を利用させていただいています
記事トップにフリーエリアを設置したいのですが上手く出来ません。
例えばスポンサーサイトのような
ご指導いただけると助かりますのでよろしくお願いします。
【2008/05/13 01:45】 | infobegi #- | [edit]
monmonさん

テンプレートを使っていただきありがとうございます。
最近更新できていませんが落ち着いたら再開しますので今後もよろしくお願いします。


infobegiさん

はじめまして。
ご質問の件ですが、<!--topentry--> の上の部分に<div>タグを挿入しその中にフリーエリアに記述する内容を書き込めばすべてのページのメイン部分上部に表示されるかと思います。拙い説明でごめんなさい。
【2008/05/14 23:05】 | 管理人 #6urEx/7U | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。