カレンダー代用ナビ付月別アーカイブ【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
FC2ブログ月別アーカイブ javascript

カレンダー代用ナビ付月別アーカイブ

2009/11/19 (木) カテゴリー：ブログカスタマイズ上級

ブログにカレンダーを設置している方は結構多いと思いますが、そのカレンダー、右の図のような「今月」がハッキリわかるコンパクトな 月別アーカイブ に変えてみるというのはどうでしょうか？
（1つ前の記事の続きです。）

これは、共有プラグインに登録されている HS月別アーカイブ に少し手を加えたものですが、過去のアーカイブ表示の時には、ちゃんと「その月」が強調されるので、ページ送り・月選択のナビゲーションとしても有効だと思います。

月別のページとサイトマップで利用しています。（トップページには手書きのものを置いてます。）

[ 実際の… 月別の記事ページ はこちら ]

月別アーカイブ設置方法

　↓ 2010/07/15 改訂版のソースです。

1.　テンプレートの <head> ～ </head> 部分

【参照：直接編集OK　整形済みコピー用ソース】

↑ 変数を利用しているので、必ずテンプレート内に記入してください。
スクリプトOFF用の設定は省略した場合、その上の色設定が反映されます。私は省略。。

上の内容を  と  で囲えば、月別の記事ページ表示状態の時だけ、その設定を反映させることも可能です。

2.　<body> 内の表示したい部分に ↓以下を記入

※共有プラグイン HS月別アーカイブ の内容を以下のものに変更してもOK！

【参照：直接編集OK　整形済みコピー用ソース】

<div id="hs-archives"><ul>

<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月" class="da_<%archive_year><%archive_month>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>

</ul></div>


<script type="text/javascript">
// <![CDATA[
function mnkCreateArchives(idName){
var rows = 2; //★年毎の行数
var cols = Math.floor(12/rows);
if(cols*rows!=12){ return; } // parameter check
var target = this.document.getElementById(idName);
var links = target.getElementsByTagName('a');
var dt = new Array();
var i, j = -1, cury = 0;
for(i=0; i<links.length; i++){
links[i].innerHTML.match(/(¥d+)¥D+(¥d+)¥D+(¥d+)/);
if(cury!=RegExp.$1){
cury = RegExp.$1;
dt[++j] = new Array(cury,'01','02','03','04','05','06','07','08','09','10','11','12');
}
var mon = Number(RegExp.$2);
dt[j][mon] = '<a href="' + links[i].href + '" title="' + links[i].innerHTML + '" class="' + links[i].className + '">' + dt[j][mon] + '</a>';
}
var rec = '<table width="100%">';
var sep = '';
for(i=dt.length-1;i>=0;i--){
rec += '<tr><th colspan="' + cols + '">' + sep + dt[i][0] + '年</th></tr>';
for(var r=0; r<rows; r++){
rec += '<tr>';
for(j=1; j<=cols; j++){ rec += '<td>' + dt[i][j+r*cols] + '</td>'; }
rec += '</tr>';
}
sep = '<div></div>';
}
rec += '</table>';
target.innerHTML = rec;
return;
}
mnkCreateArchives('hs-archives');
// ]]>
</script>

■色文字部分は共有プラグインの設定とは異なる部分です。
表の並び順を時系列順（古い年の 1月～12月 → 新しい年の 1月～12月）と並べたかったので、作者の veefourさんにその方法を教えて頂きました。

デフォルトの状態（新しい年の 1月～12月 → 古い年の 1月～12月）で並べたい場合は　 for(i=0;i<dt.length;i++){　と書き換えて使ってください。

レイアウトの関係などで、スクリプトOFFの場合に表示させたくなければ、<ul> 部分に <ul style="display:none"> などを設定しておけば大丈夫です。ナビゲーションとしても使うのであれば、なるべくページ上部が便利かも。。。

3.　スタイルシートに ↓以下を記入

【参照：直接編集OK　整形済みコピー用ソース】

/* HS月別アーカイブ */
#hs-archives th {
font-weight:bold;
}
#hs-archives td {
border-top:solid 1px #f5f5f5;
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
border-left:solid 1px #f5f5f5;
line-height:1.3;
text-align:center;
background:#f5f5f5;
color:#999;
}
#hs-archives td a {
display:block;
background:#fefefe;
}

スタイルシート部分はお好みで。。。何も設定しなくてもOKで、↑上はこのサイトでの設定です。作者さんのサイトに詳しい説明が書かれていますので、そちらを参照してください。
[ 参照： HS月別アーカイブ V1.00について - veefour's digital life ]