HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > FC2共有テンプレート > カレンダーの装飾 + 空リンク非表示機能

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

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

公式プラグイン「カレンダー」 の スタイル見本 を載せておきます。ユーザーさんは、必要に応じて使ってください。 また、ついでなので...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 ではカラム落ち(レイアウト崩れ) を起こしてしまうようです。。。

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

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

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


<table summary="カレンダー" class="calender">
<tr>
<th><a href="<%prev_month_link>" title="<%prev_year>年<%prev_month>月"<!--date_area--> class="n p<%prev_year><%prev_month>"<!--/date_area-->>←</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><!--date_area--><a href="<%next_month_link>" title="<%next_year>年<%next_month>月" class="n p<%next_year><%next_month>">→</a><!--/date_area--><!--not_date_area-->&nbsp;<!--/not_date_area--></th>
</tr>
<tr>
<th abbr="日曜日" scope="col" id="sun">日</th>
<th abbr="月曜日" scope="col">月</th>
<th abbr="火曜日" scope="col">火</th>
<th abbr="水曜日" scope="col">水</th>
<th abbr="木曜日" scope="col">木</th>
<th abbr="金曜日" scope="col">金</th>
<th abbr="土曜日" scope="col" id="sat">土</th>
</tr>
<!--calender-->
<tr>
<td><%calender_sun></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><%calender_sat></td>
</tr>
<!--/calender-->
</table>

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

<head>~</head> 部分に記入 (テンプレユーザー以外)

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

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

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

個人的には...

月別アーカイブ の方が無駄がないような気もしますが。。。どうでしょうか?

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-100.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 1件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : FC2共有テンプレート

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る

※2014-04-29まで FC2ブログ有料プラン を適応中です。