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

モード変更

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

スポンサーサイト

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

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

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

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

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

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 ではカラム落ち(レイアウト崩れ) を起こしてしまうようです。。。

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

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

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

<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>部分 に入れてください。

個人的には...

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

キーワード検索 : FC2ブログ  カレンダー  空リンク非表示  

スポンサーリンク

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

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

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

-1 Comment


大変、参考になりました。

 ちょっとしたコダワリがあったものの、CSSのソースコードは

全く分からなかったので、とても参考になりました。

ありがとうございました。^^

 カレンダーもスッキリと、落ち着きました。

小松 |  2016/11/16 (水)  No.1772

コメントを投稿する 記事: カレンダーの装飾 + 空リンク非表示機能


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

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

Trackback

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