サイトマップ 【 ありのごとくあつまりて 】

前回の記事 を書いていて気付いたのですが... <%titlelist_comment_num> と <%titlelist_tb_num> がいつの間にかマニュアルに追加されていました。 検索しても公式マニュアルしかヒットしないので、恐らくかなり最近 追加された変数です。

記事に付いたコメント数 や トラックバック数 が 一覧で分かったら面白いかなと思ったので、早速 導入してみました。

スポンサーサイト

FC2ブログで、スクリプトを使わない カテゴリー別の記事一覧 （サイトマップ） を作る方法。 このサイトでは、一般的な 日付順の全記事一覧ページ の他に、カテゴリー別の記事一覧ページ があり、両方を使えるようにしてあるのですが．．． これ、実はどちらもスクリプト未使用。 今回は、このタネあかしをしちゃいます !!

• スクリプト未使用なので、無駄もなく、重くならない！
• 日付順 と カテゴリー別 という内容の異なるサイトマップを扱えるため、利用者が目的によって使い分けられる。 また、SEO対策 の1つとしても有効。

カスタマイズの難易度は高めですが、是非チャレンジしてみてください。

日付順の全記事一覧 と カテゴリー別の全記事一覧 の作り方

適用中のテンプレート は 日付順の全記事一覧ページ にするという前提で説明していきます。 その方が、通常のテンプレート自体がゴチャゴチャしなくて良いかな・・・と。 日付順の全記事一覧 については もはや説明不要かと思いますが．．． 私のテンプレートでは ↓下のような感じです。 （共有テンプレート ari_seoシリーズ でも 灰色部分以外 同じです。）

1.　準備 （カテゴリー別の全記事一覧）

1. Firefox などの「選択部分のソースを表示する」機能を持つブラウザ か、 Chrome 拡張機能 『View Selection Source』 など が必要になります。 無くても作れない訳ではないですが... 少なくとも記事数が多い場合には必要です。
   
   
2. 現在適用中のテンプレートの 「複製」 をまず1つ作ります。 必要な部分は HTMLの枠組み（構造）部分 と ヘッダーやフッター，サイドバーなどのブログの枠組み部分です。 （※FC2の広告変数 <%ad> <%ad2> は削除すると保存できないので注意！） それ以外は必要ないので 構造を壊さないように．．．削除しちゃってください。
   
   
3. 必須ではないので後回しにしても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>" /> を残して、スタイルシートもそのまま利用してください。
4. 今作った 複製テンプレート の 「さらに複製」 をもう1つ作ります。 テンプレート名が紛らわしいと思うので、1つは [script] ，もう1つは ［categorymap］ のように判りやすい名前をつけておいてください。
   ※今後、この [script]，［categorymap］ という仮のテンプレート名で説明を続けさせていただきます。

2.　全記事一覧ページ をプレビューする手段を作る

• 今回の作業を行うのは 全記事一覧ページ （<!--titlelist_area--> を含むページ） になりますが、テンプレートの編集→プレビューで表示できるのは トップページ です。 なので、テンプレートの編集作業を確認するための手段を用意しておきます。
  
  
• http://arinogotokuatumarite.blog19.fc2.com/?pc&template=script&all
  http://arinogotokuatumarite.blog19.fc2.com/?pc&template=categorymap&all
  アドレスは↑ のようになるので、これを自分用に書き換え ブックマーク （お気に入り） などに追加しておいてもOKですが．．．
  
  そのテンプレート [script]，［categorymap］ に 以下のような トップページで表示されるリンク を張っておくのがお勧めです。
  <!--index_area-->
  <a rel="nofollow" href="./?pc&template=script&amp;all">
  スクリプト版 カテゴリー別の全記事一覧ページ</a>
  <a href="./?pc&template=categorymap&amp;all">
  ノンスクリプト版 カテゴリー別の記事一覧ページ</a>
  <!--/index_area-->
  これで、準備は完了です!!

3.　いたおさん のスクリプトをお借りする・・・

もう、お気づきだと思いますが、ここでスクリプトを使用します。 お借りするのは、FC2ブログのテンプレート工房 いたおさんのスクリプト 「親子カテゴリ対応サイトマップ」 です。

これを参考にして テンプレート [script] に手を加えていきます。 ちなみに私のカスタマイズしたソースは ↓ こんな感じ。 （※実際のものよりも判りやすくしてあります。）

ユーザータグの一覧 や タグクラウド を 「1つの記事に表示する方法」 「全記事一覧ページだけに表示する方法」 この2つを紹介します。

ちなみに．．．私は以前から サイトマップ と ある1つの記事の中 にだけユーザータグを全て表示する方法を取っています。 その理由は、

• 全てのページに表示しておくと、それだけで膨大な数のリンクが生成されてしまい、SEOの観点から考えてみると、「ページ本来のキーワードが薄れてしまう」 気がするから。
• それと、タグ検索に使える だけでなく、通常のサイト内検索 （ブログ内検索） の際にも有効！・・・と思っているから。
  
  追記 （2013/08/12） :
  以前は 検索結果を古い順 にしていたので、検索キーワードにユーザータグを含んでいる場合、古い日付けのユーザータグ一覧ページ が検索結果の最初に表示されるようにしていました。 今は新しい順にしたので、少し別の感じになっています。

実は、単純なリスト表示を使っています。 サイトマップ では、そのまま 1列のリスト表示， ユーザータグ一覧用の記事 では 2列のリスト表示 （float:left を利用した2段組風表示） になっています。 ズラズラと横につながる 一般的なタグ一覧 や タグクラウド などに比べて少し探しやすいのではないかな．．．と。

【　続きを閉じる　】

1.　ユーザータグの一覧を 「1つの記事に表示する方法」

FC2のプレビュー機能を使えば、方法は何通りかあるのですが．．． ここではその1つを例に説明していきます。 一見、難しそうに見えるかもしれませんが、要は 「ソースのコピー&ペースト」 意外と単純です。

1-1　スタイルシートに 以下↓ を記入

【 参照 ： 直接編集OK　整形済みコピー用ソース 】

/* ユーザータグ一覧記事用 */
.MultiLineList { float:left; width:350px; }
.MultiLineList li { float:left; width:50%; }

ここで、注意しなければいけないのが 「ブラウザによって表示，仕様が異なる」 という点です。 中でも IE6 や IE5.5 では width で指定する幅 を ピッタリサイズより かなり減らしておかないと レイアウトが崩れる恐れがあります。 また、IE7以下 では リストの先頭マーク が何故か表示されません。 （Sleipnir2， IE8， IE7， IE6， IE5.5， Firefox3， Opera9， Google Chrome2 で表示確認済。）

幅は、余裕を持たせた タグが改行されないで表示できる程度 でテストしてみてください。 （※上のスタイルシートで設定している幅は、以前の 3カラムテンプレート でのものです。 現在は 510px に変更しました。）

1-2　ユーザータグ一覧用の記事 を準備する

私の記事 をベースに、記事内容の一例を載せておきます。 ■色文字部分 を入れてもらえれば、他の部分はご自由にどうぞ。

【 参照 ： 直接編集OK　整形済みコピー用ソース 】

<p>各記事に設定している ユーザータグ 一覧です。 リンクをクリックすると該当記事を表示します。<br />
【 最終更新日: 2009/00/00，（ ）数字 は該当記事 件数です 】</p>
<div style="line-height:2.2">
<ul class="MultiLineList">

<!-- タグリンクのリスト を ここに貼り付け -->

</ul>
</div><br style="clear:both" />

1-3　公式プラグインからプラグインを1つ追加する

1-4　【HTMLの編集】 で 内容を 以下↓ に変更

作業用の 「表示しない （非表示の）」 プラグインを用意したいだけなので、何でもOKです！ 迷ったら 「ユーザータグ」 でも選んで追加してください。

【 参照 ： 直接編集OK　整形済みコピー用ソース 】

<ul>

<!--ctag-->
<li><a href="<%ctag_url>"><%ctag_name> (<%ctag_count>)</a>
</li>
<!--/ctag-->

</ul>

上のソースのまま貼り付けてもらうと、後の作業がしやすくなります。
貼り付けたら、プレビューしてみる。 ユーザータグが 1列のリストで表示 されているはずなので、これを保存 （「設定」 を押す）。 これで、準備は完了です!!

1-5　プラグイン → プレビュー → ソースのコピー

普段はこれ以降の作業のみ行います。 1-4 で作ったプラグインをプレビューし、Webページのソースを表示・その箇所のソースをコピーします。

（1-6　コピーしたソースの絶対指定を 相対指定 に置換）

これは余力がある方は行ってください。 せっかくなので、一括置換機能を使い、ソースを軽くしておきましょう！ 面倒であれば、この作業は不要です。

1-7　ユーザータグ一覧用の記事 に貼り付けます。

<ul class="MultiLineList"> ～ </ul> の間に、ソースを正しく貼り付けてください。 これで完成です♪

以降、1-5～1-7 の作業をして、時々 この記事の内容 を更新してもらえればOKです。 「過去の記事の管理」 → 「編集」 からでもOKですが、記事に 「編集モードへのリンク」 を設置しておくと、何かと便利です。

• ブログ記事に 編集モード へのリンクを設置

2.　ユーザータグの一覧を 「全記事一覧ページ ./archives.html （./?all） だけでオート表示する方法」

追記 ： 2009/08/11
共有プラグイン に 検索BOX・タグ一覧 が登録されました。 以下と同じものが手軽に使えますので よかったらどうぞ！

プラグインの詳細 → 【HTMLの編集】 で （上の 1-4 の内容を） ↓ 以下のように書き換え、「表示する」 に変更します。 ついでに、このサイトでも使っている FC2の 「サイト内検索 （検索用ソース）」 などもつけておきました。 ソースは一例ですが、使えそうならどうぞ。

【 参照 ： 直接編集OK　整形済みコピー用ソース 】

<form action="./" method="get">
サイト内検索 [ <a href="./blog-entry-33.html" title="ユーザータグ を一覧表示します">タグ検索</a> ]<br />
<input type="text" size="15" style="width:110px" name="q" value="<%search_word><%tag_word>" maxlength="100" /> <input type="submit" value="検索" /><br />
</form>

<!--not_titlelist_area-->
<p><a href="./archives.html" title="全記事一覧ページへ　&#10;（ユーザータグ も一覧表示します）">全記事一覧，全タグ一覧へ</a></p>
<!--/not_titlelist_area-->

<!--titlelist_area-->
<p>ユーザータグ 一覧です。 リンクをクリックすると該当記事を表示します。</p>
<ul>

<!--ctag-->
<li><a href="<%ctag_url>"><%ctag_name> (<%ctag_count>)</a>
</li>
<!--/ctag-->

</ul>
<!--/titlelist_area-->

灰色の背景部分 は、ユーザータグの一覧 を 「1つの記事にも表示する」 場合、（その記事番号に変更して） 入れてください。

上の 1-4 の場合と異なり、プラグインのプレビューでは （トップページが表示されるため） ユーザータグ一覧は、そこでは確認できません。 逆に、公開中の 全記事一覧ページ で常に確認ができるので、ソースを表示・その箇所のソースをコピーには 全記事一覧ページ ./archives.html （./?all） を使ってください。

関連記事

• FC2ブログのエリア変数　表示されるページ見本
• FC2のプレビューでトップページ以外を確認
• FC2ユーザータグを利用したSEO対策
• ブログのページナビゲーション （便利ナビ）
• 検索用語をハイライト（強調表示）するスクリプト

1ヶ月くらい前から 無料のアクセス解析ツール AccessAnalyzer （アクセスアナライザー） を設置しています。 以前は、個人のブログに アクセス解析 なんて必要ないと思っていましたが、試しに設置してみると 本当に色々なことに気づき、ブログテンプレートの修正、修正．．．の日々です。

追記 ： 2009/02/17　
2008年11月21日より アクセス解析 を Research Artisa （リサーチアルチザン） + Google Analytics （グーグルアナリティクス） に乗り換えました。
[ 関連記事 ： お気に入りのアクセス解析 Research Artisan ]

追記 ： 2010/04/22　
2010年04月16日より アクセス解析 を QLOOKアクセス解析 （クルックアナリティクス） + Google Analytics （グーグルアナリティクス） に変更しました。
[ 関連記事 ： 無料のアクセス解析比較 （2010再び） ]

Google検索 からのアクセスが一番多い

「ブログは Google検索 に有利」 ．．．と最近知りました

検索結果に表示されるページが意図するページと違う

検索結果のかなり上位に表示されることがあったものの、リンクが各記事ではなく トップページ や 前後の記事 だったことが度々あり、目的の記事に辿り着けていない可能性がありました。 で、対策として <h1>タグ を ブログタイトル から サブタイトル＋ブログタイトル （<h1><%sub_title> 【 ありのごとくあつまりて 】</h1>） に変更 してみたところ改善。　追記 ： 現在は <h1>ありのごとくあつまりて</h1> に戻してあります。 他を少し工夫すれば、これでも問題なさそうです。
また、Googleサイトマップ（by FC2） を利用することでも改善しました。 （※FC2ブログユーザー以外は →Googleウェブマスターツール を参照）

検索結果で表示される内容が変？　

当初 （テンプレートの初期状態） は、テンプレートに
<meta name="discription" content="<%introduction>" /> というソースコードが入っていて、これが全てのページに反映。 そのため、本来 ページの要約 を示しているはずの部分 が ブログの説明 （→FC2ブログのユーザー情報で設定した ブログの説明<%introduction>） になっていて、検索結果でも これが表示されることが多かったのですが、各記事で同じものが表示されるのは変かなと思い、テンプレートを修正。
[ 関連記事 ： FC2ユーザータグを利用したSEO対策（4. おまけ 参照） ]

<meta name="discription" content="" /> は使わないというのも1つの方法かと思いますが、私は ページの要約 が明確にできる トップページ と 個別記事ページ（固定リンクページ） にのみ設定しています。
また、テンプレートで使われている <p> の見直し。 記事本文 と コメント部分のみに <p> を使用 、それ以外は <div>等 に変更しました。