そのカテゴリの記事を一覧表示する方法です。
＜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 {ここでは仮にmarginとpaddingのみを適当に入れてますが
background:#FFFFFF;
margin: 10px;
padding: 10px;
}
#clist li {
margin: 0px;
padding: 0px;
}
お好みで設定して下さい。
以上で完了です。
当ブログではさらに小細工をしているのですが
汎用性ゼロなので触れません。
＜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 %><<<% 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> <% /if %><% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>>><% 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 %><<<% 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> <% /if %><% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>>><% 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の修正などについては上記を参照して下さい。
以上です。
記事のとおりにやって、表示できるようになったのですが、文章が真ん中にきます。
左寄せにしたいのですが、あっちコッチいじっても出来ません。
よろしければ、教えていただけませんでしょうか？
#clist {}
の{}の中に
text-align:left;
を入れると左に寄ると思います。
スタイルシートにも、トップページ、カテゴリーページがあるんですね。
初心者のたわいの無い質問で申し訳なかったです。
Seesaaのスタイルシートは全部同じにする、もしくは複数を使い分ける、と選択可能です。
何でも気軽に書き込みして下さい。
こちらの記事で質問があったのでこちらに書かせてもらいます。
こちらのブログでは一覧表示の背景が記事部分と同じ表示になってますよね？
このようにするにはどうしたらいいのでしょうか？
やってみたのですが、どうしても画像がひとつしか表示されません。うちのところでは記事の背景が画像３つで構成されてます。
よろしければ記事と同じ背景の表示を教えて頂けないでしょうか？
<% 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のいやらしい所ですねぇ。
でも、カテゴリ選択後に右サイドバーが落ちてしまいました。まだわからない所だらけでどこで修正していいのやらさっぱりです。
質問ばかりでお手数かけて申し訳ないです。
IEで崩れているとのことで、早速FireFoxで見たところ、ご指摘通りかなり崩れてました＾＾；
こちらのほうは地道に調整してみます。ご指摘ありがとうございます。
containerの幅よりも、contentとlinksとlinks-left、そのmarginやpaddingの合計が大きくなると落ちます。
さらに計算上はcontainerの幅に収まっていたとしても、設定されている幅より大きな画像等を表示した際にCSSの定義より幅が広がって落ちる場合もあります。
これまた地道な計算が必要になったりして厄介なんですよね。。。
もうFireFoxで見ても問題なさそうですね。
対応が早いです。
色々と質問にも、丁寧に説明までして頂いて感謝です。ありがとうございます。
ボボコフさんの説明はわかりやすく、親切なんで参考にしやすく助かりました。
これからも頑張って下さい。応援しています。
またお世話になるかもしれませんが、その時はよろしくお願いします。
上手くいったようで良かったですね。
少しはお役に立てて嬉しいです。
こちらこそまたよろしくお願いします。
これも上手くいきました。ありがとうございます。
ユーザービリティのうえでも良いカスタマイズですね。もちろん自分自身にとっても便利です。
記事が増えれば増えるほど、見せ方の工夫が必要になりますよね。
段々記事が増えて来たので、このカスタマイズは
訪問者にとって親切だと思います。
お陰さまで、すっきりみやすく、
しかも自分も管理しやすくなりました。
どうもありがとうございました。
いろいろと参考にさせていただいています。
良かったら相談に乗ってください。
今、シンプルホワイトを使っています。
カテゴリページの先頭に、そのカテゴリの記事を一覧表示させたいと思い、
いろいろ調べたのですが、
私の「デザイン→コンテンツ→記事→コンテンツ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 -%>
は、あるのですが、どうすればいいでしょうか?
コメントありがとうございます。
またよろしくお願いします。
■たかのりさん
これなんですが、今回Seesaaの機能追加に伴い
HTMLが一部変更されてしまったんですよ。
なので、僕が書いた記事と今のHTMLには違いが出てしまってます。
カスタマイズ自体は多少変更すれば使えるのですが
記事を修正しなければいけないですね。。。
記事の方に追記して新しいHTML版を書きますね。
早速、試してみたところ、うまく表示できました。ありがとうございました。
これからも参考にさせていただきますね。
すでにこの修正はしていたのですが、HTML変更に伴っての修正はしていませんでした。
で、しようと思ったのですが、指定箇所が見当たりません。
赤文字の4,5行目あたりに記載されている<% if:pager.need_pager -%>
以下が全てありません。
「pager.*」とか「*.next_page」とか全くありません。
「* archive *」や「* article *」はあるのですが、page関係が全くないのです。
以前修正した箇所の後方はRDFやダイエット記事の設定がされています。
最初の記事一覧の修正以外、特に消したりしていないはずなんですよね･･･。
赤文字を追加したほうが良いんでしょうか？
問題なく一覧表示はされるのですが、カレンダーが、記事をUPしたときにリンクされないことが多いのはこのせいですかね･･･。
(リンクのさせ方は、コツを得たので大丈夫なんですが･･･)
SeesaaのHTML変更に関してなんですが、
その時点でHTMLに手を加えていた場合は
Seesaaの変更が反映されないようになってます。
なので夏海さんのブログのHTMLは以前のままなんだと思います。
今回の変更を反映させるには、
一旦HTMLをデフォルトに戻して
(この時点で恐らくSeesaaの変更が反映されたものに)
再びカスタマイズするか、
上記を参考に自力で今回の修正分も加えるかのどちらかですね。。
僕はボボ日の方とかは後者で対応しました。
こっちのブログは未対応なので
ベースが以前のHTMLのままです。
質問なんですが、このままだと新しい記事順に表示されてしまいます。
古い順に表示する方法はあるのでしょうか？
過去ログページとカテゴリページは
｢ブログ設定｣のページで昇順か降順か選べるようになりました。
そこで変更できると思います。
こんばんは。
カテゴリの記事一覧表示で、とても困っていたんです。
とても丁寧に説明してくださっていて無事にできました。またおじゃまさせてください（＾＾）
お役に立ててよかったです。
何かあればまたどうぞ！
こちらの一覧表示のカスタマイズも参考にさせていただきました。
ありがとうございました。
こういう機能を探しておりましたので、早速つかわせていただきました。
どうもありがとうございました。
ところで、素人な質問で恐縮なのですが、
スタイルシートについて、
「あとはお好みでスタイルシートを編集します。」ということは、とくに何も編集しなくても問題は生じない、ということでしょうか。
コメントありがとうございます。
スタイルシートの編集をしなくても問題はありません。
デザイン的に気に入らない部分があれば、各自で手を入れて調整して下さい、という意味です。
早速試してみました。私は超超超初心者ですが、
ほんとにわかりやすくて
すぐに思い通りにすることができました。
ありがとうございました。
お礼だけでもと思い、コメントさせていただきました。
コメントありがとうございます。
お役に立てたなら良かったです。
また何かあれば気軽にコメント下さい。
カスタマイズ初心者ですが、ボボコフさんの
ソースをそのままコピペして、すっきりと
カスタマイズすることが出来ました。
ありがとうございます。
また、お邪魔しますので、よろしくお願いします。
コメントありがとうございます。
また何かあればよろしくお願いします。
はじめまして。
更新記事のカレンダーへの反映が遅れる現象は
僕も度々経験しているのですが、
原因や対応策がよくわかってません。
気付くといつの間にか反映されていたりするのですが。
何日も経っても反映されない、というわけではないですよね？
可能性があるのは、全ページに再構築をかける事くらいです。
時々それで上手くいったりします。
それでもダメな場合は、、僕もちょっとわかりません。
申し訳ないです。
記事コンテントHTMLで表示されたのですが
中央よりになったので、スタイルシートに追加して
#clist {}
の{}の中に
text-align:left;
を入れると左に寄る
と言う事だったので、やってみましたが左に寄りません
スタイルシートに追加する時に場所の指定はありますか？
それと『Seesaaのスタイルシートは全部同じにする、もしくは複数を使い分ける、と選択可能です』とありますが、全部同じと、複数の意味が分からないのと選択指定出来る場所は何処にありますか？
いつもの事ながら超〜〜〜〜〜〜初心者で申し訳ないです
スタイルシートに追加する場所の指定は特に無いですよ。
拝見しましたが、現在スタイルシートに#clist{}の記述が見当たりません。
今は消したという事でしょうか？
恐らくちゃんと追加すれば左によると思います。
スタイルシートの使い分けというのは、
管理画面のスタイルシートのページで、
画面左にページという枠があり、
トップ、記事、カテゴリ、過去ログという項目があると思います。
それを選択してスタイルシートを保存すると、
各項目毎に異なるスタイルシートを使用できるというものです。
これは後々編集が面倒になりそうなので
僕は一度も使った事が無いです。
なのでこれでややこしい事になっても対応できるかわかりませんｗ
スタイルシートに追記して変更すると左寄せになってくれました
ありがとうございました
スタイルシートの使い分けの箇所は分かりました
超〜〜〜〜初心者の私では、益々分かり難くなるので放置です（笑）
いつもありがとうございます
うまくいって良かったです。
また何かあればコメントください。。