ヤプログのカスタマイズになります。
ようやくまとめることができました;;
サンプルは、こっちのブログをどうぞ。
そこだけiframeにすることができないので、ページを該当の月別アーカイブに移動させます。
(そうするとカレンダーも変わるので)
カレンダーも作らないといけないので、結構難しいかも・・・です。
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>の上に貼り付ける。
<script type="text/javascript"><!--
// ■カレンダー前後移動 (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 = '≪'; //前の月へのマーク
var next_mark = '≫'; //次の月へのマーク
リンクを画像にする場合は、
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] + '月'; //今月の表示の仕方 '2005年12月'
もし'2005.12'という形式にするなら
var this_month = date[0] + '.' + date[1];
var first = new Array('2004','06'); //最初の記事の(年,月)
これ以前の月へはリンクしないようにします。
(この場合は2004年6月のページには、前の月へのリンクが出ない。)
var base = 'http://yaplog.jp/○○/monthly/';
○○に、ヤプログIDを入れてください。
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)
色々おかしくなっていたのを修正。
というか、関数名のスペルが変だったとか、恥ずかしすぎる・・・。
昔のカスタマイズ系記事でおかしい箇所がありましたら、コメントやメールフォームや拍手で連絡いただけると助かります。