ブログを始めたばかりの頃、「ブログってどのページも枠は全く一緒なんだなぁ」 と思っていた私。 でも色々調べるうちに、ブログでも トップページ を作ったり、ページによって装飾を変えたり．．．と何でもできることが分かってきました。
FC2ブログでの エリア変数 を理解して扱うことができれば、ブログの可能性はもっと広がると思うので、ソース と 実際のページ見本 を記事にしてみました。
- トップページ （インデックスページ）
<!--index_area--> <!--/index_area-->
URL http://arinogotokuatumarite.blog19.fc2.com/
- 個別記事ページ （固定リンクページ）
<!--permanent_area--> <!--/permanent_area-->
URL例 ./blog-entry-36.html
- コメント編集ページ
<!--edit_area--> <!--/edit_area-->
URL例 ./?mode=edit&rno=22
- カテゴリー別ページ
<!--category_area--> <!--/category_area-->
URL例 ./blog-category-22.html
URL例 ./category22-2.html （3ページ目）
- 月別ページ，日別ページ
<!--date_area--> <!--/date_area-->
URL例 ./blog-date-200806.html
URL例 ./blog-date-20080630.html
- 検索結果ページ
<!--search_area--> <!--/search_area-->
URL例 （utf-8） ./?q=%E3%82%A8%E3%83%AA%E3%82%A2%E5...
- タグ検索結果ページ
<!--tag_area--> <!--/tag_area-->
URL例 （utf-8） ./?tag=%E3%83%97%E3%83%AC%E3%83%93%E3...
- 全記事一覧ページ
<!--titlelist_area--> <!--/titlelist_area-->
URL ./archives.html （又は ./?all ）
- それ以外のページ （上記エリアに属さないページ）
<!--not_index_area--><!--not_permanent_area--><!--not_edit_area--><!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_titlelist_area-->
それ以外のページ
<!--/not_titlelist_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area--><!--/not_edit_area--><!--/not_permanent_area--><!--/not_index_area-->
<!--
not_○○_area--> <!--
/not_○○_area--> という変数は、正しく囲えば複数指定することができるので、組み合わせを色々とアレンジすることができます。
1. ～ 8. は1つずつ設定する必要があるので、場合によっては
9. のような <!--
not_○○_area--> <!--
/not_○○_area--> を利用した方が便利なことがあります。
<!--index_area--> <!--/index_area--> を設定していない場合 （多くのテンプレートの初期状態） は、トップページは page-0.html と同じ表示になっているかと思います。
トップページを記事以外で作りたい場合 <!--topentry--> より上の部分などに <!--index_area--> <!--/index_area--> で囲った部分を作り、そこに トップページで表示させたい内容を記入すれば良いのですが、その場合 page-0.html へのリンクを貼れば、記事の設定 「記事（ページ別）」 で設定したものが表示できるようになります。
※<!--topentry--> ～ <!--/topentry--> は <!--not_index_area--> <!--/not_index_area--> で囲ってください。
その他、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ブログの 変数 を使って、リンクにカーソルを合わせた時に表示されるヘルプチップ （title="" ） で 記事の冒頭文 や コメントの冒頭文 を表示させる方法について記事にしてみました。
ありのごとくあつまりて の トップページ で使っている title="<%recent_body>" と title="<%rcomment_body>"（※後者は現在のテンプレートでは未使用です） について。 意外と使えると思うので載せてみました
例えばトップページの ↓ のような部分 （カーソルを合わせて
）
1. 最近の記事に title="<%recent_body>"
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul>
<!--recent-->
<li><a href="<%recent_link>"
title="<%recent_body>">[<%recent_year>/<%recent_month>/<%recent_day>] <%recent_title></a></li>
<!--/recent-->
</ul>
トップページの 最近の記事 で使用。
記事投稿の際、自動改行はOFFにして 記事上部 を <br /> だけで編集するようにすると 見た目もキレイです。 （気にならなければ、改行を入れてもOKですが）
2. 最近のコメントに title="<%rcomment_body>"
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul
id="cview">
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>"
title="<%rcomment_body>">記事 「<%rcomment_etitle>」 へのコメント</a>
<div style="text-align:right"><%rcomment_name> <%rcomment_year>/<%rcomment_month>/<%rcomment_day></div>
</li>
<!--/rcomment-->
</ul>
<script type="text/javascript">
// <![CDATA[
var A=document.getElementById("cview").getElementsByTagName("a");
for (i=0;i<A.length;i++){
A[i].title=A[i].title.replace(/¥<br ¥/¥>/g," ")
}
// ]]>
</script>
以前、使っていたものです。 （このテンプレートでは未使用）
最近のコメント一覧で カーソルを合わせると コメント冒頭文 を表示させるように title="<%rcomment_body>" を使います。 ただ、title="<%rcomment_body>" のままだと <br /> がそのまま表示されてしまうので．．．スクリプトを使ってそれを防いでいます。
アクティブスクリプトが無効 （noscript） の場合でも、問題なく使えます。
ちなみに．．．以前は title="<%rcomment_body>" が普通に <br /> が表示されることもなく 使えていたようなので、この設定が改善されれば このスクリプト部分は必要なくなるかもしれません。
追記 ： 2009/06/10
W3C などでの 構文エラー （title="・・・<br />・・・" → ×） 回避のため、現在は スクリプト document.write を使用して全てを書き出しています。
さらに追記 ： 2009/09/17
現在のテンプレート （上のナビゲーション部分） では、title="" ではない部分で 単純に <%rcomment_body> を使っています。 本当は改行を入れたくないのですが。。。
3. おまけ ： title="<%recent_body>" の応用
右側の ピックアップ View で使用。
ただのHTMLでの記述ですが、 ↑ 最近の記事 で実際に表示される HTMLソースを利用することで 作業を簡略化しています。
<ul>
<li> 該当箇所を この部分に貼り付けているだけです </li>
</ul>
私は、トップページを ソース表示 → 該当箇所を コピーして それを 貼り付けています。 初めて作る時には、ブログの設定 → 記事の設定 で 最新記事一覧 の表示件数を 一時的に増やせば簡単です
※<!--recent--> <!--/recent--> などのような 繰り返しの変数 を使う場合、テンプレートやプラグインで使用する ソースの改行位置を工夫すると コピーし易くなることがあります。 お試しください
[ 参考 ：
テンプレート用 変数一覧｜FC2ブログ公式マニュアル ]
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
