TopSeesaaブログカスタマイズ>カテゴリー記事リスト微調整
2005年03月21日

カテゴリー記事リスト微調整

 昨日追加したカテゴリー内記事のタイトル一覧ですが、タイトルの長いものは折り返して表示されてしまいます。

 それはそれでも良いか、と思っていたのですが、今日になって関数が使えることを思い出しました。

記事コンテンツHTML編集画面上の方
<% if:page_name eq 'category' -%>
<div class="lead">
<div class="lead-title">カテゴリー内記事一覧</div>
<div class="cbody">
<% loop:list_article -%>
<a href="<% article.page_url %>" class="title"><% article.subject | shorten(34) %></a>
<% /loop -%>
<br style="clear:both "></div>
</div>

<% /if -%>
 赤字部分を追加。

 昨日は| shorten(34)を入れていなかったので折り返してしまったのだが、一行に収まるbyte数を指定してやることで、それ以上の分を省略してくれる。
おまけにshorten関数だと省略した場合末尾に「..」を追加してくれるようで省略されていることが明示でき、便利です。

 あとはCSSに以下を追加。

.lead {
font-weight:normal;
line-height:120%;
margin:5px 0px 5px 0px;
padding:0px;
background-color: #eeeeee;
border-right:2px solid #000;
border-bottom:2px solid #000
}
.lead-title {
font-size: 90%;
font-weight:bold;
padding:5px;
margin:0px;
background-color: #cccccc;
}
.cbody {
font-size: 12px;
padding:0px 5px 5px 5px;
margin:0px;
}
.cbody a {
margin:0px;
padding:0px;
width: 200px;
float: left;
background-color: #eeeeee;
font-weight: normal;
}
".cbody a "に"float: left;"をつけることで二段組で表示されるようになります。

カテゴリー内の記事が多くない場合は、こんなことはしなくても良いのでしょうが、このブログのようにカテゴリーの中に25個も記事があると単なるリストですと、長くなりすぎてしまいます。

それでもカテゴリー内の記事が40くらいになったら、カテゴリーを分けるとかしないと、いけないかもしれませんね。
この記事へのコメント
最近Seesaaをはじめたばかりで、どうやったら実現できるのかわからないことだらけですが、ここの情報はとても役立ちそうです。この記事リストも参考にさせてもらいました。
ところで、HTMLソースの方なのですが、が無駄に入っている気がしますが、気のせいでしょうか?
たぶん、二段組みにするために、消した際に残ってしまったものと推測しているのですが、どうでしょう?
もし、違ったらごめんなさい。
Posted by QuC at 2005年03月29日 01:57
あぁ、申し訳ないです。
タグを書くと消えてしまうのですね。
重要なところが、消えている。
liの終了タグが入っているということです。
すみません
Posted by QuC at 2005年03月29日 02:01
指摘ありがとうございます。
確かに$lt;/li>が余分です。
修正しておきます。
Posted by 深田 at 2005年03月29日 06:44
</li>です。(笑
Posted by at 2005年03月29日 06:45
すみません、TBを何回も送ってしまいました。お手数をおかけしますが、1個だけおいて下さればいいので、あとは削除していただけたら、幸いです。
Posted by md7277 at 2005年04月10日 19:42
了解です!
Posted by 深田 at 2005年04月10日 21:45
こんにちは。

この記事は大変参考になりました。
そこで疑問に思った事を書いてみます。
(HTMLなど初心者です)

この記事のカテゴリー分類は「seesaaブログカスタマイズ」ですが、記事一覧のタイトルには「カテゴリー内記事一覧」となっています。
この記事一覧のタイトルは、
そのカテゴリーごとに分類されている「カテゴリー名+一覧」と言うような表示に自動ではならないのでしょうか?
宜しくお願いします。
Posted by mina at 2005年05月10日 19:13
mina さん、コメントありがとうございます。
確かにその方がいいですね。
たぶん
<% loop:list_article -%>
<% article_category.name %>
<% /loop -%>一覧
でいけると思うのですが・・・
今度の休み(いつのことやら(--;))にでもやってみたいのです。

うまくいったらTBお願いします(^^ゞ
Posted by 深田 at 2005年05月10日 23:17
返信ありがとうございます。

初心者の贅沢な注文に答えてくれて嬉しいです(笑)
そして無理な事を言ってスミマセン。
まってま〜す。
Posted by mina at 2005年05月11日 08:28
はじめまして、sanshiroといいます。

>あとはCSSに以下を追加。

とありますが、「デザイン」→「スタイルシート」→画面左側の「カテゴリ」の中に追加してみたのですが、上手くいきません。「カテゴリ」を開いてもカテゴリのCSSが何も表示されないのですが、それが原因でしょうか?
是非教えて下さい。
Posted by sanshiro at 2005年05月15日 16:33
>「デザイン」→「スタイルシート」→画面左側の「カテゴリ」の中に追加してみたのですが、上手くいきません。
私の場合、メインのCSSに追加しました。
個別のCSSを使うときは再構築が必要です。
たぶんそれが原因ではないでしょうか?
Posted by 深田 at 2005年05月15日 18:03
メインのCSSのどことどこの間に追加すれば良いのでしょうか?
お手数かけてすみません、初心者なので。
宜しくお願いします。
Posted by sanshiro at 2005年05月15日 19:57
探田さんへ
駄目元でCSSの一番最後に追加したら出来ました。
ありがとうございます、助かりました。
Posted by sanshiro at 2005年05月16日 10:33
深田さんこんにちはココです...
この記事とパンくずリストの作成を参考にワタシもブログにも手を加えてみました...
なかなか最初は上手く表示されなかったりしたのです...
たぶん記事中のHTMLをそのままコピーしたのですがひょっとすると文字間に余計なスペースが入ったせいかな?などと思っています...
とにかく何回かトライしたら、大成功!
すばらしく見やすくなりましたよ!ありがとうございます
(^∀^)
またこれからも記事参考にさせていただいてブログリニューアルしてみたいと思います。
人気ブログランキングの方いっぱいクリックしておきますね
ふふふ...
Posted by ココ at 2005年05月18日 18:54
sanshiroさん、ココ さんコメントありがとうございます。
この記事がお役に立てたようで(^^ゞ

ちなみに探田ではなく深田です(^^ゞ
Posted by 深田 at 2005年05月19日 21:34
はじめまして。
大変興味深くこちらの記事を拝見させてもらいます。
突然の質問なのですが、カテゴリー内記事のタイトル一覧をサイドバーに表示させる事は出来ないものなのでしょうか?
いろいろ検索して調べたのですが、私の検索の仕方が悪いのか思うような解決策が見つからなくて、、、、、、、。
Posted by baho at 2005年05月26日 16:09
はじめまして。
どの記事も大変参考になり、自分のブログのカスタマイズに使わせていただいております。
記事リストなのですが、記事タイトルを
5,6
3,4
1,2
という順番ではなく
1,4 6,3
2,5 または 5,2
3,6 4,1
という風に並べられるともっとよいのですが・・・。
ネット上で調べてはいますが、なかなかみあたりません。
やっぱり難しいですかね。
Posted by acha at 2005年06月12日 07:29
すみません。先ほど投稿したコメント、スペースで見にくくなってしまったので、削除してください。mOm

はじめまして。
どの記事も大変参考になり、自分のブログのカスタマイズに使わせていただいております。
記事リストなのですが、記事タイトルを
5,6
3,4
1,2
という順番ではなく
6,3
5,2
4,1
または
1,4
2,5
3,6
という風に並べられるともっとよいのですが・・・。
ネット上で調べてはいますが、なかなかみあたりません。
やっぱり難しいですかね。
Posted by acha at 2005年06月12日 07:32
一覧表示が多くなったので探していたら、こちらに辿り着きました。有り難う御座います。山の爺でも解り易い解説で助かりました。
有り難う御座いました。
長い物が横に広がり良い感じです。

TBも貼らせて頂きました。
Posted by 山の爺 at 2005年11月20日 00:49
こんにちは
以前パンくずでもお世話になったものです
今回もカテゴリ一覧の際参考にさせて頂きました
解り易い説明ですぐ自分にも出来たので感動しています
ありがとうございました
Posted by HIMS at 2006年04月26日 18:32
こんにちは
このカスタマイズは、役に立ちました。ありがとうございます。

Seesaaの機能で、カテゴリページの記事の数が制限されました。
そうすると、カテゴリページが1ページ目なら、1ページ目の記事しか表示されなくなってしまいました。
カテゴリ全部の記事を表示したいのですが・・・。
忙しいところに、すいません。
できなければ、できないで結構ですので、回答よろしくお願いします。

Posted by まっつん at 2006年06月24日 17:05
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

カテゴリリスト表示と記事の整理
Excerpt: 作成当初から、あまりカテゴリを意識してなかったせいか、結構、いい加減なカテゴリ分けされてました。 記事がちょっとずつ増えてきたのと、自分のメモ代わりでもあるので、もっと見やすくしちゃろう、と思って、..
Weblog: 今さら英語学習してみたり
Tracked: 2005-04-10 13:36

続・カテゴリ記事一覧表示
Excerpt: 過去記事『カテゴリで記事一覧表示』(2005.08.11付)にてカテゴリ&amp;過去ログページでの投稿記事一覧を表示させる方法について書きましたが、そろそろカテゴリによってはちと厳しい状況になったよ..
Weblog: 雑記
Tracked: 2005-11-15 00:20

記事一覧表示を2列に・・。
Excerpt: 以前カテゴリー記事の一覧と言う物を追加したが是では記事が多くなると一覧ではなくなる。 せめて2列に出来ない物か?と思っていたら流石にあった。 凄いな~早速爺も試して見よう。ソレはコチラ 念の為今まで..
Weblog: ★山の茶店の号外★
Tracked: 2005-11-20 00:40

blogカスタマイズ大作戦!
Excerpt: 今回は小説公開用ということで、今までの所謂日記風のブログデザインから大きくカスタマイズいたしました。 とりあえず箇条書きで軽く一覧。 ・カレンダーを横型に ・TOPページにジャンル別新着記事リスト..
Weblog: Novel's blog.
Tracked: 2006-02-14 04:42

seesaaブログでカテゴリーページに記事一覧を入れる
Excerpt: カテゴリーページに記事一覧があったら便利かな~?と思って入れてみました。 逆になんかごちゃごちゃしてしまったような気もしますが。。。 参考にしたのは Inqsite Blogさんのカテゴリー記事リ..
Weblog: えのさんのブログとアフィリエイトとSEOの基礎知識
Tracked: 2006-04-29 18:39

Seesaaブログで件数表示を伴うカテゴリ・過去ログ別記事一覧表示
Excerpt: 私がブログを始めるに当たってSeesaaブログを選んだ一つの理由にHTMLやスタイルシートの直接編集ができることがありました。 これまでもここやここなど他のサイトを参考にいくつかHTMLをいじってきま..
Weblog: 徒然なるままに
Tracked: 2006-05-27 20:35
>>関連書籍
×

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