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;
}

これで完了です。
更新日を目立たせたい方はどうぞお試しください。
関連記事
[ 41 ] ありがとうございます。
いたおさん 
カレンダーのことありがとうございました。
さっそくやってみました。
出来ました~(^^)
はじめの2つだけでとってもいい感じだったので、
そのあとのは加えてませんがいいですよね?

色も好きなように変えられて嬉しいです。
[ 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に、

<!--▼新着記事用newマーク▼-->
<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="画像URL" border="0">')}
}
--></script>
<!--▲新着記事用newマーク▲-->

<head>


<!--▼▼ メイン表示 ▼▼-->
<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="ently_outline">
<h2 class="ently_title">
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照">
<!--▼newマーク▼-->
<script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>
<!--▲newマーク▲-->



<!--/topentry-->
<!--▲ エントリー(記事)▲-->


こんな感じで出来ました。
「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 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る