FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

カレンダーの「更新した日」を目立たせる方法

私がリリースするテンプレートのカレンダーの「更新した日」を目立たせる方法を紹介します。

スタイルシートにこちらを加えます。

.calender td a {
background-color: #cccccc;
}

赤い部分の数値を変えれば色が変わります。

またこの色の部分を大きくしたときはもう一行加えます。

.calender td a {
background-color: #cccccc;
padding: 2px;
}

しかしこのままだとリンクされた日の幅だけ大きくなってしまうので他の日付も同じ幅にするためにさらに次も加えます。

.calender td {
padding: 2px;
}

日付も幅が皆等しくなりましたがカレンダー全体が少し膨らんでしまったと思います。次の修正をすれば小さく落ち着くと思います。

/*カレンダー*/
.calender {
color:#666;
font-size: 110%;
margin: 1em 0.8em 0;
}

この赤い部分の数値を0にします。

/*カレンダー*/
.calender {
color:#666;
font-size: 110%;
margin: 1em 0em 0;
}

これで完了です。
更新日を目立たせたい方はどうぞお試しください。

関連記事

[ 2006/01/21 17:51 ] カスタマイズ共通カスタマイズ | TB(0) | CM(12)

≪ サイト幅を変える(standardシリーズ) | HOME | 旧バージョンの修正方法 ≫

[ 41 ] ありがとうございます。

いたおさん　
カレンダーのことありがとうございました。
さっそくやってみました。
出来ました～(^^)
はじめの２つだけでとってもいい感じだったので、
そのあとのは加えてませんがいいですよね？

色も好きなように変えられて嬉しいです。

[ 2006/01/22 11:50 ] [ 編集 ]

[ 43 ] 良かったです。

綺麗にカレンダーのカスタマイズが出来てましたね。
それにしてもヘッダーの使い方が素晴らしいです。愛犬の画像がビシッと決まってますね。世界で一つだけのtabitoさんだけのカスタムブログって感じです。

[ 2006/01/22 15:10 ] [ 編集 ]

[ 569 ]

どうもありがとうございました。
念願のカレンダー設置ができました。

[ 2006/09/22 03:35 ] [ 編集 ]

[ 571 ] > あやさん

こんばんは、あやさん。
念願のカレンダーを設置できましたか。お役に立てて光栄です＾＾

[ 2006/09/22 23:15 ] [ 編集 ]

[ 996 ]

カレンダーではないのですが、新着記事に「NEW」マークを付けて目立たせているテンプレートを良く見かけるので組み込んでみました。

こちらも是非記事にして下さい！

HTMLに、


<script type="text/javascript"></script>

<head>




<div class="ently_outline">
<h2 class="ently_title">
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照">

<script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>


～



こんな感じで出来ました。
「nt=24;」が時間なので12にすれば12時間だけ付きます。

<img src="画像URL" border="0">の部分は画像無しなら、
<font color="好きな色" size="希望の文字の大きさ">NEW!!</font>
でOKです。
いかがでしょうか^ ^

[ 2007/01/16 09:33 ] [ 編集 ]

[ 999 ] > ちゃんさん

有難う御座います、ちゃんさん＾＾
素晴らしいです！これを記事に掲載させてもらいますね。
皆がアイデアを出し合いより良いものを作る。私が理想とするサイトのあり方に近づき非常に嬉しいです＾＾

ちゃんさん本当に有難う御座いました。
そしてかどりんさんのアイデアも勿論記事にさせてもらいます＾＾

[ 2007/01/17 01:03 ] [ 編集 ]

[ 1019 ] 参考になります

こんにちは。
前回、横カレンダー設置に挑戦して今回もまたいろいろとやってみました。更新日を目立たせるのカスタマイズでこちらの記事を参考にさせていただきながら、更新日を太字で目立たせるカスタマイズをやってみました。
ちゃんさんのカスタマイズも挑戦してうまくできたようです。
ありがとうございました。

[ 2007/01/21 16:59 ] [ 編集 ]

[ 1033 ] > 和（ﾅｷﾞ）さん

こんばんは、和（ﾅｷﾞ）さん。
横カレンダーやNEWマークに限らず、様々なカスタマイズを自分流に応用されてますね。
これは見事な和（ﾅｷﾞ）さんだけのオリジナルテンプレートですよ＾＾

[ 2007/01/22 01:25 ] [ 編集 ]

[ 6970 ] 更新日に下線

いつもお世話になっています。
アメーバ・ブログのカレンダーのように、更新日に下線がつくカスタマイズを教えて頂けないでしょうか？

ちなみに、私が毎日楽しみに拝見している北斗晶さんのアメーバ・ブログです。
http://ameblo.jp/hokuto-akira/

あっ、私は鬼嫁ではありませんよ。（自爆）

[ 2009/11/14 15:15 ] [ 編集 ]

[ 6980 ] > 豪州サンディさん

スタイルシートの末尾にこれを加えてください。

.calender td a:link {
text-decoration:underline;
}

北斗晶さんのブログってアメーバ芸能人ブログで総合アクセス一位なんですね＾＾

[ 2009/11/15 00:47 ] [ 編集 ]

[ 6992 ] いたお師匠

思い通りのカレンダーになりました。
有難うございました！

[ 2009/11/15 13:40 ] [ 編集 ]

[ 6999 ] > 豪州サンディさん

思い通りになって良かったです＾＾
私も英語学習を頑張らなければ＾＾；

[ 2009/11/15 23:17 ] [ 編集 ]

コメントの投稿