ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
カテゴリー別の記事一覧  全記事一覧  スクリプト未使用  サイトマップ  FC2ブログ  

スクリプト未使用 カテゴリー別サイトマップ

2009/09/29 (火)  カテゴリー: ブログカスタマイズ上級
カテゴリー別サイトマップ

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

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

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

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

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

<!--titlelist_area-->
<!-- ▼全記事一覧▼ -->
<p>このサイトマップは...<br />
<a href="./?pc&template=categorymap&amp;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. 準備 (カテゴリー別の全記事一覧)

  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] に手を加えていきます。 ちなみに私のカスタマイズしたソースは ↓ こんな感じ。 (※実際のものよりも判りやすくしてあります。)

【 参照 : 直接編集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> &#187;&nbsp;
<!--/category_parent--><!--category_sub_hasnext-->
<a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a>&nbsp;
<!--/category_sub_hasnext--><!--category_sub_end-->
<a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a>&nbsp;
</li>
<!--/category_sub_end-->
<!--category_nosub-->
<li style="float:left"><a href="#c<%category_no>" title="この項目の先頭へ"><%category_name> (<%category_count>)</a>&nbsp;</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] (公開するノンスクリプト版カテゴリー別の記事一覧用テンプレート) を仕上げていきます。

  1. 上の点線枠内部分 以外のソースは、そのまま使えるので テンプレート [script] で完成したソースをそのまま [categorymap] にコピぺします。

    さらに <!--titlelist_area--> ~ <!--titlelist_area--> の間に、 ↓ 下の一文を追加。 (※ノンスクリプト版は、<!--titlelist_area--> と <!--/titlelist_area--> を削除してもOKです。 削除した場合は、プレビューでの表示確認 がしやすくなります。)
    <!--titlelist--><!--/titlelist-->
    ↑ これ、入れ忘れると表示できないので注意!

  2. ./?pc&template=script&all を Firefox など (「選択部分のソースを表示する」 機能を持つブラウザ) で表示し、範囲選択 → 「選択部分のソースを表示する」 機能 を使って上の点線枠内部分に該当する部分 をコピーし、 [categorymap] の該当場所へ貼り付けます。

    ※必要な場所だけ、上手に範囲選択するのがポイントです! javascript や id を含まないカテゴリー毎の一覧部分だけがコピーできますよ♪

  3. 公開ブログにもリンクを張ったら・・・ 完成!! お疲れ様でした。
    例えば、↓ のような感じで入れてください。
    <ul>
    <li><a href="./archives.html" title="日付順の全記事一覧を表示します">日付順の全記事一覧</a></li>
    <li><a href="./?pc&template=categorymap&amp;all" title="カテゴリー毎の記事一覧を表示します">カテゴリー別の記事一覧</a></li>
    </ul>

    お好みで、コメントなどを加えることもできるので、作り方次第では よりサイトマップらしいページができるかもしれませんよ。

おまけ : 更新はどうする??

後は、新しく書いた記事の分を追加していけばOKですが、その都度でも 時々でも どちらでもいいんじゃないかと。。。 全自動好みの方には辛いかもしれませんが、ブログじゃなかったらもっと大変な部分だろうし、後はお好みで。

追記 : 2011/09/27
ソースで使っているアドレスを ./index.php?style2=テンプレート名&all という形式から ./?pc&template=テンプレート名&all の形式に変更しました。 表示結果はどちらも同じなので、どちらの形式のアドレスを使っても表示に違いはありません。

キーワード検索 : カテゴリー別の記事一覧  全記事一覧  スクリプト未使用  サイトマップ  FC2ブログ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-83.html

2009/09/29 ~ | Comment (17) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

17 Comment


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- |  2009/10/01 (木)  No.72


私のテンプレートならば、「<body> 部分」 で示した内容を 

<div id="content"> ~ </div><!--/id=content--> 

の間にはめてもらえると正しく表示できると思います。
( ナビゲーションメニューよりももう少し下辺りにあります。)
この中に入れてある内容は ガバッと丸ごと削除しちゃってOKです。

追記 : 2009/10/02
ページの目次部分で、カテゴリー名 が途中で折り返されないように、記事中のソースをちょっと修正しておきました。

paruparu |  2009/10/01 (木) [ 編集 ] No.73


大変参考になりました。

この記事を見ながらノンスクリプト版を作ってみました。
大変判りやすい文章で無知な私でも何とかなりました。
貴重な記事に感謝いたします。

yuuki |  2010/02/19 (金)  No.307


おお!

yuuki さん、はじめまして。
ちょっと面倒なこの内容... 「出来た」 と報告していただけると 私も嬉しいです。
実際に使っている方は、多分まだ数人...かも。 便利になれば幸いです!

paruparu |  2010/02/19 (金) [ 編集 ] No.308


実装できました

FC2 初心者にはちょっと難解でしたが手順通りに
進んだら何とか実装できました。
「コメント装飾」の文字版もできました。
覚書程度ですが記事にもしてあります。
ありがとうございました。

softstreet |  2010/04/09 (金) [ 編集 ] No.446


softstreetさん、はじめまして。

記事がお役に立てて良かったです。 リンクもありがとうございます。
サイトマップ、スクリプト版 を別テンプレートで使ったのですよね。
拝見したところ、archives.html もそのまま使える状態のようなので、別テンプレのソースに 移動先のリンクを入れておいたらどうでしょうか。 必要性はそれ程ないかもしれませんが、せっかく使える状態なので...もしよかったら。
<noscript><a href="./archives.html">ノンスクリプト版はこちらのページ</a></noscript>

それと、「コメント装飾」の文字版 というのも... 面白いですね!

paruparu |  2010/04/09 (金) [ 編集 ] No.447


ご助言お願いします。

引越し最後の仕上げにカテゴリー別記事一覧の作成に着手してるのですが、
ノースクリプト版で不具合が出てしまうので、ご助言頂けないでしょうか。

Script版の作成までは問題なく出来、動作も異常ありません。
ここから、記事アドレスのソースを抜き出し、ノースクリプト版の
一覧を作成し、↑~↓内に<!--titlelist-->~<!--/titlelist-->タグで囲って
配置したのですが、いざ表示してみると、レイアウト自体は自分の想像通りの
形になっているのですが「同じリストが何度も表示される」不具合が出てしまいました。
※ブラウザー拡張機能の自動ページ挿入機能ではありません。
http://makkori1105.blog133.fc2.com/index.php?style2=categorymap&all

デベロッパーツールで調べると、リストが7200個程出力されてると出てました。
設定手順は、Script版の貼り付け位置は<div id="content">直下で
不要部分として「コメント編集」下の全記事一覧「日付別記事一覧」部分を
削除しました。(<!--titlelist_area-->~<!--/titlelist_area-->を全て)
ここで、正常動作を確認してから、ノースクリプト版では、
<div id="content">直下ではなく、Script版で削除した「日付別記事一覧」
部分に貼付け位置を移動しています。(Script版と同じ位置でも同じ不具合が出てます)
それ以外の部分は何も削除も移動もしていないので、どこが悪いか全然わかりません。
タグの貼り忘れや設定見直し等、確認してみましたが、症状が改善されないので
申し訳ございませんが、一度診て頂けないでしょうか?
ノースクリプト版の確認は、Chrome9、Firefox3.6.12 IE8から行い
全て同じ結果でした。

まっこりーに |  2010/11/05 (金) [ 編集 ] No.792


まっこりーにさんへ

ノンスクリプト版は、
> <!--titlelist-->~<!--/titlelist-->タグで囲って
ではなくて、(↑だと 全記事件数分リピートされちゃいます)

<!--titlelist_area-->

<!--titlelist--><!--/titlelist-->
全記事一覧など表示する内容

<!--/titlelist_area-->

としてください。 全記事一覧に関する出力をさせないための設定です。
もしくは、


<!--not_permanent_area--><!--not_edit_area--><!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->

<!--titlelist--><!--/titlelist-->
全記事一覧など表示する内容

<!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area--><!--/not_edit_area--><!--/not_permanent_area-->


としておけば、プレビュー(トップページの仮表示)で ページを確認しながら追加作業ができるので便利です。(私は 後者の設定を使っています。)


あと、コメントの注意書きにも入れているのですが、
コメント中に & を入れるときは 大文字にしてもらうか、次の投稿確認画面で &amp; と毎回書き直してください。コメント投稿欄に &amp; と入れてもらってもダメなので。。。次回から宜しくお願いします。 編集をするとまた戻ってしまうので、通常は大文字の & でOKです。
(私は使っていますが...実はすごく面倒なことしてます。)
1つ前のコメントと ちょっと前のコメント 私が修正して再投稿させて頂きました。

paruparu |  2010/11/05 (金) [ 編集 ] No.793


ご助言有難うございます。

アンドの件、本当にすみませんでした。
貼付けるとどうしても意識が薄くなってしまって、気づいていませんでした。
今回から全力で気をつけます。

ノンスクリプト版の間違えは僕の一方的な勘違いだったのですね・・・。
でも単純な間違えで良かったです、あのリスト作るのに2時間位かかったので
根本的に間違えてたらどうしようかと思ってました。
(一番最初は↑~↓の間をそのままコピペしてブラウザークラッシュさせました)
もう一つ質問があるのですが、内容が違うのでサポート板に書かせて頂きますね。

取り敢えず、ノンスクリプト版の完成を目指してみます。
毎回拙い質問に答えて頂き、ありがとうございます。感謝致します。

まっこりーに |  2010/11/05 (金) [ 編集 ] No.795


報告。

おはようございます。
おかげ様で、カテゴリー別記事一覧も完成し、やっとコンテンツが揃いました^^
一週間程手厚いサポートをして頂き本当に有難うございました。
引越しもほぼ終了間近なのですが、以前相談させて頂いた、拍手ボタン関連で
ご教授お願いしたい事があります。

例の拍手ボタンの不具合を解消して頂いたので、以前教えて頂いた様に
</object>を一つ省いて設置した所、トップ画面のSBMボタン配置位置では
ぴったり一列に並んでくれたんですね。(理想通りの形)
(トップページに拍手ボタンはいらないのですが試しに配置しました)

うまくいったので、本来設置する記事中(<div class="entry_bottom">内)に
設置した所、今度は、拍手ボタンだけが、一列下に下がってしまいました。

色々やってみたのですが、直せなかったので、今度は位置を変更して、
少し上の</div><!--/class=entry_m-->直下辺りに配置すると、
今度はうまく一列になってくれたのですが、サイドバーの位置が変わってしまって、記事の下あたりに表示される様になってしまいました。

色々やってみたのですが、これも直せなかったので、作業してる間に
どこか間違ってタグでも消したかなと思い、HTMLタグのハイライトで
確認してみると、拍手ボタンの</object>が赤字エラーになり、そこから
SBMボタンをとじているタグ(</span>)も赤字、さらにだいぶ下の
</div><!--/id=content-->と一番下</div><!--/id=container-->
</div><!--/id=wrapper--></body></html>の</div>と</body></html>
も赤字になっていました。

弄ってる間にどこか間違って削除した可能性もあるのでバックアップの
テンプレートで確認した所、拍手ボタンのタグを入れると、いれる位置に関係なく
エラーになる事がわかったのですが、適用してみると、問題無く使えます。
ですがエラーのまま配置しておくのは不安なので、撤去したのですが、
エラーになる理由が全く分からないのでご助言頂けませんでしょうか?

現在拍手ボタンは撤去してるのでタグを残しておきます。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="100">
<param name="movie" value="http://www.geocities.jp/charatto_2005/flash/clap_ritsu.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF">
<param name="wmode" value="transparent">
<param name="FlashVars" value="***"/>
<embed src="http://www.geocities.jp/charatto_2005/flash/clap_ritsu.swf" FlashVars ="***" quality="high" bgcolor="#FFFFFF" wmode=transparent pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" data="flash/clap_ritsu.swf" width="150" height="100"></embed></object></object> ←これは一つ削除して設置しています。2つでも一つでもエラーになりますが・・・。

テンプレートとすこしかけ離れた質問になってしまい申し訳ないのですが、
宜しくお願い致します。

まっこりーに |  2010/11/06 (土) [ 編集 ] No.796


拍手ボタンの件、embed など xhtml ではエラーとされるものを外す方法を
一応考えてみました。 ただ、普段使わないものなので、あまり自信はありません。 文法的には エラーと言われなくなると思いますが、上手く機能するかテストしてからご利用ください。
Sleipnir(IE8) と Firefox(3.5) でのみ動作確認済みです。

<object data="http://www.geocities.jp/charatto_2005/flash/clap_ritsu.swf" width="150" height="100" type="application/x-shockwave-flash">
<param name="movie" value="http://www.geocities.jp/charatto_2005/flash/clap_ritsu.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="FlashVars" value="***" />
</object>

ただ、記事内に同一列に並べるのは 余白の関係で無理があるかと思います。
http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/makkori1105.png
SBM ボタンを一周り小さくするか、スタイルシートを調整するか、一列を諦めるか いずれかになると思います。 SBM ボタンを一周り小さくするのが一番簡単だと思います。

paruparu |  2010/11/06 (土) [ 編集 ] No.797


回答頂き有難う御座います。

板違いな質問に答えて頂き感謝しております。

SBMボタンは、12px程縮小して並べてみますね。
動作確認までして頂き本当に有難う御座いました。

これで最後の気がかりが無くなりました^^

まっこりーに |  2010/11/07 (日) [ 編集 ] No.800


めちゃくちゃお世話になりました!

このところ、cssとか、scriptとか、Fc2ブログも使うのは初めてで頭がどうにかなりそうな位画面とニラメッコしていました。
そこへ救いの手が。。。
貴サイトの丁寧で詳細な、まさに痒いところに手が届くような説明を読ませていただき救われました。
「全記事一覧表示」と「カテゴリ別記事一覧」を無事に表示させることが出来て、
おかげ様で、ようやくHPが完成しました。
ありがとうございました!

スポック |  2012/07/14 (土) [ 編集 ] No.1446


スポックさんへ

はじめまして! 記事がお役に立てたようで嬉しいです。
このところ FC2ブログの仕様変更が続いていて、この記事の内容にも少し修正を入れなければな... と思うところがあったのですが、スポックさんのサイトは 元々新仕様で、サイトを拝見させてもらったところ、問題なく設定できていたので良かったです。
ブログ(内容)も参考に読ませて頂きますね。

paruparu |  2012/07/14 (土) [ 編集 ] No.1447


リストの順番について

はじめまして、記事一覧をこのような形で使う事が出来るとは目から鱗でした。
以前よりぼんやりと考えていた想像が具現化したようで、大変興味深く拝見させて頂きました。

そして、ご説明を参考にしつつ現在サイトマップを作成中しているのですが、その際に1つお聞きしたい事があり、ご助言をお願いしたく筆を執らせて頂きました。
もし宜しければご回答頂けないでしょうか?

お聞きしたい事は、タイトルにもあるように生成されるリストの順番についてです。
こちらのサイトマップの場合、まずカテゴリが見出しとして順番に並んだ後、先着100件の新しい記事がそれぞれのカテゴリに振り分けられて表示されますよね?
しかし、これだと子カテゴリが極端に多い場合かなり縦に伸びる上、(100件以内には更新がないために)カテゴリ名だけが表示されてしまう「見出しだけで記事のない子カテゴリ」が沢山表示されてしまいます。

そこで、それら子カテゴリは見出しとして表示せずに、親カテゴリにまとめてしまおうと考え、ソースを自分なりに編集した結果、親カテゴリの見出しの中に、それを親として持つ子カテゴリの記事を表示させる事は出来ました。

しかし、この「子カテゴリの記事」の並び方について分からない点があるのです。
現在の私のサイトマップを表すと以下のような感じになっています。

親カテゴリの見出し
(子カテゴリの記事)
(子カテゴリの記事)
(子カテゴリの記事)
(子カテゴリの記事)
    :
(子カテゴリの記事)

ですが、私が行ったのは単に子カテゴリの見出しを削除しただけですので、この子カテゴリ達は同じ子カテゴリ同士で固まり、なおかつその同じ子カテゴリの順番はその子カテゴリ内における先着順になっています。
例えば、1つの親カテゴリにA、B、Cの子カテゴリの記事がそれぞれ2つずつ(最新とその1つ前)あるとすると、以下のように並んでいます。

親カテゴリの見出し
(子カテゴリAの最新記事)
(子カテゴリAの1つ前の記事)
(子カテゴリBの最新記事)
(子カテゴリBの1つ前の記事)
(子カテゴリCの最新記事)
(子カテゴリCの1つ前の記事)

これを、子カテゴリで固まらせる事なく、親カテゴリ全体で見て全て先着順に並べる事は出来ないのでしょうか?
要は、通常通りの「新着順全記事一覧」を親カテゴリ別に分けて表示する事は出来ないか、という事をお聞きしたいのです。

何となく、リストの生成がScriptで行われているというような事はソースを見ていて分かったのですが、何分素人につきそれ以上先の事は全く見当も付かず、先に進めずにおります。

突然の不躾な質問、誠に申し訳ありません。
ご都合の良い時で構いませんので、ご面倒でなければ上記の点に関してご教授をお願い出来たら嬉しく思います。
よろしくお願い致します。

長文、お目汚し失礼しました。

eNi |  2013/09/17 (火) [ 編集 ] No.1695


eNiさんへ

はじめまして。 質問の件なのですが、<%titlelist_category_no> という変数を使っている部分が関係しているのですが、これは子カテゴリーのNo.を表示する変数で、ここで機能するもので 親カテゴリーの番号や名前を 表示させる変数 は実装されていない状況です。
( http://help.fc2.com/blog/manual/Home/template/templatevariable.html#4 )
なので、現状では 自動でそのように並べるのは多分できないと思います。

ーーーーーーーーーーーーーーーーーーー
以降は余談ですが...

現在は 全記事一覧ページ(通常版,スクリプト版) などでは 100件ずつ しか表示できなくなってしまっていますので、それ以上ある場合、古い記事などを確認するときには
./?pc&template=script&all&p=2 (2ページ目)
./?pc&template=script&all&p=3 (3ページ目)
も確認しなければいけなくなってしまいましたし、(ノンスクリプト版では、それをまとめて表示させているのですが...)これを作るまでの 最初の手間 はかなりかかるようになってしまったかもしれません。。
色々、自由が効かなくなってしまった仕様変更で 個人的には残念なのですが。。

paruparu |  2013/09/17 (火) [ 編集 ] No.1696


paruparu さんへ

ご回答ありがとう御座います。
やはり現時点では難しいですか…。

全記事一覧の件数減少の件は、私自身も変更当時に酷い改悪だと感じたので同感です。表示件数を自分で入力とまではいかずとも、せめて幾つかの選択肢の中から選択など出来れば良かったのですが、問答無用で100件に固定されてしまったのは残念です。


しかし、突然の質問であったにも拘わらず、迅速なお返事を頂けた事に非常に感謝しております。
paruparuさんが書いて下さる記事は痒いところに手が届くような機能や、自分には思いも寄らない奇抜で面白い使い方が多く、このサイトマップ以外でも色々と参考にさせて貰っていたので、今回ご解答が頂けて嬉しかったです。

この度はありがとう御座いました。

eNi |  2013/09/17 (火) [ 編集 ] No.1697

コメントを投稿する 記事: スクリプト未使用 カテゴリー別サイトマップ


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback