ブログを始めたばかりの頃、「ブログってどのページも枠は全く一緒なんだなぁ」 と思っていた私。 でも色々調べるうちに、ブログでも トップページ を作ったり、ページによって装飾を変えたり...と何でもできることが分かってきました。
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-->
URL例 ./page-0.html ./page-1.html
<!--
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ブログ公式マニュアル ]