2006年08月18日

カテゴリの一覧表示

[修正あり(2007/2/22)]
カテゴリ(左上の欄)をクリックすると、該当するカテゴリの記事が表示される。
初期状態では、ただ、ずら〜っと記事が並ぶだけ。

「このカテゴリの記事はどんなものがあるんだろう?」と思ってクリックしてくれた人に、最後まで見ないとどんなタイトルがあるのかさえわからないのは不親切だと思うんだよね。
そこまで付き合って見てくれない可能性のほうが大きいと思うし。
本だって、まず目次のタイトルをパラパラと見てから中身を読むかどうか決めたりする。
人によるのかもしれないけれど、自分がそういうたちだから、目次がないのってなんかヘンだと思っちゃうのだ。

さてさて。ここからは、じゃあ、どうするの?って話です。

たひたびお世話になっているブログ? カスタマイズ? アフィリエイト?というブログでは、まずタイトルの一覧が表示されるようになっているんですよ。
初めて見たときは「なんてユーザーに親切なっ!」と感激したね〜。

はい。さっそく導入しますよ。
詳細はブログ? カスタマイズ? アフィリエイト?「カテゴリの記事一覧を表示」を読んでくださいね。
該当するHTMLの部分をコピー&ペーストするだけでできちゃうので、とっても簡単。
Seesaa機能強化後の最新のHTMLは記事の一番下にあるのでご注意を。
 
 
これだけで、とりあえず一覧が表示される。
ただ、デフォルトだと見栄えがよろしくない。
使用しているテンプレートによるんだと思うんだけど、ただ単にセンタリングされたりするのだ。

センタリングがなぜ良くないからというと、目線をあっちこち動かすことになって読みにくいから。
私が影響を受けたデザインの本ノンデザイナーズ・デザインブック Second Edition』ロビン・ウィリアムズ著(毎日コミュニケーションズ)でも、デザインに慣れないうちは中央揃えを止めなさいと書いてある。同感なので、今回もその指示に従おう。

他のコンテンツも左寄せなんだから、ココも左寄せにした。
ブログ? カスタマイズ? アフィリエイト?で紹介されているスタイルシートの指定の仕方に、文字の左寄せの要素を追加。

  管理画面 > デザイン

と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。
現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。
※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。

  #clist {
  background:#FFFFFF;
  margin: 10px;
  padding: 10px;
  text-align:left;}

  #clist li {
  margin: 0px;
  padding: 0px;}

を追加して、再構築すれば終了。
ここでは背景(background)は白にしたけど、色はお好みで。薄めの色を指定してもいいかも。
marginて何?と思った方は、
  HTMLクイックリファレンス > スタイルシートリファレンス > margin 
などを参考にしてくださいね。
とりあえずは上記のままでもいいと思うけどね。


すでに設定してあるので、試しに左のカテゴリ欄にある「カスタマイズ」をクリックしてみてくださいな。

  [カスタマイズ]の記事一覧

という見出しの下に、各記事のタイトル一覧が表示されるでしょ?
どう? こういうのがあったほうがユーザービリティが高い感じがしない?


[今回お世話になったブログ]
ブログ? カスタマイズ? アフィリエイト?
 カテゴリの記事一覧を表示
 http://blogca.seesaa.net/article/11189262.html

↓参考になったら、クリックで応援してね!↓


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/22485529
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
以下の書籍がきっと参考になります