livedoor Blogの記事は2つのカテゴリに登録できますが、サブカテゴリを設定することはできません(注)1。

  (注)1  「記事カテゴリ階層化」機能が追加されました。末尾「2013年02月21日追記」をご覧ください。

投稿した記事の数が増えるにつれ、きちんとカテゴリ分けしていないと、サイト訪問者の使い易さを損なうことに… （´＿｀;） 。そこで、アクセス数の多いカテゴリを中心に細分化することにしました。

まず手っ取り早くtakoashiさんのスクリプトを導入したのですが、気になる点がいくつか出てきました。

• 開閉時の動きが機械的で滑らかなスライドではない…
• サブカテゴリの開閉に合わせて記号［+］が変わらない…
• サブカテゴリの開閉状態を維持することができない…

そこで、takoashiさんのスクリプトのうち、サブカテゴリの開閉に関する部分は、jQueryを使って新たに作成しました。

それでは、「開閉式カテゴリ」の実装手順を説明していきます。なお、「5 参照画像」も参考にしてください。

1 カテゴリ別アーカイブ

まず、ブログの管理画面から［ブログ設定］−［ブログパーツ］と進み、サイドバーに［カテゴリ別アーカイブ］があるかを確認し、もしなければ追加しておきます。

2 サブカテゴリ化

［ブログ設定］−［カテゴリの設定］と進み、［新しいカテゴリを作る］を押して、サブカテゴリを新たに設けます。

1. 例えば、現在ある「ニュース」というカテゴリの下に、「政治」・「経済」・「スポーツ」というサブカテゴリを設けるには、「ニュース」を「ニュース：政治」に変更し、新たに「ニュース：経済」・「ニュース：スポーツ」を作成します。
2. 投稿した記事のカテゴリの変更を行います。
3. 細分化しないカテゴリについては、特に必要な操作はなく、何もしなくて構いません。

   サブカテゴリの区切り記号は、必ず全角の「：」を使ってください。

3 スクリプトの設定

上記１の［カテゴリ別アーカイブ］の直下に、［ブログパーツ］の［フリーエリア］を追加して、下記のスクリプトをコピーして貼り付けます。

　スクリプト中、var cate_div = GetPluginByTitle("カテゴリ別アーカイブ");の太字部分が、［カテゴリ別アーカイブ］の［ラベル］名と異なる場合、表示名に合わせて変更します。

4 スタイルの設定

［ブログパーツ］−［カスタマイズ］−［CSS］と進み、下記のコードをコピーして、スタイルシートの最後に貼り付けます。

　コード中、".key"，".key2"の文字色や背景色は、実装するブログスタイルに合わせて適宜変更してください。

5 参照画像

画像をクリックすると拡大します

【カテゴリ別アーカイブの追加】

【フリーエリアの設定】

【スタイルシートの設定】

以上で手順は終了です。使用にあたっては、あくまで自己責任でお願いします。