2007年から2013年までの期間、およそ10,000件のデザインの記事をアップしたブログのアーカイブ。現在はhttp://designwork-s.netで更新中。
2007年04月20日

seesaaカスタマイズ カテゴリー内の新着記事をリストアップ

カテゴリーも階層が増えてくると自分の知りたい情報を探し出すのは非常にめんどくさくなってしまいます。今日紹介するSeesaaBlogのカスタマイズは「カテゴリー内の新着記事をリストアップ」してカテゴリページ先頭に表示すると言うものです。

これでカテゴリー内の情報の把握は非常にしやすくなり、各カテゴリーで簡易のメニューができるような形になりますのでユーザーにとってカテゴリー内から必要な情報を閲覧しやすくなるとおもいます。

カスタマイズ方法は以下

まず記事に新着記事リストアップ用のコードを埋め込みます。

デザイン>コンテンツ>記事>コンテンツの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(75) %><br></a>
<% /loop -%>
<br style="clear:both "></div>
</div>

<% /if -%>


上記コードの赤字の部分を追加します。HTMLの上の方にあるはずです。この時shorten(75)の数字は変数ですので変える事ができどのくらいの長さまでタイトルを表示するか決める事ができます。


次にこちらのデザインを制御するCSSを記述します。

デザイン>デザイン一覧>お使いのCSSを編集します。

.lead {
font-weight:normal;
line-height:120%;
margin:5px 5px 5px 5px;
padding:0px;
background-color: #FFFFFF;
}
.lead-title {
font-size: 90%;
font-weight:bold;
padding:5px;
margin:5px 5px 5px 5px;
background-color: #FFFFFF;
}
.cbody {
font-size: 12px;
padding:0px 10px 0px 10px;
margin:0px;
}
.cbody a {
margin:0px;
padding:0px;
width: 450px;
background-color: #eeeeee;
font-weight: normal;
}


こちらのCSSは当ブログでの設定になりますので、見た目や組み方などカスタマイズ先のブログに合わせて変えてみてください。現在の設定は一段組の設定ですが、CSSの".cbody a "に"float: left;"をつけることで二段組で表示されるようになります。色々と試して最適なものを見つけてください。

via Inqsite Blog

関連記事
seesaaカスタマイズ「記事の下にバナーを埋め込む」
関連記事を自動表示する「カンレン.えんとり〜ず」
seesaaブログでファビコンを表示させる方法
適切な見出しタグをつけてSEO対策
posted by admin at 10:48 | Comment(8) | TrackBack(0) | Seesaaカスタマイズ
この記事へのコメント
始めして〜
初心者ですが、カスタマイズの仕方を色々探していてたどり着きました

cssの編集部分は、cssのどこの部分に追加したらいいのでしょか?
宜しくご指導下さい
Posted by クレア at 2007年06月25日 02:15
クレアさん>
説明不足で申し訳ありません。CSSはどこに記入していただいても動作します。最後に追記していただいてもかまいません。ご自身がわかりやすい所で良いかと思います。
Posted by 管理人 at 2007年06月25日 22:52
ありがとうございます
試してみたのですが、上手く行きません

私の場合は、記事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 -%>

<% loop:list_article -%>

HTML編集で
<% if:page_name eq 'category' -%>のすぐ下にご説明の赤文字部分を貼り付けて、CSSの編集で、一番最後に付け加えてプレビューしてみましたが、作動していないんです
何処が間違っているのでしょ?
赤文字の部分の貼り付け場所がいけないのでしょうか?
度々恐れ入りますが、ご指導下さい


Posted by クレア at 2007年06月26日 01:01
クレアさん>
ソース拝見いたしました。赤字を挿入する所は文章では説明しず来のですがソース文末の<% /if -%>と<% /if -%>の間です。下記を参照下さい。

</div>
<% /if -%>
----------ここに赤字のソースを入れる----------
<% /if -%>

<% loop:list_article -%>

これで動作すると思います。一度お試し下さい。
Posted by 管理人 at 2007年06月26日 10:32
どうもはじめまして。

ひとつ、もしお知りでしたらお聞きしたいのですが、、、

このカテゴリの記事を表示する方法なのですが、
全記事を目次のように表示することはできないのですか?記事数が多いとどうしても過去の情報にアクセスしにくくなってしまう気がしまして、記事数を指定する方法はないのでしょうか?

不躾な質問、失礼しましたm__m
Posted by ma at 2008年05月18日 18:48
maさん>
すみませんパッと出てこないので、一度調べて分かりましたら記事にまとめたいと思います。過去の情報への利便性はブログの課題でもありますよね、
Posted by 管理人 at 2008年05月30日 19:49
どうもお返事ありがとうございます。
わざわざどうもすいません。

こちらも検索したり、調べては見たんですが、
Seesaaはなかなか見つからないんですよね。
Posted by ma at 2008年06月08日 11:11
maさん>
特定のカスタマイズを見つけるのはなかなか難しいですよね。見かけたらまたエントリーしておきます。

Posted by 管理人 at 2008年06月23日 14:57
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/39442952
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

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