2006年01月13日

カテゴリを一覧表示にカスタマイズ!

最近ブログの記事もたくさん貯まってきました。前に書いた記事をすぐに見れるように、今まで記事リストを左に表示させてたんですが、数が増えすぎてきたので、カテゴリ分けを使うことにしました。ただ、カテゴリ分けって使いにくい!カテゴリの記事が本文ごと並ぶからすごく見にくくて・・・読みたい記事を探すのも一苦労です。

カテゴリをクリックすると、その中にはいってる記事のタイトルがリスト表示されたら使いやすいのになぁと思ったので、作ってみました。ライブドアのデザイン設定は、トップページやカテゴリなんかは別々に設定できるので、カテゴリだけのデザインを変えてやればOKでした。詳しい説明を書きたいんですが、長くなるのでやり方だけご説明です。

  1. blog管理画面のデザインの設定を開きます。
  2. そこの一番下の「カスタマイズ」を開きます。
  3. その中のカテゴリアーカイブをクリックします。

この内容がカテゴリのデザイン設定になっているので、ここのコードを書き換えてやります。

(元のコード)

<CategorizedArticlesLoop>
 ・
 ・
 省略
 ・
 ・
</CategorizedArticlesLoop>

カテゴリアーカイブの中に、上のようなコードがあります。この赤字になっている部分全部を、まるごと下のコードに置き換えます。

(変更後のコード)

<!-- 記事タイトルだけをリスト表示 -->
<div class="datetop"></div><!-- 記事のヘッダーデザイン部分。ループから外す -->
<div class="fullbody"><!-- 記事の背景。ループから外す -->
<div class="blogbodytop"></div><!-- 記事の上の余白等の設定。ループから外す -->
<div class="blogbody"><!-- 記事の余白等の配置設定。ループから外す -->
<a name="<$ArticleId$>"></a>
<CategorizedArticlesLoop><!-- ここから記事ループ開始 -->
<$TrackBackAutoDiscovery$>
<!-- 記事タイトルのデザインを適用。上余白を設定 -->
<h2 class="title" style="padding-top:8px;">
<!-- 記事のタイトルリンク -->
・<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></a>
<!-- 日付を表示。タイトルよりも小さめに -->
<span style="font-size:80%;"> <IfDateChanged><$ArticleDate$></IfDateChanged></span>
</h2>
</CategorizedArticlesLoop><!-- 記事のループここまで -->
</div>
</div>
<div class="blogbodybottom"></div><!-- 記事の下の余白等の設定。ループから外す -->
<IfDateFooter><div class="dateend"></div></IfDateFooter><!-- 記事のフッターデザイン部分。ループから外す -->
<!-- 記事タイトルだけをリスト表示、ここまで -->

貼り付けたら、「この内容で保存」→「カテゴリー別アーカイブの再構築」で完了です。

ブログのカテゴリをクリックした時に、タイトル一覧が表示されているはずです。この一覧のタイトルのデザインは記事タイトルと同じデザインを使ってます。そのままのコピーで上手くいかない場合は、<h2 class="のあとのtitledateに変えてみてください。もしかしたら上手くいくかもしれません。それでも表示がおかしいときは、8pxの数字を変えると、もしかしたら上手くいくかもしれません・・・それでも表示が崩れたら、デザインとの相性が悪いのかもしれません。ごめんなさい。

デザインのカスタマイズは、失敗するとブログの表示が壊れることが多々あるので、かならずバックアップをとって(メモ帳なんかに元データをコピーしておいて)からしてくださいね。申し訳ないですが、カスタマイズは自己責任でお願いします。デザインによっては、ほんと、笑えるくらいに崩れてしまいます。

ライブドアブログのカスタマイズって、いろんな方がしてらっしゃいますね。う〜ん、私も勉強しないと・・・がんばります。


トラックバックURL

この記事へのコメント

1. Posted by トプログ   2006年01月13日 15:17


新しいブログランキング「トプログ」がスタートしました !

↓↓現在「参加ブログ募集中」です。
http://toplog.jp/?cid=taka
──────────────────────────
▼▼▼▼▼▼▼ ブログ登録3大メリット ▼▼▼▼▼▼
(1)月間総合ランキング1位に10万円贈呈!
(2)週間総合ランキングTOP 20のブログを毎週「各
   マスコミ・メディアにプレスリリース」致します。
(3)あなたのブログへのアクセス数が飛躍的にUP!
──────────────────────────
■■■■■■■■■■■■■■■■■■■■■■■■■■
↓あなたのブログも是非、参戦登録して下さい。(無料)
http://toplog.jp/?cid=taka
■■■■■■■■■■■■■■■■■■■■■■■■■■
↑ パソコン・モバイルのどちらからでも登録可能です!


こんばんはー。
今日は質問があって訪問しました!

このカテゴリーのカスタマズって
記事を追加した場合は、勝手に追加されるんですか??
3. Posted by wo   2006年01月25日 22:45
フェンさん、こんばんは〜。
はい、もちろんです。

もともとあるカテゴリの分類プラグインから利用するので、記事を追加すると自動的にリストにあがってきますよ!

記事書くたびにリストに手作業で追加なんて、面倒ですからね〜。

ブログのデザインによって、表示がずれる物もありましたが、フェンさんのブログは私と同じタイプのデザインなので、上手くいくとおもいますよ!

念のためバックアップだけはお忘れなく〜。
woさん
回答ありがとうございます^^

さっそくやってみました!
もちろんバックアップも^^

確かにこれなら一括表示できて便利ですね♪

応援ポチッ!!
5. Posted by wo   2006年01月28日 23:22
フェンさん、こんばんは。
フェンさんのブログに遊びにいくと、うまく動いててホッとしました。

喜んでもらえて嬉しいです^^
6. Posted by みきお   2008年05月07日 03:34
はじめまして!
カテゴリーの一覧表示、カスタマイズしました。こちらのブログのおかげで、
表示されるようになりました。
ありがとうございました!!!
7. Posted by wo   2008年05月07日 23:37
みきおさん、こんばんは。
うまくいきましたか!よかったです。

かなり古い記事だったので、今でも役に立つのか不安でしたが・・・そう言っていただけるとうれしいです。

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
アクセスカウンタ

    ブログ内検索
    Google


    よりみちweb
    www