2011年2月21日月曜日

Seesaaブログ カテゴリでタイトルリストを表示する設定

今回の記事は番外編です。

Seesaaブログを利用していると、過去に書いた記事を探すのに苦労することがある。これは、カテゴリ毎の記事タイトル一覧表示機能が無いためである。
タグを使ってタイトル一覧表示は可能だが、どうもしっくりこない。タグは記事に複数付けることができるため、関連検索するのには便利だ。しかし順番に読んだり、記憶を辿って記事を探すのには不適だと思う。
この事は以前から気になっていたが、デザインの問題だと思って放置していた。

しかし下のサイト記事を参考にしたところ、上手く変更できた。参考というより、追加コード自体そのまま利用させて貰った。


参考にさせていただいた記事 (ありがとうございます!)

徒然なるままに - Seesaaブログで件数表示を伴うカテゴリ・過去ログ別記事一覧表示

Seesaaデザインテンプレート - カテゴリで記事一覧を表示する [HTML+CSS]


結構ややこしい設定でもあるので、以下、忘れないうちに設定方法をメモ書きする。

HTMLコードの修正

Seesaaブログ管理画面から、 ① 「デザイン」 → 「コンテンツ」 を選択。(イメージ1)
コンテンツ画面が表示されたら、 ② 「記事」 をクリック。(イメージ1)
イメージ1

記事のウィンドウが開いたら、左上の ③ 「コンテンツHTML編集」 をクリック。(イメージ2)
イメージ2

HTML編集画面で ④ HTMLコード欄にカーソルを移動して、Ctl+A で全コードを選択状態にし Ctl+C でコードをコピー してテキストエディター等に貼り付ける。(イメージ3)。 イメージ3

⑤ HTMLコードの修正(2箇所)
エディター等(eclipseを使うと便利なようだ)で、次の部分のコードに手を加える。

<% if:page_name eq 'category' -%>のif文の処理の最後にコードを付け足す。具体的には46行目の <% /if -%> の直前にコードを加える。
<!--一覧表示-->
<div class="blog">
<div class="blogbody"><h3 class="title">[<% category.name %>]の記事一覧</h3>
<div id="clist">
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
</div>
</div>
<!--一覧表示-->
コードの追加は、下のようなイメージになる。(イメージ4)
イメージ4

以上の修正でカテゴリで、タイトル一覧が表示される。しかし一覧の下に従来通り、記事本文がズラリと表示されてしまう。これは分かりにくいので、カテゴリ表示では記事本文を表示しないように変更する。

記事本文を表示しているのは、先ほどコードを追加した <% if:page_name eq 'category' -%> 処理文の直ぐ下にある <% loop:list_article -%> ループ処理である。ここでカテゴリ表示では処理を行わないようにunless文で囲う。

コード追加箇所は、48行目(コード追加前の行数)の <% if:page_name eq 'category' -%> の直前と 122行目の <% /loop -%> の直後である。

このループ処理の外に、次のunless文を追加する。
<% unless:page_name eq 'category' -%>

<% /unless -%>
追加コードのイメージは次の通り。(イメージ5)
イメージ5

修正したコード全文を ⑥「コンテンツHTML編集」のコード部分 に貼り付けて、⑦「保存」ボタン を押す。最後にコンテンツの画面で、⑧「設定を反映する」ボタン  を押す。

これでHTMLの修正は完了。



CSSの修正

記事タイトル一覧がきれいに表示されるように、CSSの記述を追加する。

Seesaaブログ管理画面から、 ①「デザイン」 → 「デザイン一覧」 を選択。

デザイン一覧の中で ②「適用」しているデザインタイトルをクリック して、CSSコード修正画面を開く。

コードの一番最後までスクロールして、コードの一番最後に次の ③コードを追加 する。
/* カテゴリ記事リスト */
#clist {
margin-bottom: 0.6em;
font-size: 100%;
font-weight:normal;
line-height:150%;
}
コード追加が完了したら、④「スタイルシートを変更する」ボタン を押す。


以上の作業で、カテゴリーで記事タイトル一覧が表示できるようになる。コード行番号は変更になる可能性もあるので、コードの前後関係を注意して修正して欲しい。

カテゴリーに表示する記事タイトルの数は、「設定」→「ブログ設定」 の 「記事カテゴリページの表示件数」 で制御している。必要に応じて修正する事。

最後に今回の修正の詳細は、記事の最初で紹介したサイトで解説していますので、併せて参考にしてください。また、コードの修正は自己責任となることを十分留意してください。