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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

横カレンダーの今日「当日」のスタイルを変えて装飾する

FCafeを運営するdanielさんが、カレンダーの今日「当日」を装飾した共有プラグイン「CalendArchive」を公開してくれています。

【参考記事】
FCafe カレンダー当日表示別法

このスクリプトを参考に、横カレンダーの今日「当日」のスタイルを変えて装飾するカスタマイズを紹介します。

このカスタマイズをする前に、横カレンダーを実装していることが前提になります。

ブログタイトル下に横カレンダーを入れる

このHTMLに次の赤い箇所を加えてください。

<!--▼ 横カレンダー ▼-->
<div class="line_calendar" id="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>

<!--calender2-->
<span class="line_cal_day"><%days></span>
<!--/calender2-->

<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--▲ 横カレンダー ▲-->


そしてHTMLの</body>の上に、以下の記述を加えてください。

<script type="text/javascript"><!--
function line_calendarToday() {
var D=new Date();
var T=">"+D.getDate()+"<";
if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1){
var C=document.getElementById("line_calendar").getElementsByTagName("span");
for (i=0;i<C.length;i++) {
if ( C[i].innerHTML.indexOf(T)>-1 || C[i].innerHTML == D.getDate() ) {

/* ▼横カレンダーの「当日」のスタイル▼ */
C[i].style.background="#ffd700"; /* 背景色 */
C[i].style.border="solid 1px #ffa500"; /* 枠 (実線、太さ、色) */
C[i].style.color="#8b0000"; /* 文字の色 */
C[i].style.padding="1px"; /* 文字から枠までの余白 */
/* ▲横カレンダーの「当日」のスタイル▲ */

}}}}
line_calendarToday();
//--></script>


背景色等の各スタイルはお好みに合わせて設定してください。
スタイル設定が不必要なものがあれば、その行を削除してください。

このカスタマイズによりカレンダーを見て今日が何日なのか解りやすくなると思います。

【2009/09/25 追記】上記 javascriptを訂正しました。当日に記事を書くとスタイルが適用されない問題がありました。申しわけありません。以前の訂正前の javascriptは以下になります。

<script type="text/javascript"><!--
function line_calendarToday() {
var D=new Date();
if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1) {
var C=document.getElementById( "line_calendar" ).getElementsByTagName("span");
for (i=0;i<C.length;i++) {
if ( C[i].innerHTML == D.getDate() ) {

/* ▼横カレンダーの「当日」のスタイル▼ */
C[i].style.background="#ffd700"; /* 背景色 */
C[i].style.border="solid 1px #ffa500"; /* 枠 (実線、太さ、色) */
C[i].style.padding="1px"; /* 文字から枠までの余白 */
C[i].style.color="#8b0000"; /* 日付の色 */
/* ▲横カレンダーの「当日」のスタイル▲ */

}}}}
line_calendarToday();
//--></script>



【2009/10/21 追記】背景に画像を設定したいときはこのように指定してください。

C[i].style.backgroundImage="url(画像URL)";

関連記事
[ 6202 ] 質問
当日の記事を書くと、そちらのCSSから負けて表示しなくなるようなのですが。
[ 2009/09/25 12:21 ] [ 編集 ]
[ 6205 ] > さくらいさん
申しわけありません。スクリプトに不備がありました。
記事を訂正したのでもう一度お願い致します m(__)m

【2009/09/25 追記】
http://10plate.blog44.fc2.com/blog-entry-311.html#a20090925
[ 2009/09/25 20:08 ] [ 編集 ]
[ 6207 ]
お世話になっております。
おかげさまでFirefoxでもそこそこ表示出来るようになりました。

で、この記事の件ですが、自分もさくらいさんと同じ問題で悩んでおりましたので
早速新しいスクリプトを設置してみたところ、問題解決!
と思いきや、今度は当日の記事が無い場合にスタイルが反映されなくなってしまいました。
これは私側のスタイルシートの問題でしょうか?

お時間がある際にでもアドバイス頂ければ幸いです。
[ 2009/09/25 21:05 ] [ 編集 ]
[ 6209 ] > カニぐみさん
誠に申しわけありません。更にスクリプトを訂正しました;
もう一度よろしくお願い致します。m(__)m
[ 2009/09/25 22:30 ] [ 編集 ]
[ 6213 ]
早速有難うございました!
バッチリです(^ ^)v
[ 2009/09/25 23:16 ] [ 編集 ]
[ 6217 ] > カニぐみさん
良かったです^^;
度々申しわけありませんでした。
[ 2009/09/26 00:22 ] [ 編集 ]
[ 6228 ] ありがとうございます
私のところでも無事動いてます。
ありがとうございます。
[ 2009/09/26 08:46 ] [ 編集 ]
[ 6244 ] > さくらいさん
正常に動いているようですね。
良かったです^^;
[ 2009/09/26 23:31 ] [ 編集 ]
[ 6260 ] ?
先ほど気付きましたが、
ページの一番下に、

}}}} line_calendarToday(); //-->

と出るようですが。
[ 2009/09/27 20:14 ] [ 編集 ]
[ 6267 ] > さくらいさん
下記の赤い部分を削除してください。


<!--▲▲ フッター ▲▲-->

}}}}
line_calendarToday();
//--></script>

<script type="text/javascript"><!--
[ 2009/09/27 22:00 ] [ 編集 ]
[ 6270 ] すいません
前のゴミが残ったと言うことですね。
大変お騒がせしました。
[ 2009/09/27 22:12 ] [ 編集 ]
[ 6271 ] > さくらいさん
そうみたいですね^^;
でも直って良かったです。
[ 2009/09/27 22:38 ] [ 編集 ]
[ 6588 ] 当日の背景を画像に…
当日日付の背景を画像にするにはどうしたらよいでしょうか?
それから、記事のある日も画像にとか、できますでしょうか?
もう一つ、横カレンダーで2009/09 ~日付~ 2009/11 となってますが、右側の日付が将来の場合に表示しない方法はありますでしょうか?
いつも無理言ってすいません。
一応
C[i].style.background-image: url~ とか
C[i].style="background-image: url~" とか
C[i].style.background-image="url ~" とか
試してみましたが、ダメなんでしょうね。
[ 2009/10/21 20:12 ] [ 編集 ]
[ 6598 ] > さくらいさん
それぞれの記事に追記したので参考にしてください。

横カレンダーの今日「当日」のスタイルを変えて装飾する【2009/10/21 追記】
http://10plate.blog44.fc2.com/blog-entry-311.html#a20091021

ブログタイトル下に横カレンダーを入れる 【2009/10/21 追記】
http://10plate.blog44.fc2.com/blog-entry-113.html#a20091021
[ 2009/10/21 23:01 ] [ 編集 ]
[ 6608 ] 頂きます
いつも 素早い回答ありがとうございます。
使わせて貰います。
[ 2009/10/22 10:09 ] [ 編集 ]
[ 6614 ] > さくらいさん
当日の日付の背景画像にバスケットボールを表示させたんですね。
さくらいさんのブログらしくて良いですね^^
[ 2009/10/22 23:25 ] [ 編集 ]
[ 6619 ] ありがとうございます
わざわざご確認頂きありがとうございます。
記事のある日の画像と将来月は今回は見送りで…
何か良い画像ができたら使用させて頂きます。
[ 2009/10/23 10:58 ] [ 編集 ]
[ 6627 ] > さくらいさん
将来月へのリンクのカスタマイズは欠点がありますからね;
他に何か良い方法が見つかればまたお知らせしますね。
[ 2009/10/23 23:32 ] [ 編集 ]
コメントの投稿









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

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

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

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

いたおの他の運営サイト
カレンダー
08 | 2016/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 | 2016/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 -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。