カテゴリーを一覧表示するには？

ライブドアブログのカテゴリー別プラグインで個別記事を振り分けていますが、記事が多くなって目的の記事が見つけにくくなっています。
目的の記事を見つけやすいように、一覧表示を作りたいと思いますが、どうすればよいのでしょうか？
よろしくお願いします。

>> 耕作さん

コメント #4 への回答です。
耕作さんの言うとおり、私も私の説明どおりにカスタマイズしたところ、見事に同じ現象になりました。・・・(T_T)

原因は、回答７の 「 削除した部分に以下のタグを新たに記入します。」 のところで、入れなければならないタグが抜けておりました。・・・ ○|￣|＿　すみません ^^;

回答７のタグに、追加するタグとして、以下のタグを追加して下さい。・・・次のページへ</a></IfNextPage></div> の後に追加します。

</div>
</div>
<div class="blogbodybottom"></div>
</div>
<div class="dateend"></div>
</div>
</div>

これで大丈夫と思います。
それから ○○○ の部分も忘れずに入れ替えて下さいね。
（私が言うのもなんですが ・・・ ○|￣|＿ ）

まず、ご使用のテンプレートによってアドバイスする事が変わります。

ご使用のテンプレートの本文部分が、画像を使用して枠を構成しているのか、画像を使用せず CSS だけで枠を作っているのか、枠は作らず構成しているのか ・・・。

一覧表示自体は、既存のタグの削除及び、簡単な新たなタグの挿入で完成します。問題は、表示させた時にテンプレートの既存の " 枠 " が崩れる事なんです。これを、併せてカスタマイズしなければなりません。

一覧化に必要な基本的なタグはこれですが、

<ul>
<CategorizedArticlesLoop>
　　<$TrackBackAutoDiscovery$>
　　<li><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a></li>
</CategorizedArticlesLoop>
</ul>

これだけでは見映えが悪く、タイトルだけの表示になります。これから見映えを良くする為に、さらにタグの入れ替え、クラス属性の追加をおこない、体裁を整えていきます。

耕作さんの目指したい最終デザインがどういうものかは、この質問の中ではわかりませんが、私のブログのカテゴリー一覧の一覧表示の状態を見て、どういうものを目指しているのか、具体的におっしゃっていただければ、詳しく説明しますが ・・・。

なお私のブログでの一覧化に施したカスタマイズは、タイトルの一覧表示に加えて、画像枠の単一化、つまり複数の枠が出現しないようにすることです。普通の状態では枠が何個も出現します。

および本文デスクリプション（要約内容）の表示、日付、コメント、トラバのカウント数及びリンク。を併せたカスタマイズです。HTML、CSS の両方をさわる必要があります。

一度、どういうものか見て下さい。その後、やる気があるなら下のコメント欄にて説明していきます。

上で回答してからさらに考慮したんですが、耕作さんの使用しているテンプレートが、本文部分に画像枠を使用していないタイプのものでしたら、こちらの説明記事を読んでカスタマイズすれば、充分できると思います。一度参考にして下さい。

■ パンパでガウチョ
タイトルリスト化した月別・カテゴリー別記事ページに要約を付ける


この記事をよく読んでうまくすれば目的は達成できると思います。ただし、もし画像枠をしようしているタイプのテンプレートならば、これに加えて、もう少しだけ工夫がいります。

この記事にはその事にはふれていないので、そこで頭を打ったら、コメント入れて下さい。

↑こんな感じだったら、


↑これでできます。

>> 耕作さんへ

ご希望のカスタマイズの準備が整いました。コメント欄に書くと、通知がされませんので、確実に見ていただくために、回答欄に記載していきます。

まずこちらのサイトをご覧下さい。↓

http://reserve.livedoor.biz/archives/cat_19538.html

この仕上がりで良いですか？
これが、耕作さんがやりたいイメージどおりの仕上がりならば、
次のアドバイスに入っていきたいと思います。

このサイトは、私のカスタマイズ用の予備ブログです。中に掲載してある記事や、コメントなどはダミーです。今回、耕作さんの希望の仕上がりにする為、テンプレートをご使用なさっているものと同じ、『 シンプルの Liquid Drive 』 に変更してあります。

今回の質問が、『 カテゴリーを一覧表示するには？ 』 ですので、あえて CSS はさわっておりません。まったくのフルノーマルのテンプレートに、カテゴリー別 HTML の１枚だけを、カスタマイズしたものです。ですので、リンクされている記事タイトルにかかっているアンダーラインなどは、そのままの状態となっております。

まずは、サンプルで作成した『 カテゴリー一覧のカスタマイズ 』 を見ていただいた事を確認してから、アドバイスをしていきたいと思います。下のコメント欄に、確認した旨をコメントで残して下さい。

なお、このページを見ているほかの方に申し上げます。このページでこれから説明していくカスタマイズは、今回の質問者、耕作さん専用の説明となります。２カラム、３カラム、また同じカラムのテンプレートであっても、HTML を構成しているタグが若干違う場合があるため、同じようには行かない場合がある事をご理解下さい。

それでは耕作さんの確認コメント、お待ちしております。

実は色々と、どういう風に説明しようか悩んでいました。
自分ではすでに既知のカスタマイズなので、すぐにご希望の状態に作り上げたのですが、説明をする事が一番難しい事に気づきました。^^;

下にあるタグを上にあげ、上のタグを下にさげ、ある部分を削除、またある部分の一部だけ削除。そして、新たなタグを追記する ・・・。その作業がけっこう細かい為、最終的にはこうなりますよね？ってことで、結局そのタグをここに書かなければならず、それなら初めからそれをコピーして移植すれば良いじゃん ^^; という事になるわけです。

耕作さんの為にはならない事はわかっているんですが、仕方なく完成したタグをここに書きます。あとの CSS などの細かい調整は、できるだけ自分でおこなって下さい。せっかくですから勉強しないともったいないと思いますので ・・・。

『 シンプルの Liquid Drive 版 カテゴリー一覧表示カスタマイズ 』
まず初めに、現在の CSS と HTML に何らかのカスタマイズをおこなっている場合には、必ずローカルの PC にバックアップしておいて下さい。まったくのフルノーマルの場合には、その必要はありません。

以下の部分をとりあえずすべて削除して下さい。

<div id="blogcontainer">
<div id="wrapper">
<div id="content">
<div id="blog">
<h2 id="categorytitle"><$CategoryName ESCAPE$></h2>
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="datetop"></div>
<div class="fullbody">
<IfDateChanged><h2 class="date"><$ArticleDate$></h2></IfDateChanged>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a>
<h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3>
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br clear="all"></div>
<div class="posted"><$ArticleAuthor$> at <$ArticleTime$>｜<a href="<$ArticlePermalink$>">この記事のURL</a><IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing></div>
<IfFirstArticle><div id="ad"><$Advertise$></div></IfFirstArticle>
</div>
<div class="blogbodybottom"></div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</CategorizedArticlesLoop>
<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>&nbsp;&nbsp;&nbsp;<a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>
</div>
</div>

削除した部分に以下のタグを新たに記入します。コピペで良いですよ。(^^)

<div id="blogcontainer">
<div id="wrapper">
<div id="content">
<div id="blog">
<div class="datetop"></div>
<div class="fullbody">
<$TrackBackAutoDiscovery$>
<div class="blogbodytop"></div>
<div class="blogbody">
<h2 id="categorytitle"><$CategoryName ESCAPE$></h2>
<div class="main">

<dl class="archives_list">
<CategorizedArticlesLoop>
<a name="<$ArticleId$>"></a>
<dt><li><a href="<$ArticlePermalink$>" title="<$ArticleTitle ESCAPE$>"><$ArticleTitle ESCAPE$></a>&nbsp;&nbsp;<IfArticleRating><$ArticleRatingIcon$></IfArticleRating></li><span class="notes"><div align="right">( <$ArticleDate$><IfArticleAllowComment> | <a href="<$ArticlePermalink$>#comments">C(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
<IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TB(<$ArticlePingCount$>)</a></IfArticleAllowPing> | <a href="○○○">Edit</a> )</div>
</span></dt>
</CategorizedArticlesLoop>
</dl>

<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>&nbsp;&nbsp;&nbsp;<a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>

はい完了。保存して、カテゴリーのページを再構築して下さい。ちゃんとノーマルの HTML と、カスタマイズ後の HTML がどう違うか、あとで見比べておいてくださいね。頑張って(^^)

追記：
上のカスタマイズ後のタグの中に、<a href="○○○">Edit という部分があるでしょ。なぜか、さっき書き込んだ時にへんな表示になったので、こっちに別に書いておきます。


あの "○○○" のところに、以下のタグを書き込みます。

http://blog.livedoor.com/cms/article/edit?id=<$ArticleId$>