カレンダーの装飾＋空リンク非表示機能【ありのごとくあつまりて】

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

この記事に含まれるタグ（Keyword） :
FC2ブログカレンダー空リンク非表示

カレンダーの装飾＋空リンク非表示機能

2009/12/14 (月) カテゴリー： FC2共有テンプレート

公式プラグイン「カレンダー」のスタイル見本を載せておきます。ユーザーさんは、必要に応じて使ってください。また、ついでなので．．．ari_seoシリーズや過去記事で紹介した便利ナビ（＋空リンク非表示）を使っている方なら、すごく簡単に設置できる（& それ以外の方でも簡単に設置できる） 空リンク非表示カレンダー も紹介します。

追記： 2010/05/28　
共有テンプレートにカレンダー用のスタイル設定を標準搭載しておきました。空リンク非表示カレンダーへ変更する場合も、CSS部分は共通なのでそのまま使えます。

FC2 カレンダー用スタイル設定（兼：空リンク非表示版）

カレンダー　
上: 公式プラグインを装飾したもの　
下: 空リンク非表示カレンダー

下が「空リンク非表示」版です。未来の月など「記事の無い月」にはリンクを張らない（or 月別のページでは表示されない）ようにしてあります。

便利ナビに追加してある FCafe danielさんの月別参照空リンク制御機能。これをカレンダーの月めくりにも対応させたものです。

/* カレンダー装飾用 */
table.calender {
width:175px;
border:1px solid #dcdcdc;
border-collapse:separate;
}
.calender caption {
padding:2px;
font-weight:bold;
background:#fff;
}
.calender th#sun {
color:#cc3366;
}
.calender th#sat {
color:#339966;
}
.calender th, .calender td {
border-top: solid 1px #f5f5f5;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: solid 1px #f5f5f5;
text-align:center;
font-weight:normal;
color:#999;
}
.calender td a {
display:block;
background:#f5f5f5;
color:#000;
}
.calender td a:hover {
background:#777;
text-decoration:none;
color:#fff;
}

※あくまでも一例なので、色などはお好みで変えてみてください。詳しい説明は省略していますので、分からない部分や「こうしたい」というのがあれば、コメントしてください。

table.calender { width:175px; } 部分の設定ですが、width:100%; を使ってしまうと IE5.5 ではカラム落ち（レイアウト崩れ）を起こしてしまうようです。。。

[ サンプルページ はこちら ]

空リンク非表示カレンダー

公式プラグイン「カレンダー」のソースを以下のものと書き換えるだけで使えます。

<tr>
<th><a href="<%prev_month_link>" title="<%prev_year>年<%prev_month>月" class="n p<%prev_year><%prev_month>">←</a></th>
<th colspan="5"><b><a href="./blog-date-<%now_year><%now_month>.html" title="<%now_year>年<%now_month>月の記事"><%now_year> / <%now_month>月</a></b></th>
<th><a href="<%next_month_link>" title="<%next_year>年<%next_month>月" class="n p<%next_year><%next_month>">→</a> </th>
</tr>

上の点線枠内部分が公式プラグインのソースとは異なる部分です。本当は、公式と同じ <caption> </caption> を使うのがベストだと思いますが、「非表示」のバランスを考えると．．．これ以外に思いつかなかった。。。個人的には許容範囲だと思っていますが、気になる方は <caption> </caption> で考えてみてください。

<head>～</head> 部分に記入（テンプレユーザー以外）

共有テンプレート（ari_seoシリーズ）ユーザーさんと過去記事で紹介した便利ナビ（＋空リンク非表示）を使っている方 以外の方 は以下の設定が必要です。


<style type="text/css">
.n { display:none; }
.p ,.p<%archive_year><%archive_month> { display:inline; }
</style>


変数を使っているので必ずテンプレートの<head>部分に入れてください。