カレンダーに前後の月へのリンクを付ける
1. サイドバーの機能の追加と編集で、カレンダーを作る。
このときにその一部を、修正↓
<div class="side">
<div class="side_title cal">
<script type="text/Javascript"><!--
getCalenderTitle('{$BlogCalendarMonth format="%Y/%m" language="jp"$}','<BlogEntries latest="1">{$BlogEntryDate format="%Y/%m" language="jp"$}');</BlogEntries>
//--></script>
<noscript>{$BlogCalendarMonth format="%Y. %m" language="jp"$}</noscript></div>
<table border="0" cellspacing="0" cellpadding="0" align="center" summary="monthly calendar" style="margin: 5px 0px 5px 0px;">
～以下略～
calを足すのと、{$BlogEntryDate ～}を<script>～</script>+<noscript>～</noscript>に変えます。
2. スクリプトを、</head>の上に貼り付ける。
// ■カレンダー前後移動 (http://sample.main.jp/)
function getCalenderTitle(date,last) {
var date = date.split("/");
var last = last.split("/");
var prev_mark = '≪'; //前の月へのマーク
var next_mark = '≫'; //次の月へのマーク
var this_month = date[0] + '年' + date[1] + '月'; //今月の表示の仕方
var first = new Array('2004','06'); //最初の記事の(年,月)
var base = 'http://yaplog.jp/○○/monthly/';
var prev_year = date[0];
var prev_month = date[1] - 1;
var next_year = date[0];
var next_month = ( date[1] - 0 ) + 1;
if ( date[1] == 1 ) {
prev_year = date[0] - 1;
prev_month = 12;
}else if ( date[1] == 12 ) {
next_year = ( date[0] - 0 ) + 1;
next_month = 1;
}
if (prev_month < 10) { prev_month = '0' + prev_month; }
if (next_month < 10) { next_month = '0' + next_month; }
var prev_link = '<a href="' + base + prev_year + prev_month + '/">' + prev_mark + '<\/a>';
var next_link = '<a href="' + base + next_year + next_month + '/">' + next_mark + '<\/a>';
var sp = ' ';
var inHTML;
if (( first[0] > date[0] ) || (( first[0] == date[0] ) && ( first[1] >= date[1]))){
inHTML = sp + sp + this_month + sp + next_link + '';
}else if(( date[0] > last[0] ) || (( date[0] == last[0] ) && ( date[1] >= last[1] ))){
inHTML = prev_link + sp + this_month + sp + sp + '';
}else {
inHTML = prev_link + sp + this_month + sp + next_link + '';
}
document.write(inHTML);
}
//--></script>
設定する必要があるのは、以下の部分です。
var prev_mark = '<img src="http://yaplog.jp/○○/img/××/ar_l.gif" width="△" height="△" alt="≪" border="0">'; //前の月へのマーク
var next_mark = '<img src="http://yaplog.jp/○○/img/××/ar_r.gif" width="△" height="△" alt="≫" border="0">'; //次の月へのマーク
ちなみに私が使っているのはコレ。
周りが白で、赤い部分が透過箇所です。 → 
var this_month = date[0] + '.' + date[1];
3. スタイルシートにも追加。
リンク部分の色とか背景色とかの指定になります。
リンクに文字・透過画像を使う場合に必要です。（普通の画像なら必要ないと思う）
.cal a { font-weight: bold;}
.cal a:link { color: #999;}
.cal a:visited { color: #999;}
.cal a:hover { color: #c9dde1; }
.cal a:active{ color: #c9dde1;}
など。
透過画像の時は、こんな感じで。
.cal a:link { background-color: #999;}
.cal a:visited { background-color: #999;}
.cal a:hover { background-color: #c9dde1; }
.cal a:active{ background-color: #c9dde1;}
(2011.4.18)
色々おかしくなっていたのを修正。
というか、関数名のスペルが変だったとか、恥ずかしすぎる・・・。
昔のカスタマイズ系記事でおかしい箇所がありましたら、コメントやメールフォームや拍手で連絡いただけると助かります。
トラックバック(2)
いろいろ
とーこさん、お体大丈夫ですか？とても大事な時期にご無理
言いまして申し訳ございませんでしたm(._.*)mペコッ。
早速、ソース頂いて帰りました♪今日はやめとこうかと
思ってますので明日以降頑張ってしたいと思います。
本当に貴重な時間割いてカキコしてくださってありがとうござ
いましたm(._.*)mペコッ。感謝ですぅ～o(TωT )( TωT)o ウルウル。
こんばんは。
お体が大変なときによくぞ載せていただきました！
これを待っていたのです～。
早速設置してみました。
ありがとうございました♪
＞ aichanさん
いえいえ～。
私も早く、書いてしまいたかったんですよ。
さぼり間なので、後押ししてくれる人がいないと、きっと今でも放置だったでしょう；
余裕のある時に、試してみてください。
おかしな所があったら、おしえてくださいね～。
＞ まりりさん
早速試してもらえましたかっ。
どうです・・・？
おかしな動きはしてませんか・・・？
気に入ってもらえると、嬉しいです♪
とーこさん、こんばんは。
いつもカスタマイズの参考にさせていただいています。
今回は独自タグを参考に、カレンダーを横一列表示にしてみました。ついでにこちらの記事を参考にさせていただきまして、前後のリンクもつけてみました。
トラックバック、途中でエラーが出たのでやり直したら2重になってしまって申し訳ないです。お手数ですが重複分は消してください。
これからもどうぞよろしくお願いします。
＞ ケイさん
おおお、遅くなってすみません；
今更ですが・・・。
そうそう、そんな感じでできるんですよ。
試してわかってはいたものの、面倒で放置してました；
丁寧に説明してくださる方がいて良かったですｖ
3列でもサイドバーにtableタグとか移せばできるんですけど、これも書くのがなかなか大変ですよね；；
なるほど・・・確かに月別アーカイブって表記をusに変えても～月～日ですねぇ。
アーカイブテンプレートは、カテゴリと月と日が兼用しているので個別に変えられませんね・・・。