FC2ブログの共有テンプレートとして、このサイトとほぼ同じ見た目のテンプレート ari_seo1 が登録・公開されました。 公式テンプレートなどと比べると かなり異なる部分が多いので、主な特徴 や 各エリアでの機能 などを載せておきます。
以下、ari_seoシリーズ全般の 追記の内容を含みます。
共有テンプレート ari_seoシリーズ 一覧 (09/10/14 現在)
(↓ クリックすると、そのテンプレートでこの記事を表示したものが確認できます。)

ari_seo1
Large font , cute version?
2009/09/11~

ari_seo2L
Large font , for Lady's
2009/10/13~

ari_seo2M
Medium font , for Men's
2009/10/14~
テンプレート ari_seoシリーズ について
- SEO対策 と アクセシビリティ に重点を置いて作ったつもりの... テンプレートです。 例えば、検索エンジンが重視する (と思われる) <title>,<h1>→<h2>→,<p>,<a> などの使い方に配慮し、(コメント部分は<h3>,サイドバーにはヘッダーなし...etc)
なるべく記事内容に焦点をおいてもらえるように作ってあります。
- 上部のナビゲーション部分は Stu Nicholls | CSSplay | Skeleton Menu (Skeleton dropdown menu) を、私 (paruparu) が必死にカスタマイズしたものです。 スクリプト未使用 なので、スクリプトOFFでも動作します。
※IE6,IE5.x への対策として、条件分岐コメント(条件付コメント) などが使われています。 そのため、IE6 にも対応。 (IE5.5 でも見た目は ほぼ同じで一応機能しますが、動きはかなりもたつきます。 ちなみに、本家のものは、IE5.5 でもサクサク動くので、多分私が手を加えた :hover あたりの関係です。)
- Windows Vista, Windows XP / Sleipnir2, Firefox3, Opera9, (IE8), IE7, IE6, (IE5.5), Google Chrome2 で動作確認済みです。 文字サイズの拡大,ページのズーム,画像の非表示,javascript無効 など色々な条件でページを閲覧しても大丈夫なように作ったつもりですが、不具合があれば報告お願い致します。
- エリア毎に、私が 便利・有効 だと思うものを組み込んでおきました。 詳細は、以下 にある エリア別の機能 及び 関連リンク,参考サイト を参照してください。 また SEO対策の1つとして、タイトルタグ(<title>)の重複対策 などもしてあります。
- カスタマイズ や 画像の差し替え などは基本的にご自由にどうぞ。 但し、著作権表示の削除 や 再配布にあたる行為 は原則として禁止させていただきます。
使える画像サイズ や 各種装飾 について
- 記事中には 横幅 570px程度 の画像まで入れられます。 但し、テンプレートの変更などの可能性も考えておくなら、横幅も抑えておくと安心です。 (400px以内なら 3カラムなどにしても概ね大丈夫かと思います。)
- サイドバー部分では 横幅 170px程度 までOKです。 (160px や 165px のバナーなどであれば、スッキリ収まると思います。)
- 記事に関する <ul> <ol> <dl>,<h2> <h3> <h4>,絵文字装飾,<blockquote> などには予め 基本的なスタイルを設定してあります。 お好みで変更してご利用ください。 記事タイトル は <h2> になりますので、それを基準に使ってください。 (ちなみにこの記事で使っている この見出し色 は <h3> です。)
エリア別の機能 及び 関連リンク,参考サイト
ここで全ては説明できませんが... エリア別の簡単な説明 と 関連リンクを示しておきます。 関連リンクは 記事下 にまとめていますので、それを参照してください。
1. トップページ <!--index_area--><!--/index_area-->
- 敢えて 「新着記事内容」 を表示しないことで、SEOの面を配慮。 代わりに自己紹介を載せたり、自由なページとして使えます。
- ※トップページに記事を表示したい方は... 別記事のコメント(解説) を参照してください。
- トップページでは プラグインエリア3 が使えます。 フリーエリアなどを上手く利用してトップページを構成してみてください。
2. 個別記事ページ <!--permanent_area--><!--/permanent_area-->
- 検索結果になるべくこのページ (固定リンク) が選ばれるように配慮してあります。 ユーザータグを設定している記事の場合、それがページのキーワードともなり、<meta> データにも反映されます。 <meta name="description" ~ /> はデフォルトでは入れていないので、この設定も追加したい場合には、関連記事 を参照してみてください。
- コメント装飾機能 : FC2の公式スクリプトです。 若干表示が重くなるので必要ない場合は外してください。(私の軽量版 改変ソースもよかったらどうぞ。)
- コメントのプレビュー機能 : 最近 より使いやすくなった FCafe danielさんのコメントプレビュースクリプトです。 [ 関連記事 ]
- 管理人のコメントを区別する機能 (スタイルシートに設定を加えると機能します。) : 枠色,文字色が変わりますが、背景に画像を入れたりしてもOKです!
- コメント投稿者のURLを別窓で開く機能 : 変数だけでは対応できないので、スクリプトを使用。 (デフォルトではスクリプトOFF環境では表示されないようになっていますが、これは敢えて...です。 同時にコメントスパム対策にもなるかなと思っています。 ) スクリプトOFF などにも対応させたい場合には 参照サイト にある <noscript>~</noscript> 部分を追加してください。
3. コメント編集ページ <!--edit_area--><!--/edit_area-->
- コメントのプレビュー機能
- タイトルタグの重複対策 : 通常は <title> に親記事の記事タイトルが入ってしまうので調整。 SEO対策として。
4. カテゴリー別ページ <!--category_area--><!--/category_area-->
- 便利ナビ : 目的の記事に素早くアクセスできます。
- タイトルタグの重複対策
- 続きを読む(追記部分) の折りたたみ
5. 月別ページ,日別ページ <!--date_area--><!--/date_area-->
- 便利ナビ : 未来の月などへの空リンクが表示されないような機能も追加
- タイトルタグの重複対策
- 続きを読む(追記部分) の折りたたみ
6. 検索結果ページ <!--search_area--><!--/search_area-->
- KW強調ボタン + 便利ナビ
- タイトルタグの重複対策
- 続きを読む(追記部分) の折りたたみ
- 検索結果が0件の場合にメッセージを表示
7. タグ検索結果ページ <!--tag_area--><!--/tag_area-->
- このページ、実はかなり有効なページです!! このテンプレートの効果が一番発揮されるところかと思います。 無駄にしては勿体ないですよ。。。
- KW強調ボタン + 便利ナビ
- タイトルタグの重複対策
- 続きを読む(追記部分) の折りたたみ
- そのタグが存在しない場合にメッセージを表示 : ユーザータグを削除した場合への配慮。 関連記事 参照。
8. 全記事一覧ページ <!--titlelist_area--><!--/titlelist_area-->
- 重くなりがちなページなので、余計なプラグイン部分は非表示に。
- 全記事一覧 と 全タグリスト(ユーザータグ一覧) のみを表示して、サイトマップ (目次ページ) としての機能を強化してあります。
9. それ以外のページ ./page-0.html ./page-1.html ... [ 詳細 ]
- 便利ナビ
- タイトルタグの重複対策
- 続きを読む(追記部分) の折りたたみ
- トップページに記事を表示させない分、このページへも簡単にアクセスできるようにしてあります。
- 新しい記事から数件まとめて順に表示される 動的ページ なので、SEOの面を配慮。 このページが検索結果に選ばれても困るので。。。 (検索エンジンでの検索結果には、個別記事ページ (固定リンク) をなるべく選んでもらえるように考えてあります。)
右の数字はその内容の主な 関連エリア(上の番号) です。
2009/09/28 以前に 共有テンプレート ari_seo1 をダウンロードされた方へ
追記 : 2009/10/01 (2. 3. 参照)
本日、共有テンプレート ari_seo1 において、重大なケアレスミスがあったこと発見し、共有テンプレートの訂正・再登録を行いました。 該当箇所は以下のとおりです。
1. テンプレートの <head>~</head> 部分にある ↓ の部分
誤 : 2009/09/28 以前
<!--not_index_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_edit_area--><!--not_date_area--><title><%sub_title> no<!--topentry-->.<%topentry_no> <!--/topentry--> 【 ありのごとくあつまりて 】</title><!--/not_date_area--><!--/not_edit_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area-->
「複数の記事 が 設定件数分まとめて表示されるページ」 で表示される ページタイトル後半 が 私の使っているブログ名のままの状態で 公開していました。
正 : 2009/09/28 訂正以降~
<!--not_index_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_edit_area--><!--not_date_area--><title><%sub_title> no<!--topentry-->.<%topentry_no> <!--/topentry--> 【 <%blog_name> 】</title><!--/not_date_area--><!--/not_edit_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area-->
既に気付いて修正した方も多いかと思いますが、気付かず 修正がまだの方は早急に直していただくか、再度ダウンロードしてご利用いただきますよう お願い申し上げます。
以下、2009/10/01 追記の内容を含みます。
2. コメントのヘッダーに表示される画像部分
2009/09/16 頃 ~ 2009/09/30 にダウンロードされたテンプレート (スタイルシート部分) において、以下の内容が抜けてしまっているものがありました。
/* Comment, Trackback
------------------------------------- */
(中略)
.cm_title {
margin:20px 0;
height:84px;
background:url("http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_cm_1.png") no-repeat;
}
.cm_title h3 {
padding:40px 40px 5px 50px;
text-align:right;
font-size:14px;
}
この記事へのコメント というヒヨコの画像が表示されていない方は スタイルシート の ↑ 該当部分に 赤文字部分のスタイルを追加してもらうと 表示できるようになります。
3. 記事下 (記事編集) 部分の管理用リンク
誤 : 2009/09/30 以前
<p class="url"><a href="http://blog19.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">(記事編集)</a> <a href="<%topentry_link>" title="個別記事URL"><%topentry_link></a></p>
私の使っている ブログサーバーNo.のままの状態で 公開していました
これでは、編集画面 が開かなかったと思います。 場所は テンプレートの丁度真ん中辺り にあります。
正 : 2009/10/01 訂正以降~
<p class="url"><a rel="nofollow" href="http://blog<%server_no>.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">(記事編集)</a> <a href="<%topentry_link>" title="個別記事URL"><%topentry_link></a></p>
追記 : 仕様変更のため 2011/02/16 ~ 以下のソースに変更しています。
<p class="url"><a rel="nofollow" href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" class="edit" title="管理用">(記事編集)</a> <a href="<%topentry_link>" title="個別記事URL"><%topentry_link></a></p>
本当に申し訳ありません。。。 今後十分に気をつけます。
また、2009/09/16 よりも前のテンプレートでは ブラウザによってナビゲーションメニューの動きが安定しない ことがありましたが、(:hover の追従 や z-index の指定等を見直し) 2009/09/18 ~ 現在 はこのあたりの不具合を修正したものを公開しています。

FC2ブログで、スクリプトを使わない カテゴリー別の記事一覧 (サイトマップ) を作る方法。 このサイトでは、一般的な 日付順の全記事一覧ページ の他に、カテゴリー別の記事一覧ページ があり、両方を使えるようにしてあるのですが... これ、実はどちらもスクリプト未使用。 今回は、このタネあかしをしちゃいます !!
- スクリプト未使用なので、無駄もなく、重くならない!
- 日付順 と カテゴリー別 という内容の異なるサイトマップを扱えるため、利用者が目的によって使い分けられる。 また、SEO対策 の1つとしても有効。
カスタマイズの難易度は高めですが、是非チャレンジしてみてください。
日付順の全記事一覧 と カテゴリー別の全記事一覧 の作り方
適用中のテンプレート は 日付順の全記事一覧ページ にするという前提で説明していきます。 その方が、通常のテンプレート自体がゴチャゴチャしなくて良いかな・・・と。 日付順の全記事一覧 については もはや説明不要かと思いますが... 私のテンプレートでは ↓下のような感じです。 (共有テンプレート ari_seoシリーズ でも 灰色部分以外 同じです。)
<!--titlelist_area-->
<!-- ▼全記事一覧▼ -->
<p>このサイトマップは...<br />
<a href="./?pc&template=categorymap&all" title="カテゴリー別の記事一覧へ">カテゴリー別に並べ替え</a> もできます。</p>
<div class="entry_title"><h2>日付順の全記事一覧</h2></div>
<div class="all_m">
<!--titlelist-->
<h3><a href="<%titlelist_url>" title="個別記事ページへ">
<%titlelist_title></a></h3><p><%titlelist_body> …</p><div class="t_right">
<%titlelist_year>/<%titlelist_month>/<%titlelist_day> (<%titlelist_wayoubi>) [<a href="<%titlelist_category_url>" title="カテゴリー: <%titlelist_category> へ"><%titlelist_category></a>]</div>
<!--/titlelist-->
</div><!--/class=all_m-->
<!-- ▲全記事一覧▲ -->
<!--/titlelist_area-->
1. 準備 (カテゴリー別の全記事一覧)
-
Firefox などの「選択部分のソースを表示する」機能を持つブラウザ か、 Chrome 拡張機能 『View Selection Source』 など が必要になります。 無くても作れない訳ではないですが... 少なくとも記事数が多い場合には必要です。
-
現在適用中のテンプレートの 「複製」 をまず1つ作ります。 必要な部分は HTMLの枠組み(構造)部分 と ヘッダーやフッター,サイドバーなどのブログの枠組み部分です。 (※FC2の広告変数 <%ad> <%ad2> は削除すると保存できないので注意!) それ以外は必要ないので 構造を壊さないように...削除しちゃってください。
-
必須ではないので後回しにしてもOKですが、スタイルシートは公開ブログのものと共有 にしておきます。 複製テンプレートのスタイルシート部分は削除し、 テンプレートの <link rel="stylesheet" type="text/css" href="<%css_link>" /> となっている部分の <%css_link> という部分を 適用中のテンプレートのCSS に変更します。
追記 (2013/04/20):
現在は、テンプレート更新毎に新しいスタイルシートが生成される仕様 になっているため、↑ のような設定は使えません。<%server_no> も利用不可です。 なので、
<link rel="stylesheet" type="text/css" href="<%css_link>" /> を残して、スタイルシートもそのまま利用してください。
-
今作った 複製テンプレート の 「さらに複製」 をもう1つ作ります。 テンプレート名が紛らわしいと思うので、1つは [script] ,もう1つは [categorymap] のように判りやすい名前をつけておいてください。
※今後、この [script],[categorymap] という仮のテンプレート名で説明を続けさせていただきます。
2. 全記事一覧ページ をプレビューする手段を作る
3. いたおさん のスクリプトをお借りする・・・
もう、お気づきだと思いますが、ここでスクリプトを使用します。 お借りするのは、FC2ブログのテンプレート工房 いたおさんのスクリプト 「親子カテゴリ対応サイトマップ」 です。
これを参考にして テンプレート [script] に手を加えていきます。 ちなみに私のカスタマイズしたソースは ↓ こんな感じ。 (※実際のものよりも判りやすくしてあります。)
【 参照 : 直接編集OK 整形済みコピー用ソース 】
<head> 部分
1‐3 で <link rel="stylesheet" type="text/css" href="http://<%blog_id>.blog<%server_no>.fc2.com/template/公開ブログのテンプレート名/style.css" /> と入れておいた後などに 適用中のスタイルシートでは足りない分を追加。
追記 (2013/05/30) :
現在は、テンプレート更新毎に新しいスタイルシートが生成される仕様 になっているため、↑ のような設定は使えません。<%server_no> も利用不可です。 なので、
<link rel="stylesheet" type="text/css" href="<%css_link>" /> を残してその下に記入してください。 (全てを スタイルシート に入れてもOKです。)
<style type="text/css">
.all_mokuji a {
white-space:nowrap;
}
.t_right {
text-align:right;
}
.all_m h2,
.all_m h3.h2modoki {
margin:12px 0 12px 0;
padding:3px 8px 3px 11px;
border-bottom:1px solid #ffcccc;
border-left:9px solid #ff6699;
font-size:129%;
}
.all_m h3 {
margin:24px 12px 12px 0;
padding:3px 8px 3px 12px;
border-bottom:1px solid #99cc99;
border-left:8px solid #99cc66;
font-size:122%;
}
.all_m li {
margin:5px 5px 15px 41px;
line-height:1.4;
color:#666;
}
.all_m li a {
display:block;
font-size:125%;
}
.all_m li a:link {
color:#0066cc;
}
.all_m li a:hover {
color:#ff6699;
}
</style>
<body> 部分
私のテンプレートならば、<div id="content"> ~ </div><!--/id=content--> の間にはめてください。 ページのいわゆる中心部分。
(※項目の目次部分は 横型 にしてみました。)
<!--titlelist_area-->
<p>このページの項目(カテゴリー)目次</p>
<ul class="all_mokuji" style="list-style:none">
<!--category-->
<!--category_parent-->
<li><a href="#c<%category_no>" title="この項目の先頭へ
total <%category_count> 件"><b><%category_name></b></a> »
<!--/category_parent--><!--category_sub_hasnext-->
<a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a>
<!--/category_sub_hasnext--><!--category_sub_end-->
<a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_sub_end-->
<!--category_nosub-->
<li style="float:left"><a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a> </li>
<!--/category_nosub-->
<!--/category-->
</ul>
<p class="t_right" style="clear:both; margin-top:12px"><a href="./archives.html" title="通常のサイトマップへ">日付順の全記事一覧へ戻る</a></p>
<!-- ▼全記事一覧▼ -->
<div class="entry_title"><h2>カテゴリー別の記事一覧</h2></div>
<div class="all_m">
<div style="display:none">
<ul>
<!--titlelist-->
<li name="<%titlelist_category_no>" id="<%titlelist_category_no>">
<a href="<%titlelist_url>">
<%titlelist_title></a><%titlelist_year>/<%titlelist_month>/<%titlelist_day> <%titlelist_body> ・・・
</li>
<!--/titlelist-->
</ul>
</div>
<!--category-->
<h3 id="sub<%category_no>name"<!--category_parent--> class="h2modoki"<!--/category_parent-->>
<a href="<%category_link>" title="カテゴリー: <%category_name> へ" name="c<%category_no>" id="c<%category_no>"><!--category_parent-->親カテゴリー : <!--/category_parent--><%category_name></a>
</h3>
<div id="sub<%category_no>list">
<script type="text/javascript">
// <![CDATA[
var list = document.getElementsByName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ol>');
for (var i = 0; i < list.length; i++) { // 新しい記事から
// for (var i = list.length - 1; i >= 0; i--) { // 古い記事からの場合
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li>', s,'</li>');
} else {
document.write('<li>', s,'</li>');
}
}
if(list.length > 0) document.write('</ol>');
// ]]>
</script>
<div class="t_right">| <a href="#top" title="このページの先頭へ">↑ ページ先頭へ ↑</a> |</div>
</div><!--/id=sub_no_list-->
<!--/category-->
</div><!--/class=all_m-->
<!-- ▲全記事一覧▲ -->
<!--/titlelist_area-->
完成した 実際のページがこちら。 うぉ~出来た!!
通常は、これで終りにするところかと思いますが... ちょっとだけ問題が。。。
追記 (2013/05/30) :
現在は 全記事一覧の出力件数が 100件単位 に変更されてしまった為(これまでは 500件単位 だったのですが...) 1ページ目には 100件分の記事しか反映されなくなりました。
- カテゴリー番号に id をふって、それで振り分けるという作業をしているため、どうしても id の重複 が起きてしまい、ブラウザによってはエラーを指摘されます。 (でもこれ以外に振り分け方法はなさそうなので仕方がないことですが。)
- 一旦、日付順に並べたものをスクリプトを使って並べ変えるため、ページが重くなってしまう。 (このスクリプトだけの問題ではない場合が 殆どかと思いますが、)非力なパソコンではフリーズしてしまうこともあるような。。。
せっかく、ここまで作ったら、もうひと手間かけてノンスクリプト化してみては・・・? という訳で次へ進む。
4. コピー&ペースト で ノンスクリプト版を!
【 参照 : 直接編集OK 整形済みコピー用ソース 】
今度は テンプレート [categorymap] (公開するノンスクリプト版カテゴリー別の記事一覧用テンプレート) を仕上げていきます。
-
上の点線枠内部分 以外のソースは、そのまま使えるので テンプレート [script] で完成したソースをそのまま [categorymap] にコピぺします。
さらに <!--titlelist_area--> ~ <!--titlelist_area--> の間に、 ↓ 下の一文を追加。 (※ノンスクリプト版は、<!--titlelist_area--> と <!--/titlelist_area--> を削除してもOKです。 削除した場合は、プレビューでの表示確認 がしやすくなります。)
<!--titlelist--><!--/titlelist-->
↑ これ、入れ忘れると表示できないので注意!
-
./?pc&template=script&all を Firefox など (「選択部分のソースを表示する」 機能を持つブラウザ) で表示し、範囲選択 → 「選択部分のソースを表示する」 機能 を使って上の点線枠内部分に該当する部分 をコピーし、 [categorymap] の該当場所へ貼り付けます。
※必要な場所だけ、上手に範囲選択するのがポイントです! javascript や id を含まないカテゴリー毎の一覧部分だけがコピーできますよ♪
- 公開ブログにもリンクを張ったら・・・ 完成!! お疲れ様でした。
例えば、↓ のような感じで入れてください。
<ul>
<li><a href="./archives.html" title="日付順の全記事一覧を表示します">日付順の全記事一覧</a></li>
<li><a href="./?pc&template=categorymap&all" title="カテゴリー毎の記事一覧を表示します">カテゴリー別の記事一覧</a></li>
</ul>
お好みで、コメントなどを加えることもできるので、作り方次第では よりサイトマップらしいページができるかもしれませんよ。
おまけ : 更新はどうする??
後は、新しく書いた記事の分を追加していけばOKですが、その都度でも 時々でも どちらでもいいんじゃないかと。。。 全自動好みの方には辛いかもしれませんが、ブログじゃなかったらもっと大変な部分だろうし、後はお好みで。
追記 : 2011/09/27
ソースで使っているアドレスを ./index.php?style2=テンプレート名&all という形式から ./?pc&template=テンプレート名&all の形式に変更しました。 表示結果はどちらも同じなので、どちらの形式のアドレスを使っても表示に違いはありません。