このページの記事目次 （タグ: 空リンク非表示 の検索結果 3 件）
過去記事で紹介していたソースを 一部変更したので その紹介を兼ねて。。。
相変わらず地味なデザインですが、いつも参考にさせて頂いている hatena chips さんの CSSでテーブルデザインをクオリティアップ を参考に 少しドレスアップしてみました。
個人的には ブログにカレンダーは必要ないのではないかな．．． と思っています。 日付にカーソルを合わせたら 「記事タイトルが分かる」 とかいう機能があれば別かもしれないですけど、何が表示されるか分からないので まずクリックすることはないです。
それに、SEO対策 を考えるなら カレンダーではなくて 月別アーカイブ の方が優秀だと思います。 あくまでも個人的意見ですが。 どうでしょうか．．．？
追記： 上の内容は FC2ブログの場合 での話になります。ライブドアブログ のカレンダー などは とても便利な機能 を備えているようです。 （マウスオーバーで記事タイトルが分かり、移動するページも FC2ブログの日付クリック とは動作が異なる。 月別のページのその記事の位置へ移動するリンク なので 行き止まり感がなく便利 です。）
現在の FC2ブログのカレンダー の場合、日付クリックで表示されるページは その日付のみの <!--date_area--> ./blog-date-20080630.html（ ← 月単位のページでもなく 固定リンクページ<!--permanent_area-->でもないページ ） です。
ライブドアブログ のように... 例えば、移動先が ./blog-date-200806-0.html#30 （← 2008年6月の<!--date_area-->1ページ目#30日投稿記事の1つ目の位置に移動 ） のようなページ移動 が使えるようになったらもう少し便利になるのかも。。。
キーワード検索 ： FC2ブログ カレンダー 空リンク非表示 月別アーカイブ SEO対策
スポンサーリンク
公式プラグイン「カレンダー」 の スタイル見本 を載せておきます。ユーザーさんは、必要に応じて使ってください。 また、ついでなので．．．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-->
<!--/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ブログ カレンダー 空リンク非表示
スポンサーリンク
このブログで使っている ページナビゲーション を紹介します。 これは、FC2ブログの共有プラグイン として公開されている myhurt さん の 「便利ナビ （Benri-Navi）」 をベースに作ったものですが、1ページに複数記事を表示している状態でも 記事タイトルを素早く確認することができるようになるので、アクセシビリティ がかなり向上するかと思います。
カテゴリー別ページ， 月別ページ，日別ページ ， 検索結果ページ， タグ検索結果ページ， ./page-0.html ./page-1.html ... で実装しています。
追記 ：
現在、月別ページ以外では 便利ナビ と ページナビ を併用しています。
[ ページナビ（ページ移動スクリプト）の設置方法 ]
※↓ 以下、便利ナビ の記事続き になります。
FC2ブログで用意されている エリア変数 を使う方法なので、これをマスターすればブログの可能性はもっと広がるかも？？ 私もこれを機に ブログ中級者 になれたような気がしてます。
[ 関連記事 ： FC2ブログのエリア変数 表示されるページ見本 ]
また、月別の記事表示 などで 「次の月へ」 などという リンクを辿っていると 未来の月などの空ページが表示されてしまうことがあるかと思いますが、それを防ぐ方法 空リンク非表示 も使っているので、それも一緒に紹介します。
[ 参考 ： FCafe 月別参照空リンク制御 ]
便利ナビの応用＋空リンク非表示
※私が実際に使っているソースとは一部異なりますが、なるべくそのまま使えるように解りやすくしたつもりです。 このままでも使えるとは思いますが、見た目の設定などは各自で行う必要があります。 また、作業前には バックアップをとっておくこと （テンプレートの複製を作っておく等） をお奨めします。
追記 ： 2009/07/12
適用中のテンプレートではなくても トップページ以外を簡単に確認するための方法 （便利なプレビュー用リンク） を紹介しています。 是非、使ってみてください。
[ 関連記事 ： 複製テンプレートでトップページ以外を確認 ]
1. <head>～</head> 部分に記入
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
月別の記事ページで 空リンク （←ブログ開設より前の月 または 未来の月→） を表示させないため （空リンク非表示） に必要です。
<!--date_area-->
<style type="text/css">
.n { display:none; }
.p<!--archive--> ,.p<%archive_year><%archive_month><!--/archive--> { display:inline; }
</style>
<!--/date_area-->
2. <!--topentry--> より上に記入
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<!--topentry--> より上 の 便利ナビを表示させたい場所に 以下↓ を記入。
<!--Benri-navi ver1.1 (plugin) S-->
<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->
<div id="benri_navi_area">
<!--category_area-->このページの記事目次 （カテゴリー: <%sub_title>）<!--/category_area-->
<!--date_area-->このページの記事目次 （ <a href="<%prev_month_link>" title="前の月"
class="n p<%prev_year><%prev_month>">← </a><b><%now_year>年<%now_month>月</b><a href="<%next_month_link>" title="次の月"
class="n p<%next_year><%next_month>"> →</a> ）
<!--/date_area-->
<!--search_area-->このページの記事目次 （<b><%sub_title></b> の検索結果）<!--/search_area-->
<!--tag_area-->このページの記事目次 （タグ: <%sub_title>）<!--/tag_area-->
<!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->このページの記事目次<!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area-->
<ul>
<!--topentry-->
<li><a href="
#entry<%topentry_no>" title="この記事の先頭へ"><%topentry_title> [<%topentry_year>/<%topentry_month>/<%topentry_day>]</a></li>
<!--/topentry-->
</ul>
<div style="text-align:right">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ">← 前のページ</a> <!--/prevpage-->
<!--nextpage--><a href="<%nextpage_url>" title="次のページへ">次のページ →</a> <!--/nextpage-->
</div>
</div>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->
<!--/not_index_area-->
<!--Benri-navi ver1.1 (plugin) E-->
トップページにも 記事を表示させている場合には <!--not_index_area--> と <!--/not_index_area--> を除けばOKです。
3. <!--topentry--> の下、記事タイトル の前に記入
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<!--topentry--> の下、記事タイトル（通常は<h2>） の前に記入。
<h2><%topentry_title></h2> ←こういう部分の上
記事タイトルに id="" や name="" がある場合それを利用してもOKです。
<a id="entry<%topentry_no>" name="entry<%topentry_no>"></a><!-- benri_navi -->
FC2ブログの エリア変数 を理解できれば いくらでもアレンジできて楽しいかも。
キーワード検索 ： 便利ナビ ページナビ FC2ブログ テンプレート 変数 空リンク非表示
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
