上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html
--/--/-- ～ |
Comment (-)
tweet? |
↑ ページ先頭へ ↑ |
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. 全記事一覧ページ をプレビューする手段を作る
-
今回の作業を行うのは 全記事一覧ページ （<!--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&all">
スクリプト版 カテゴリー別の全記事一覧ページ</a>
<a href="./?pc&template=
categorymap&all">
ノンスクリプト版 カテゴリー別の記事一覧ページ</a>
<!--/index_area-->
これで、準備は完了です!!
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 の形式に変更しました。 表示結果はどちらも同じなので、どちらの形式のアドレスを使っても表示に違いはありません。
スポンサーサイト
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
