fc2ブログ




2023 081234567891011121314151617181920212223242526272829302023 10
晴れのち晴れ、、、天津日和 > WEB・BLOG > 日付を日めくりカレンダー風(?)にカスタマイズ
08
05

参考記事:「FC2ブログのエントリーの日付をおしゃれに表示2」
→記事元ブログ:Webpark


上記の記事を参考に記事タイトルの横に日付を日めくりカレンダー風に表示させてみました。

自分が忘れた時の為にFC2ブログのテンプレート工房様の配布テンプレート「standard_width_white」でのやり方メモしときます。

「standard_width_white」デフォルトテンプレの↓この辺をカスタマイズ

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="<%topentry_title>の記事を参照"><%topentry_title></a></h3>
<div class="article">
<%topentry_body>


青字部分と赤字部分を追記します。

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="date0">
<div class="date1"><%topentry_month></div>
<div class="date2"><%topentry_day></div>

<div class="e_title">
<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="<%topentry_title>の記事を参照"><%topentry_title></a></h3>
</div>
<div class="article">
<%topentry_body>


青字部分は、「FC2ブログのエントリーの日付をおしゃれに表示2」のカスタマイズをそのままコピペ。
赤字部分は、↑にfloat指定で並べるためにdiv要素で囲んでます。(任意の名前でclass指定)

次にスタイルシートに↓を追記します。

.date0{
background-image : url(画像のURL);
background-repeat : no-repeat;
float : left;
text-align:center;
width: 66px;
height: 78px;
}
.date1{
padding-top: 0.2em;
font-size : 1.5em;
font-weight : bold;
color : white;
font-family:Georgia, "Times New Roman", Times, serif;
}
.date2{
color : #777;
font-size : 1.5em;
font-weight : bold;
padding-top : 0.3em;
font-family:Georgia, "Times New Roman", Times, serif;
}
.e_title{
float: left;
margin-left:10px;
width:82%;
}


date0、date1、date2の記述は、「FC2ブログのエントリーの日付をおしゃれに表示2」でのclass指定を調整してみたんですが、私の環境ではなかなか上手く表示できなかったので、デフォルトとは変えています。
確認は、Firefox3.5でしかしてませんが、いかがでしょうか?
崩れてましたら、よければお知らせいただくとありがたいです。

あと、デフォルトテンプレでは記事下部にあったカテゴリーをタイトルの下に移動してみました。
その場合の追記は、↓こちら。(最初のソースにピンク字の部分を追記)

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="date0">
<div class="date1"><%topentry_month></div>
<div class="date2"><%topentry_day></div>

<div class="e_title">
<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="<%topentry_title>の記事を参照"><%topentry_title></a></h3>
<p class="cat">カテゴリー: <a href="<%topentry_category_link>" title="カテゴリを参照"><%topentry_category></a></p>
</div>
<div class="article">
<%topentry_body>


カテゴリーじゃなくて、タグを表示させてみてもいいかなと思います。
(「p」タグ使ってるけど、、、別に「div]でも、、、実は違いがあまりわかってないです、、、汗)

字の大きさなどをカスタマイズする場合はスタイルシートに↓を↓を追加。

.cat{
color:#777777;
font-size:0.8em;
margin:5px 15px;
text-align:right;
}


余談ですが、、、記事内にソースを表示をさせたくて最初はテキストエリアでいい方法はないかと探してたんですが、その時、見つけたいつか使ってみたいと思ったカスタマイズをメモっときます。

「テキストボックスをクリックで全選択」
→記事元ブログ:ブログカスタマイズで脱初心者blog

スポンサーサイト



タグ:FC2ブログ ブログカスタマイズ

[ 2009/08/05 22:49 ] [編集] | トラックバック(0) | コメント(0) | PAGE TOP |

コメントの投稿















管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://abixintianjindays.blog61.fc2.com/tb.php/248-b0ffcf5a