（ *Serene Bach系 > +Serene Bach系カスタマイズ ）
§ entry navi:: << +ページナビ展開プラグイン | main | +絵文字画像サイト紹介�� >>
§ category navi:: << +ページナビ展開プラグイン | - | +ブログの下線(ins)の装飾?! >>
§ category navi:: << +ページナビ展開プラグイン | - | +ブログの下線(ins)の装飾?! >>
+カレンダー日付に画像+カレンダー日付に画像しちゃうスクリプト+
Cucciolo.Blogさまのテンプレートから拝借（ぉぃ
wanwan Diaryにて使用させていただいております。
カレンダーに日付の元のテンプレはsb用ですが
テンプレート No.2 《 mono ver1.00 》←ここからＤＬできますよ。
それって何？んと 今日の日付の所に画像が出るんです
詳細は↓
※画像はあらかじめtemplateフォルダーにアップロードしておいて下さい。
ベースHTMLテンプレート欄の
その部分を下のように変更。
最後に日付を画像に変えるスクリプトを<body></body>タグの間に入れます。
(元テンプレでは</body>の手前に入ってました)
↓
「＞ベースHTMLテンプレートの保存する＜」で保存をして
「確認」を押してアイコンが出てたら成功♪後は再構築して完了です！
これで簡単に変更が出来ました♪
スクリプト利用はCucciolo.Blogさまのサイトへご一報を♪
一口メモ:::画像をupした時にパーミッションの変更を忘れずにね
テンプレイヂリは難しいぃ〜〜〜
ベースHTMLテンプレート欄の
<!-- BEGIN calendar -->を探します。
<div class="calendar">{calendar_horizontal}</div>
<!-- END calendar -->
その部分を下のように変更。
<!-- BEGIN calendar -->赤文字の部分を追加
<div class="calendar"><p id="calendardata">{calendar_horizontal}</p></div>
<!-- END calendar -->
最後に日付を画像に変えるスクリプトを<body></body>タグの間に入れます。
(元テンプレでは</body>の手前に入ってました)
↓
<!-- 今日の日付を画像にするスクリプト ここから -->
<script type="text/javascript" language="javascript"><!--
function setToday() {
var id = 'calendardata'; // カレンダーのID
var top = '<span class="newtoday"><img src="{site_parts}templateフォルダーにupした.gifファイル名をここに" width="11" height="11" border="0" align="middle"><font color="#333" style="display:none;">'; // 今日を囲むタグ（前）追記：数字は画像サイズに合わせて変更
var end = '</font></span>'; // 今日を囲むタグ（後）
var now = new Date();
var tmp, list;
var calMonth, calYear, calDay;
var obj = document.getElementById( id );
if ( !obj ) return;
// 月判断
list = obj.getElementsByTagName( 'a' );
for( var i = 0; i < list.length; i++ ) {
tmp = list[i].innerHTML;
if ( tmp == '<<' ) {
tmp = list[i].href;
if ( tmp.match(/month=(\d\d\d\d)(\d\d)/) ) {
calMonth = (RegExp.$2-0)+1;
calYear = RegExp.$1;
if ( calMonth > 12 ) {
calMonth = 1;
calYear++;
}
break;
}
}
}
if ( now.getFullYear() != calYear || now.getMonth()+1 != calMonth ) return;
tmp = obj.innerHTML;
var day = now.getDate().toString();
list = tmp.split( day );
for ( i = 0; i < list.length - 1; i++ ) {
var flg = false;
if ( calMonth == day &&
(list[i+1].charAt(5) == '-' || list[i+1].charAt(7) == '-') ) {
// ↑縦タイプ例外対応
} else if ( list[i].length != 0 && list[i+1].length != 0 ) {
var tmp2 = list[i+1].charAt(0);
var tmp3 = list[i].charAt( list[i].length-1 );
if ( ( '>\r\n '.indexOf( tmp3 ) != -1 ) &&
( '<\r\n '.indexOf( tmp2 ) != -1 ) ) {
flg = true;
}
}
if ( flg ) {
list[i] += top + day + end;
} else {
list[i] += day;
}
}
obj.innerHTML = list.join('');
}
setToday();
// -->
</script>
<!-- 今日の日付を画像にするスクリプト ここまで -->
「＞ベースHTMLテンプレートの保存する＜」で保存をして
「確認」を押してアイコンが出てたら成功♪後は再構築して完了です！
これで簡単に変更が出来ました♪
スクリプト利用はCucciolo.Blogさまのサイトへご一報を♪一口メモ:::画像をupした時にパーミッションの変更を忘れずにね
何故か上のままのだと今使ってるテンプレのカレンダーの上下の幅が広がってしまった。 そこで ちょっと ＣＳＳ部分をいぢってみたら なんとか元に近い状態に… /* カレンダー */ div.calendar { color: #fff; /* 文字色 */ text-align: center; padding: 6px 0px 5px 0px; /* ←元padding: 7px 0; だったのをこれに変更*/ border-top: 1px dashed #fff; /* 上の線色 */ background: #666; /* バックグランド色 */ font: 10px "Verdana", "Arial", sans-serif; } div.calendar a { text-decoration: none; } /* 下の部分を追記 */ div.calendar p { padding: 0px 0px 0px 0px; } |
テンプレイヂリは難しいぃ〜〜〜
Entry URL >>>
trackbacks (0)top↑
