KaRaKuRy

アクセスカウンタ

zoom RSS カレンダーの今日の日付に背景色を入れる。

<<   作成日時 : 2008/10/03 10:36   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 4 / トラックバック 3 / コメント 33

「カレンダーの特別な日付に目印をつける」の応用、というより、こちらが基本。
カレンダーの今日の日付に色を塗ります。

欠点が一つ。今月に入ってからまだ記事を書いていない場合は、今月分のカレンダーがないので何も起きません(あたりまえか)。
それでもよければ、まずは↓をフリースペースに貼り付け。

<script type="text/javascript"><!--
function colorToday(){
if(document.getElementById("calendar")){
var today = new Date();
var nen = today.getFullYear();
var tuki = today.getMonth()+1;
var hi = today.getDate();
var cal = document.getElementById("calendar");
var cap = cal.getElementsByTagName("caption")[0];
var aa = cap.getElementsByTagName("a");
var st = "";
for(var i=0; i<aa.length; i++){
st += aa.item(i).firstChild.nodeValue;}
var yr = st.match(/\d{4}/);
var mth = st.match(/年 (.?\d)月/); mth = RegExp.$1;
if(nen==yr && mth==tuki){
var td = cal.getElementsByTagName("td");
dd = new Date(yr, mth-1, 1);
var d= hi + (dd.getDay() -1);
//【デザイン設定】
  td[d].style.backgroundColor="#CCFFCC";
}}}
colorToday();
// --></script>

貼っただけで今日の日付の背景色が薄緑色になるはずです。
ならないよーという人は、たぶん場所が悪いので別のフリースペースに貼り直してください。

色を変えたい場合は、水色の行の #CCFFCC の部分を書き換えれば好きな色にできます。
色の指定は、「#」の後ろにアルファベットや数字を6個並べて書きます。→色見本
画像を使いたい人や、枠線を入れたい人は、「カレンダーの特別な日付に目印をつける」の「目印のつけかたのデザイン設定」をみてくださいね。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 4
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた
ナイス

トラックバック(3件)

タイトル (本文) ブログ名/日時
カレンダーの今日の日付に・・・
KaRaKuRyさんの「カレンダーの今日の日付に背景色を入れる。 」の応用で、 ブログ左上についてるカレンダーの、 今日の日付に♪チビアイコンをつけることと、日付の色を変えることの説明です。 ...続きを見る
welcome to harumi's ...
2009/01/23 10:40
今日の日付に、背景色を指定する。
カレンダーの今日の日付に、背景色を指定するカスタマイズの紹介です。 KaRaKuRy 様 : カレンダーの今日の日付に背景色を入れる。 参照記事です。 ...続きを見る
Gift from the Sea
2009/07/04 10:18
カレンダーに背景を付ける
本記事はCSS編集に関してのメモです。 ...続きを見る
Nicotto Life
2015/06/20 08:51

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(33件)

内 容 ニックネーム/日時
これまた凄い!
でも、これだけのソースをフリースペースに貼ると何が何だか分からなくなりそう!それでなくても自分で作ったソースを理解してないのにぃ〜
そう言えば以前にカレンダー内に背景画像を入れる記事があったはず!
もう一度見てみたいのでURLでいいのでお願いしますだ!
東の外れ
2008/10/03 12:05
カレンダーの背景に画像を貼るURLどぞー。
JavaScript、自分でもどこに何おいたか忘れるので、<!--● 今日の日付に色をつける -->とか、<!-- ここまで -->とか注を入れていますよ。
ゆき
URL
2008/10/03 13:12
おぉ〜♪
日付背景に色!
これもいいっ!
♪ な〜んでもや〜りた〜がり〜 ♪
はいじ
2008/10/03 14:22
これは簡単です!貼るだけ!
効果もちょこっとだけど〜。
ゆき
2008/10/03 18:53
おはよう☆
はい!ありがとうございます。
暇をみてチャレンジしてみます。
東の外れ
2008/10/04 10:44
うーん、自分で改めて読んでみると、結構分かりにくい記事ですね(何)。お役にたてばよいのですが。
ゆき
2008/10/04 22:11
こんにちは
今日初めて知りました、ゆきさんの記事をブログ管理で見て自分のブログを見ると、10月が有りません???と思い、ゆきさんの記事の初めに書いてありますね、今月の記事がなければカレンダーが無いことを、私はカレンダーなので月が変わると必ず変わると思っていました。
Excelみたいにtodayとかで入れられないのですかね。
もし出来るなら教えてください。
masami33
2008/10/05 18:15
入れるって、最新月のカレンダーがまだない場合に、JavaScriptでカレンダーを入れるということですか?
それともExcelのtoday()というと、今日の日付呼び出すだけ(つまり「今日は○年○月○日です」というメッセージを表示させる感じ?)でしょうか?
前者だとちょっと難しいですね。多分できなくはないけど、上の記事の仕掛けぐらいのものを作らなければならないです。
サイドバーのカレンダーはちょうどExcelで作れるような、たとえば10月だと7列×6段のマス目の表なのです。それを丸ごと書き出す仕組みをつくらなければなりません。
後者はわりと簡単です。JavaScriptにもtoday()みたいなのがあります。そのままだと日本人には分かりにくい感じで表示されるので、多少加工しないといけないですけどね。
ゆき
2008/10/05 21:30
今晩は、表現があいまいですみません、Excelのtodayはパソコンの日ずけを見ていますよねそれと同じようにと言う意味だったのです、ごめんなさい前者の方でした、ブログは月別リンクで確認できるので、カレンダーはやっぱしその月のカレンダーかなと思っていました。
ごめんなさい、無知だからついつい、ゆきさんに頼ってしまいでもおかげさんでなんとなく構造が解って来ましたが物凄く頼りにしています、これからもよろしくです。
masami33
2008/10/06 22:23
ちぃ〜す☆
画像は入れる事が出来ました!
まあ、仮の画像ですが、また一つおりこうさんになりました←ほんまか?(笑)
東の外れ
2008/10/07 13:23
こんにちは!
はいじさんのブログから飛んで参りました!
便利な楽しい機能が沢山あるんですね
このカレンダーの日付の色は、さっそくやってみました。
いい事を教わりました、ありがとうございます(^-^)ノ
マク
2008/10/07 17:38
> masamiさん
そうそう、ウェブリブログのカレンダーは、ほったらかしておくと3ヶ月前のカレンダーとかになります^^;
おぉう、カレンダーを作るほうですか。そうですね、そっちもやっぱりtoday()みたいなのを最初に使います。今日の日付を読み込んで、ブログに表示されている月を較べて違っていた場合カレンダーを作表…となるので。
できそうだったら、そのうち作ってみます。
ゆき
2008/10/07 19:30
> 東の外れさん
お疲れ様です〜。
見るたびに、トップページのにぎやかさが増している!
ゆき
2008/10/07 19:35
> マクさん
「おしゃべりなシッポたち」のマクさん、いらっしゃいませ〜。
こっそり覗かせていただいてます^^
うちのブログには可愛いアイドルがいませんが(笑)、お役に立ちそうなものがあれば嬉しいです。またどうぞー。
ゆき
2008/10/07 19:41
 初めまして。
 ブログ記事内で文字(名前であったり、こちらとか)をクリックするとリンク先へ飛ぶ方法を教えてください。
珊底羅
2008/10/08 22:46
珊底羅さん、いらっしゃいませ。
記事内のリンクでしたら、ここで書くより、Biglobeの公式ブログの「まーさのワンポイントレッスン」の説明が画像つきでわかりやすそう。
URLをクリックして、見てみてください。
わからないところがあったら、またきてくださいね。
ゆき
URL
2008/10/08 23:19
ゆきさ〜ん!
おはようございます♪
「日付の色つけ」
できました(^^)v

ほんとに“貼っただけ”でできましたぁ。
はいじ
2008/10/09 07:53
ゆきさん、あれれなことが・・・・(^^;ゞポリポリ
トップページには色が付いたんですけど記事ページには色が付いてないんですけどなんででしょ?
はいじ
2008/10/09 08:29
んー??
もしかして記事ページでそのフリースペースをOFF(非表示)にしてませんか?多分AMAZONのと一緒のスペースです。
ゆき
2008/10/09 16:40
あ・・は・・は(..;)""""> ポリポリ

OFFになってましたヽ(^O^)ゝ
はいじ
2008/10/10 07:52
私もやったことありますわ(笑)
ソース部分見えないんだから、ウリースペース非表示でもよさそうなものだけど、そうするとブログに入らないんですよね^^;
ゆき
2008/10/10 10:23
 今晩は。
 お陰さまでうまくいきました。
珊底羅
2008/10/12 20:25
どういたしまして。せっかくのインターネットですので、ウィキペディアの関連記事とか、どんどんリンクしちゃいましょう。
ゆき
2008/10/12 23:44
はじめまして♪
わ〜、すごいですね〜、コレ|さっそく、貼らせていただきました〜♪^^
なんか、カレンダーに魂が宿った感じですね。ありがとうございます☆^^
mikomai
2008/11/04 19:52
>mikomaiさん
ようこそいらっしゃいませ。
気に入っていただけて嬉しいです。
魂!ですか〜。確かに、リンクがあるだけよりは、生き生きした感じになるかも。
紹介記事のほうもありがとうございました。またおいでくださいね。
ゆき
2008/11/05 17:12
ゆきさん、はじめまして。
今日このブログを知りまして、早速自分のブログでやってみたところ、うまくできたようです。
ありがとうございました。
ぽちぷち
2008/11/07 15:39
mikomaiさんのところで紹介いただいて、私も使わせていただきました。
前から、そういうふうに出来たらいいのに・・と思っていました、ありがとうございます。
人生ゆっくり
2008/11/07 20:29
>ぽちぷちさん
ようこそいらっしゃいませ。
使っていただけて嬉しいです^^
このスクリプト、小さい変化だけれど、思ったより人気があるみたいですね…。
どうぞまたおいでください♪
ゆき
2008/11/07 20:53
>人生ゆっくりさん
いらっしゃいませ^^mikomaiさんの記事からですか。あとでお礼にいかなくちゃー
ウェブリじゃない他の会社のブログだと今日の日付に色がつく機能があったりするので、真似してみました。
他にもウェブリブログの改造実験していますので、よろしかったらまた見にみてくださいね。
ゆき
2008/11/07 21:00
いつもお世話になります♪
カレンダーの今日の日付の応用編の記事を書きましたので、トラックバックを送りました。
harumam
2009/01/23 11:06
おおぉ!面倒くさがって「他の記事も参考に〜」と投げっぱなし(笑)の改造について、詳しく書いてくださってありがとうございました。
しかも使用画像も配布されているという親切記事!
みんな〜トラックパックを見るんだ!
ゆき
2009/01/24 10:31
こんにちは、ゆきさん
此方の記事を参考に、させて頂きました。

ご丁寧な説明で、分かりやすいです
ありがとうござます。

では、良い休日をお過ごしくださいね。
mituru
URL
2009/07/04 12:26
お使いいただけまして、ありがとうございます。
地味に一押しの技です^^
上のharumamさんのトラックバックに、もうちょびっと凝った使い方の記事があります。
よろしかったら併せてごらんくださいませ。
ゆき
2009/07/05 19:02

コメントする help

ニックネーム
URL(任意)
本 文

おもちゃ箱

Arcana Collection
詳細記事は→こちら
KaleidoRound
自分でつくれる万華鏡

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

【Hamster】
ちょたたたたっ。
詳細記事は→こちら
【Arcana Collection】
登録無しでもお試し戦闘ができるようになったよ。
詳細記事は→こちら
ブログ仲間s'新着記事tv 中継所
Powered By 画RSS

テーマ

カレンダーの今日の日付に背景色を入れる。 KaRaKuRy/BIGLOBEウェブリブログ
文字サイズ:       閉じる