以下の内容はhttp://10plate.blog44.fc2.com///blog-entry-311.htmlより取得しました。


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

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)";

関連記事



以上の内容はhttp://10plate.blog44.fc2.com///blog-entry-311.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14