機能充実、完全無料のSeesaaブログは、↑ここからすぐに作成できます。
2005年12月31日

カテゴリの記事一覧を表示

カテゴリページの先頭に、
そのカテゴリの記事を一覧表示する方法です。
<SeesaaのデフォルトHTMLの仕様変更に伴い
最新HTML対応版を記事の最後に追記>


デザイン→コンテンツ→記事→コンテンツHTML編集
を開きます。

表示されたHTML中の、以下の赤文字で示す部分を編集します。
<% if:page_name eq 'category' -%>
<% /if -%>


上記の赤文字の箇所に、以下の青文字部分を挿入します。
<% if:page_name eq 'category' -%>
<div id="clist">
<p>[<% category.name %>]の記事一覧</p>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>

<% /if -%>
ここで、
[<% category.name %>]の記事一覧
の部分は実際には
そのページのカテゴリ名]の記事一覧
と表示されます。
表現を変更したい場合はこの部分をお好みの形式にして下さい。

HTMLの編集はこれで終了なので保存して再構築(すべて)して下さい。
この段階でカテゴリページに一覧が表示されるはずです。

あとはお好みでスタイルシートを編集します。

デザイン→スタイルシート
を開いて使用するスタイルシートを選択。
以下の記述を追加します。
#clist {
background:#FFFFFF;
margin: 10px;
padding: 10px;
}

#clist li {
margin: 0px;
padding: 0px;
}
ここでは仮にmarginとpaddingのみを適当に入れてますが
お好みで設定して下さい。

以上で完了です。

当ブログではさらに小細工をしているのですが
汎用性ゼロなので触れません。

<2006/5/26 追記>

Seesaaの最新のHTMLでの修正個所はこの部分です。
<% if:page_name eq 'category' -%>
<div class="navi">
<a href="<% blog.page_url %>">TOP</a> / <% category.name %>
</div>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a>&nbsp;<% /if %><% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>


これを以下のように修正します。
<% if:page_name eq 'category' -%>
<div id="clist">
<p>[<% category.name %>]の記事一覧</p>

<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a>&nbsp;<% /if %><% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>

<ul type="square">
<% loop:list_article -%>
<li><a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>

<% /if -%>

単なる青文字部分の追加だけでなく
赤文字部分に消去する個所がある事に注意して下さい。
修正前の個所に修正後のソースを丸ごと貼り付ければOKです。
全て再構築します。

残りのcssの修正などについては上記を参照して下さい。
以上です。

この記事へのコメント
すいません。教えていただければ嬉しいのですが。
記事のとおりにやって、表示できるようになったのですが、文章が真ん中にきます。
左寄せにしたいのですが、あっちコッチいじっても出来ません。
よろしければ、教えていただけませんでしょうか?
Posted by 教えてもらえませんか at 2005年12月31日 20:08
スタイルシートに追加した
#clist {}
の{}の中に
text-align:left;
を入れると左に寄ると思います。
Posted by ボボコフ at 2006年01月01日 01:37
ありがとうございました。出来ました。
スタイルシートにも、トップページ、カテゴリーページがあるんですね。
初心者のたわいの無い質問で申し訳なかったです。
Posted by 教えてもらえませんか at 2006年01月01日 15:14
できてよかったですね。
Seesaaのスタイルシートは全部同じにする、もしくは複数を使い分ける、と選択可能です。
何でも気軽に書き込みして下さい。
Posted by ボボコフ at 2006年01月02日 18:43
こんにちは。紹介の承諾ありがとうございます。
こちらの記事で質問があったのでこちらに書かせてもらいます。
こちらのブログでは一覧表示の背景が記事部分と同じ表示になってますよね?
このようにするにはどうしたらいいのでしょうか?
やってみたのですが、どうしても画像がひとつしか表示されません。うちのところでは記事の背景が画像3つで構成されてます。
よろしければ記事と同じ背景の表示を教えて頂けないでしょうか?
Posted by imataku at 2006年01月21日 06:30
imatakuさんのテンプレの場合、記事と背景をそろえるにはまず僕の記事で赤文字で書いている
<% if:page_name eq 'category' -%>
の直後に、
<DIV class=blog>
<DIV class=blogbody>
<DIV class=text>
を入れ、その後は上記青文字部分をそのまま入れ、
さらに最後赤文字の
<% /if -%>
の直前に
</DIV>
<DIV class=posted>
</DIV>
</DIV>
</DIV>
を入れてやるといいんじゃないかと思います。

この場合記事で日付が入る部分とpostedの部分には何も入らないですけどね。

ついでに余計なお世話かも知れませんが、そのブログパーツ置き場という方のブログ、IE以外のブラウザ(Firefoxなど)で見るとレイアウトが少し崩れるようです。
ブラウザによってMARGINやPADDINGの解釈の仕方が違うのが原因だと思います。
こればっかりは簡単な解決方法がわからないので、気になるならばいくつかのブラウザで確認しながら調整するしかないんですけど。。

その辺りがcssのいやらしい所ですねぇ。
Posted by ボボコフ at 2006年01月21日 16:22
説明ありがとうざいます。記事と同じ背景になりました。
でも、カテゴリ選択後に右サイドバーが落ちてしまいました。まだわからない所だらけでどこで修正していいのやらさっぱりです。
質問ばかりでお手数かけて申し訳ないです。
IEで崩れているとのことで、早速FireFoxで見たところ、ご指摘通りかなり崩れてました^^;
こちらのほうは地道に調整してみます。ご指摘ありがとうございます。
Posted by imataku at 2006年01月22日 05:12
サイドバーが落ちるのはSeesaaでよく見られますね。

containerの幅よりも、contentとlinksとlinks-left、そのmarginやpaddingの合計が大きくなると落ちます。

さらに計算上はcontainerの幅に収まっていたとしても、設定されている幅より大きな画像等を表示した際にCSSの定義より幅が広がって落ちる場合もあります。
これまた地道な計算が必要になったりして厄介なんですよね。。。

もうFireFoxで見ても問題なさそうですね。
対応が早いです。
Posted by ボボコフ at 2006年01月22日 10:20
なんとかサイドバー落ちるのが修正できました。
色々と質問にも、丁寧に説明までして頂いて感謝です。ありがとうございます。
ボボコフさんの説明はわかりやすく、親切なんで参考にしやすく助かりました。
これからも頑張って下さい。応援しています。
またお世話になるかもしれませんが、その時はよろしくお願いします。


Posted by imataku at 2006年01月22日 20:59
■imatakuさん
上手くいったようで良かったですね。
少しはお役に立てて嬉しいです。
こちらこそまたよろしくお願いします。
Posted by ボボコフ at 2006年01月23日 10:33
またお邪魔します。
これも上手くいきました。ありがとうございます。
ユーザービリティのうえでも良いカスタマイズですね。もちろん自分自身にとっても便利です。
Posted by もも at 2006年02月27日 12:22
良かったです。

記事が増えれば増えるほど、見せ方の工夫が必要になりますよね。
Posted by ボボコフ at 2006年02月27日 13:13
はじめまして。
段々記事が増えて来たので、このカスタマイズは
訪問者にとって親切だと思います。
お陰さまで、すっきりみやすく、
しかも自分も管理しやすくなりました。

どうもありがとうございました。
Posted by このみ at 2006年05月21日 12:40
こんにちは。
いろいろと参考にさせていただいています。
良かったら相談に乗ってください。
今、シンプルホワイトを使っています。
カテゴリページの先頭に、そのカテゴリの記事を一覧表示させたいと思い、
いろいろ調べたのですが、
私の「デザイン→コンテンツ→記事→コンテンツHTML編集」のHTML中には

<% if:page_name eq 'category' -%>
<% /if -%>

がないのです。
正確には、それぞれの行はあるのですが、つながっていません。

<% if:page_name eq 'category' -%>

TOP / <% category.name %>

<% if:pager.need_pager -%>

<% if:pager.previous_page %>
<% /if %><<<% if:pager.previous_page %><% /if %><% loop:list_pager %>
<% if:current_page ne pager_number %>
<% /if %><% pager_number %><% if:current_page ne pager_number %> <% /if %>
<% /loop %><% if:pager.next_page %>
<% /if %>>><% if:pager.next_page %><% /if %>

<% /if -%>

というのと

<% if:page_name eq 'category' -%>
<% if:pager.need_pager -%>

<% if:pager.previous_page %>
<% /if %><<<% if:pager.previous_page %><% /if %><% loop:list_pager %>
<% if:current_page ne pager_number %>
<% /if %><% pager_number %><% if:current_page ne pager_number %><% /if %> <% /loop %>
<% if:pager.next_page %>
<% /if %>>><% if:pager.next_page %><% /if %>

<% /if -%>

は、あるのですが、どうすればいいでしょうか?
Posted by たかのり at 2006年05月22日 00:02
■このみさん
コメントありがとうございます。
またよろしくお願いします。

■たかのりさん
これなんですが、今回Seesaaの機能追加に伴い
HTMLが一部変更されてしまったんですよ。
なので、僕が書いた記事と今のHTMLには違いが出てしまってます。
カスタマイズ自体は多少変更すれば使えるのですが
記事を修正しなければいけないですね。。。

記事の方に追記して新しいHTML版を書きますね。
Posted by ボボコフ at 2006年05月26日 13:46
回答ありがとうございました。
早速、試してみたところ、うまく表示できました。ありがとうございました。
これからも参考にさせていただきますね。
Posted by たかのり at 2006年05月27日 16:59
こんにちは。お世話になっています。
すでにこの修正はしていたのですが、HTML変更に伴っての修正はしていませんでした。
で、しようと思ったのですが、指定箇所が見当たりません。

赤文字の4,5行目あたりに記載されている<% if:pager.need_pager -%>
以下が全てありません。
「pager.*」とか「*.next_page」とか全くありません。

「* archive *」や「* article *」はあるのですが、page関係が全くないのです。
以前修正した箇所の後方はRDFやダイエット記事の設定がされています。

最初の記事一覧の修正以外、特に消したりしていないはずなんですよね・・・。

赤文字を追加したほうが良いんでしょうか?
問題なく一覧表示はされるのですが、カレンダーが、記事をUPしたときにリンクされないことが多いのはこのせいですかね・・・。
(リンクのさせ方は、コツを得たので大丈夫なんですが・・・)
Posted by 夏海 at 2006年06月11日 03:11
返事が遅くてすみません!

SeesaaのHTML変更に関してなんですが、
その時点でHTMLに手を加えていた場合は
Seesaaの変更が反映されないようになってます。

なので夏海さんのブログのHTMLは以前のままなんだと思います。

今回の変更を反映させるには、
一旦HTMLをデフォルトに戻して
(この時点で恐らくSeesaaの変更が反映されたものに)
再びカスタマイズするか、
上記を参考に自力で今回の修正分も加えるかのどちらかですね。。

僕はボボ日の方とかは後者で対応しました。
こっちのブログは未対応なので
ベースが以前のHTMLのままです。
Posted by ボボコフ at 2006年06月19日 17:25
こんにちは。

質問なんですが、このままだと新しい記事順に表示されてしまいます。
古い順に表示する方法はあるのでしょうか?
Posted by まっつん at 2006年08月07日 15:59
試してないのですが
過去ログページとカテゴリページは
「ブログ設定」のページで昇順か降順か選べるようになりました。

そこで変更できると思います。
Posted by ボボコフ at 2006年08月07日 23:55
初めまして。
こんばんは。
カテゴリの記事一覧表示で、とても困っていたんです。
とても丁寧に説明してくださっていて無事にできました。またおじゃまさせてください(^^)
Posted by kyon at 2006年10月03日 02:48
はじめまして。

お役に立ててよかったです。
何かあればまたどうぞ!
Posted by ボボコフ at 2006年10月03日 03:05
またお邪魔します。

こちらの一覧表示のカスタマイズも参考にさせていただきました。
ありがとうございました。
Posted by Wiiman at 2006年10月17日 04:30
はじめまして。

こういう機能を探しておりましたので、早速つかわせていただきました。
どうもありがとうございました。

ところで、素人な質問で恐縮なのですが、
スタイルシートについて、
「あとはお好みでスタイルシートを編集します。」ということは、とくに何も編集しなくても問題は生じない、ということでしょうか。
Posted by ぷう at 2007年01月19日 03:31
はじめまして。
コメントありがとうございます。

スタイルシートの編集をしなくても問題はありません。
デザイン的に気に入らない部分があれば、各自で手を入れて調整して下さい、という意味です。
Posted by ボボコフ at 2007年01月22日 02:52
こんばんわ!
早速試してみました。私は超超超初心者ですが、
ほんとにわかりやすくて
すぐに思い通りにすることができました。
ありがとうございました。
お礼だけでもと思い、コメントさせていただきました。
Posted by naena at 2007年04月12日 23:27
■naenaさん
コメントありがとうございます。
お役に立てたなら良かったです。

また何かあれば気軽にコメント下さい。
Posted by ボボコフ at 2007年04月13日 10:29
はじめまして、岡部と申します。
カスタマイズ初心者ですが、ボボコフさんの
ソースをそのままコピペして、すっきりと
カスタマイズすることが出来ました。
ありがとうございます。
また、お邪魔しますので、よろしくお願いします。
Posted by 岡部 at 2007年05月23日 10:12
■岡部さん
コメントありがとうございます。
また何かあればよろしくお願いします。
Posted by ボボコフ at 2007年05月23日 17:41
はじめまして、最近ブログをはじめたのでここの新しくなった分の追記が非常に役立ちました、ありがとうございます。ひとつ困っていることがありまして、新しい記事を投稿してもカレンダーの日付部分にリンク表示がされないのですがどうしたら直りますか?色々調べてみましたがわからず・・・よろしくお願いいたします。
Posted by まり at 2007年05月28日 00:21
■まりさん
はじめまして。

更新記事のカレンダーへの反映が遅れる現象は
僕も度々経験しているのですが、
原因や対応策がよくわかってません。

気付くといつの間にか反映されていたりするのですが。

何日も経っても反映されない、というわけではないですよね?

可能性があるのは、全ページに再構築をかける事くらいです。
時々それで上手くいったりします。

それでもダメな場合は、、僕もちょっとわかりません。
申し訳ないです。
Posted by ボボコフ at 2007年05月28日 11:22
お世話になっています

記事コンテントHTMLで表示されたのですが
中央よりになったので、スタイルシートに追加して
#clist {}
の{}の中に
text-align:left;
を入れると左に寄る

と言う事だったので、やってみましたが左に寄りません
スタイルシートに追加する時に場所の指定はありますか?

それと『Seesaaのスタイルシートは全部同じにする、もしくは複数を使い分ける、と選択可能です』とありますが、全部同じと、複数の意味が分からないのと選択指定出来る場所は何処にありますか?

いつもの事ながら超〜〜〜〜〜〜初心者で申し訳ないです



Posted by クレア at 2007年06月26日 03:58
どうもです。

スタイルシートに追加する場所の指定は特に無いですよ。
拝見しましたが、現在スタイルシートに#clist{}の記述が見当たりません。
今は消したという事でしょうか?
恐らくちゃんと追加すれば左によると思います。

スタイルシートの使い分けというのは、
管理画面のスタイルシートのページで、
画面左にページという枠があり、
トップ、記事、カテゴリ、過去ログという項目があると思います。
それを選択してスタイルシートを保存すると、
各項目毎に異なるスタイルシートを使用できるというものです。

これは後々編集が面倒になりそうなので
僕は一度も使った事が無いです。
なのでこれでややこしい事になっても対応できるかわかりませんw
Posted by ボボコフ at 2007年06月26日 10:29
スタイルシートを変更する前に、プレビューで見たのですが、左寄せになっていなかったので、変更せずにお返事をお待ちしていました(^^;
スタイルシートに追記して変更すると左寄せになってくれました

ありがとうございました

スタイルシートの使い分けの箇所は分かりました
超〜〜〜〜初心者の私では、益々分かり難くなるので放置です(笑)

いつもありがとうございます
Posted by クレア at 2007年06月27日 03:02
今さらですがコメント。

うまくいって良かったです。
また何かあればコメントください。。
Posted by ボボコフ at 2007年07月10日 16:53
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/11189262
※ブログオーナーが承認したトラックバックのみ表示されます。

そのカテゴリの記事一覧を表示
Excerpt: Seesaaブログのカスタマイズ方法を紹介している「ブログ? カスタマイズ? アフィリエイト?」というブログの記事「カテゴリの記事一覧を表示」を参考に、またカスタマイズしてみました。 カテゴリを選択す..
Weblog: まったり...ほっこり
Tracked: 2006-02-27 12:27

カテゴリの一覧表示
Excerpt: カテゴリ(左上の欄)をクリックすると、該当するカテゴリの記事が表示される。 初期状態では、ただ、ずら~っと記事が並ぶだけ。 「このカテゴリの記事はどんなものがあるんだろう?」と思ってクリックしてくれ..
Weblog: カスタマイズ実験室
Tracked: 2006-08-18 05:13

カテゴリのタイトル一覧
Excerpt: カテゴリのツリー化がうまくいったので、カテゴリーページの冒頭に、関連する記事のタイトルを一覧表示することにしました。ユーザビリティUPってことで。 ブログ? カスタマイズ? アフィリエイト?さんの「..
Weblog: こどものダイエット
Tracked: 2009-05-03 09:26
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。