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

モード変更

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

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

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

2009/11/19 (木)  カテゴリー: ブログカスタマイズ上級
ナビ機能付き 月別アーカイブ

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

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

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


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

月別アーカイブ 設置方法

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

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

【 参照 : 直接編集OK 整形済みコピー用ソース
<style type="text/css">
a.da_<%now_year><%now_month> { color:#fff; }
li a.da_<%now_year><%now_month> { color:#000; } /* スクリプトOFF用 */
#hs-archives td a.da_<%now_year><%now_month> { background:#6699cc; }
</style>

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

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

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

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

【 参照 : 直接編集OK 整形済みコピー用ソース
<div id="hs-archives"><ul>
<!--archive-->
<li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月" class="da_<%archive_year><%archive_month>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul></div>

<!--
HS月別アーカイブ V1.00 by おさる@FC2 2008.08.15
Copyright (c) 2008-2009, おさる@FC2 (veefour). All Rights Reserved.
http://mnkpc.blog92.fc2.com/blog-entry-77.html
-->
<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 ]

HS月別アーカイブ の 1列アレンジ
ちなみに ↑これは 昔使っていた 1列アレンジ。 これも便利でした!

このスタイルシートの原理を使うと、色々なエリアで 「今どこ機能」 を追加することができますよ♪ 例えば カテゴリー別の記事ページ とか。 ちょこっとスタイルを追加するだけでも出来ちゃいます!


[ 関連記事 : カテゴリーリストに 「現在地表示機能」 を ]
[ 関連記事 : 現在地表示機能付き カテゴリーリスト の設置方法 ]
[ 関連記事 : 月別アーカイブをコンパクトに表示する方法 ]
[ 関連記事 : エリア変数を加えて FC2ブログを軽くする! ]

キーワード検索 : FC2ブログ  月別アーカイブ  javascript  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-93.html

2009/11/19 ~ | Comment (1) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-1 Comment


承認待ちコメント

このコメントは管理者の承認待ちです

- |  2015/04/23 (木)  No.1763

コメントを投稿する 記事: カレンダー代用 ナビ付月別アーカイブ


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。