2007年07月06日

さくらのブログでサブカテゴリ化

カテゴリを整理するついでいにサブカテゴリ化できたらいいなと思い、いろいろ調べてみました。

参考にしたのは以下のサイト
 (1)サブカテゴリ風に表示する: ボボ日
 (2)Des notes de KOHtan: Blog>ツリー化

成果は左サイドバーのカテゴリをご覧のとおりです。

とりあえず説明も面倒なのでこうやったらできるよって方法を書きます。
基本は(1)の方法で、デザインというかツリーのマークは(2)をパクった参考にしました。
(1)ほど汎用性は無いけど(2)よりも少し柔軟な作りというコンセプト。

方法は
「ブログが再構成によって作成したHTMLをJavaScriptでもう一度無理矢理書き換えてサブカテゴリ化」
というもの。


以下、手順。

1.JavaScriptファイル用意
私が使っているスクリプトファイルsubcategory.jsをダウンロードして、自分のサーバ上の好きな場所へ置く。
私は、さくらのレンタルサーバのメインドメイン直下にjsフォルダを作成してその中に格納し、作成した複数のブログから参照している。


2.HTML編集
さくらのマイブログのページから
「デザイン」→「コンテンツ」→コンテンツ一覧の「カテゴリ」へ移動。
さらに右上の「コンテンツHTML編集」を選択し、現在のHTMLが表示する。

デフォルトは

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
<% /loop -%>
<% content.footer -%>
</div>

こんな感じになっているので、これを
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_category -%>
<div class="sidebody">
<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)<br />
</div>
<% /loop -%>
<% content.footer -%>
</div>

<script language="JavaScript"
src="http://konoyosubeteno.sakura.ne.jp/js/subcategory.js">
</script>
<script language="JavaScript">
subcategory( "カテゴリ", ":", "links-left" );
</script>

のように修正。青文字が追加部分。

リンク部分は作業1.のJavaScriptファイルのURI
その下の行はファイルに記述した関数の呼び出し
第一引数がカテゴリコンテンツのタイトル
第二引数が次の作業3.で説明する区切り文字
第三引数がカテゴリコンテンツのあるサイドバーのID


3.カテゴリ編集
カテゴリ名を
スポーツ:フットサル
スポーツ:ジムトレーニング
スポーツ:スノーボード
のように変更する。
ここで「:」は上記のJavaScript呼び出し関数の第2引数に指定した文字と同じにする事。
この区切り文字より前の部分がメインカテゴリ、後ろの部分がサブカテゴリとなる。

4.スタイルシート記述
クラスblogsidebodyとクラスtsubのスタイルを記述をすることである程度のデザイン変更が可能


5.すべてを再構成する

以上、説明終わり。

この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/4607837

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

サブカテゴリ
Excerpt: MTを再導入するぐらいだったら、さくらのブログの方が便利だと思ったので変えてみたのはいいのですが、 サブカテゴリが使えない…。 これはちょっと見るのに不便だなぁと思ってサブカテゴリをどうにか追加できな..
Weblog: 夏みかん - BLOG
Tracked: 2008-03-02 02:42