JavaScript ラインカレンダー
横型カレンダー・横一列カレンダー・ラインカレンダー・横長カレンダー・・・
ぐぐってみるといろんな言い方をしていて・・・・
検索をしているうちに縦型のカレンダーもいいかな～なんて思ったりしたが・・・
これはやるつもりがないので一番かっこいい？ラインカレンダーを使おうと思います
注意してください //////////////////////////////////////////////////////////////
自分のコメントを ”もっと” わかりやすく をすでに設置されている方は少し違います
※window.onload 命令は1つしか使えません
ココで配布している以外でwindow.onload を使っているプラグインを設置されている方は
プラグインの配布サイトに問い合わせてください
/////////////////////////////////////////////////////////////////////////////////
フリープラグインの最後にでもこのままコピペしてください
<script language="javascript"><!--
//http://ameblo.jp/exlink/
function myC() {
var w=0,d=0,ss='<span class="',se='</span>',today = new Date(),dd = today.getDate(),liC = document.getElementById("overHeader"),baseC = document.getElementById("calendar"),capC = baseC.getElementsByTagName("caption"),tdC = baseC.getElementsByTagName("td"),dayC = (capC[0].innerHTML + ' ');
for (var i = 0; i < tdC.length; ++i) {
w++;ih = tdC[i].innerHTML ;
if (ih != '') {d++;
if (d==dd){ih =(ss+'to">'+ ih +se+' ');}
if (w==1){dayC += (ss+'sn">'+ ih +se+' ');}
else if (w==7){dayC += (ss+'st">'+ ih +se+' ');w=0;}
else {dayC += (ih +' ');}}}
liC.innerHTML += ('<p>'+ dayC + '</p>');}
window.onload = function(){myC();}
// --></script>
そのあと・・・
ＣＳＳの最後にやっぱりコピペしてください
#overHeader p{/*ラインカレンダー全体*/
text-align: center;/*中央に*/
color:#333333;/*文字色*/
font-size: 12px;/*文字サイズ*/
padding: 10px 0 10px;/*位置 上・左右(0)・下*/
}
#overHeader p a{/*記事のある日*/
color:#666666;/*文字色*/
font-weight:bolder;/*太字*/
text-decoration:underline;/*下線：つける*/
}
#overHeader p .pre,
#overHeader p .next{/* << と >> の位置*/
padding: 0 10px;/*左右に10pxあける*/
}
#overHeader p a.pre,
#overHeader p a.next{/* << と >> のリンク*/
color:#999999;/*色*/
font-weight:normal;/*文字の太さ:ノーマル*/
text-decoration:none;/*下線：消す*/
}
#overHeader .sn a,
#overHeader .sn{/*日曜*/
color:#ff0000;
}
#overHeader .st a,
#overHeader .st{/*土曜*/
color:#0000ff;
}
#overHeader .to{/*今日*/
border:1px solid #006600;
}
サイドバーのカレンダーを表示しない場合は
#calendar {
display:none;
}
※サイドバーのカレンダーをコピーしてラインカレンダーは出来ています
サイドバーの配置で使用しないにして非表示の場合はエラーになります
必ずサイドバーにカレンダーを設置した状態で使用下さい
サイドバーにカレンダーを表示させたくない場合は上のＣＳＳで非表示にして下さい
わかりやすくするため反転させています・・・
上の画像説明中ではpadding: 10px 0;/*位置 上下・左右(0)下*/を使っています
padding: 10px 0 10px;/*位置 上・左右(0)・下*/と同じです
まずは#overHeader p{/*ラインカレンダー全体*/の
表示位置と文字サイズを調整してください
それ以外のＣＳＳについては時間をかけて自由に設定下さい
ただ間隔が狭いので背景に画像を使う場合は注意下さい
たぶん小さすぎて画像は使いにくいかもです・・・
現在気になっている部分は・・・
当日のマークが月を変更しても付いてしまう
日付が1桁と2桁で間隔が違ってしまう
日付にサイドバーで使っているような背景画を使いたいところですが・・・
間隔が狭いので画像が使い辛い
といって・・文字サイズを大きくしたり間隔を広げると横一列に収まりません
まっ・・・
ここまで出来れば他のブログで使っているようなカレンダーと遜色ないでしょう
って勝手に納得しています
あとは・・・
みなさまに使っていただいて・・・
記事で紹介していただき・・・
より多くの方に設置していただき・・・
それなら・・・
標準にしちゃおうか・・・ってアメブロに思わせること
そうすればフリープラグインに余裕も出来るしね・・・・
ついでに言えば・・・
ゲストさまと管理人のコメント分け・・・
これだってアメブロでクラス分けしてくれればあんなにフリープラグインを使うこともないのに・・・・
何とかなりませんか？アメブロさま～
ラインカレンダーはサイドバーのカレンダーを元にできています
サイドバーにカレンダーが配置されていない場合はラインカレンダーも表示できません
ラインカレンダーのみ表示させたい場合はCSSに
#calendar {display:none;}
で、サイドバーのカレンダーを非表示にしてください
JavaScript ラインカレンダー 4 CSSの編集が出来ないスキン