カテゴリー一覧を表示させる

so-netブログはカテゴリーのタイトルをクリックすると、通常のトップページのように記事が冒頭から「続きを読む」までが表示されます。
これを、タイトルの一覧が頭に並ぶようにして、目的の記事がすぐ見つかるように変えてみます。


カスタマイズの方法は、デザイン→レイアウト → 記事で、右上の「コンテンツHTML編集」から編集画面に入ります。
<% if:page_name eq 'category' -%>　というところを探します。上下2箇所あるので、上のほうを見つけます。

<% if:page_name eq 'category' -%>　の直後に、次のHTMLを挿入して保存します。

<!-- list-->
<div class="cat_list">
<div class="cat_list-title"><% category.name %>　記事一覧</div>
<div class="cat_list-body">
<% loop:list_article -%>
<% article.createstamp | date_format("%Y年%m月%d日") %>：&nbsp;&nbsp;<a href="<% article.page_url %>" class="title"><% article.subject | shorten(50) %></a><br /><% /loop -%>
<br style="clear:both "></div>
</div>
<!-- list end -->

次に、デザイン→スタイルシートからスタイルシート編集画面に入ります。
その中の適当な場所（いちばん下など）に次のソースを挿入して保存します。

/*-----category list ----*/
#cat_list .cat_list {
margin:0px 0px 30px;
padding:0px;
font-weight:normal;
text-align:left;
}
.cat_list-title {
width:90%;
font-size: 14px;
font-weight:bold;
padding:5px;
margin:0px;
background-color: #C8F9EB;
color: #000000;
}
.cat_list-body {
font-size: 12px;
font-weight:normal;
padding:5px;
margin:0px;
}

これでカテゴリー名をクリックすると、そのカテゴリーの一覧が表示されるようになります。



この方法だと、そのカテゴリーにある記事をすべて表示するので、10件ずつ表示させたい場合は次のようにします。
CSSは同じものを使うのでそのままでOK。

最初にデザイン→レイアウト→記事で、右上の「コンテンツHTML編集」から編集画面に入ります。
次に<% if:page_name eq 'category' -%>　というところを探します。上下2箇所あるので、上のほうを見つけます。ここまでは上でやった手順と同じ。
挿入部が違うので気をつけてね。

<% if:page_name eq 'category' -%>　の10行くらい下に、
-------------------------------------------------------
<% /if -%>
</div>　　　　　　　　　　　　　　　←この下
<% /if -%>

<% loop:list_article -%>
<div class="articles-top"></div>
<div class="articles">
-------------------------------------------------------

というところがあります。
ここの、
</div>
の直後に、次のHTMLを挿入して保存します。

<!-- category list -->
<div id="cat_list">
<script langage="JavaScript">
<!--
<% if:pager.need_pager -%>
var start=1+<% blog.category_page_cnt %>*(<% current_page %>-1);
var end=<% if:pager.next_page %><% blog.category_page_cnt %>*<% current_page %><% else %><% category.article_count %><% /if %>;
document.write("「<% category.name %>」カテゴリーの<% category.article_count %>件中",start,"-",end,"件の記事一覧。");
<% else -%>
document.write("「<% category.name %>」カテゴリーの記事一覧。");
<% /if -%>
// -->
</script>
<ul>
<% loop:list_article -%>
<li><% article.createstamp | date_format("%Y年%m月%d日") %>：&nbsp;&nbsp;<a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<!-- category list end -->


これで10件ずつ表示するようになります。

（’20件ずつ表示させたいときはメニューの設定→ブログの設定→カテゴリー別表示件数の数を20に変更します）

参考：初心者歓迎！ブログdeアフィリエイトの厳選記事集
2番目のJavascriptの入ったソースはこちらを元にしているような気がしますが、失念しました。

タグ：カスタマイズ

コメント 2

参考になりました。ありがとうございます。
by 柿の種 (2012-07-27 00:42) 

とてもわかりやすくて、初心者でもできました。ありがとうございました！
by tsukutsuku (2017-01-31 16:15)