開閉式カテゴリ for livedoor Blog : 安達司法書士.comブログ

2013年01月19日

開閉式カテゴリ for livedoor Blog

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

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


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


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

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

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


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

1 カテゴリ別アーカイブ

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

2 サブカテゴリ化

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

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

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

3 スクリプトの設定

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

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

4 スタイルの設定

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

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

5 参照画像

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

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

フリーエリアの設定
【フリーエリアの設定】

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


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

にほんブログ村 鉄道ブログ 鉄道写真へ
にほんブログ村

ランキングに参加中…クリックをお願いします.



2013年02月19日追記 重要



一部のPCで開閉記号[+]が表示されない不具合があり、本スクリプトの更新を行いました。


「開閉式カテゴリ」をすでに導入されている方は、必ず現在ご使用のスクリプトとCSSコードを全て削除してから、本文の実装手順中、「3 スクリプトの設定」および「4 スタイルの設定」を再度行ってください。


2013年02月21日追記



livedoor Blogにも、「記事カテゴリ階層化」機能がやっと追加されました。ただ、既存のテンプレートに適合しない、Firefoxで正常に動作しないなど、いくつかの問題点が指摘されています。「開閉式カテゴリ」はまだ十分に利用価値ありか…(笑)


「開閉式カテゴリ」を導入される場合、カテゴリの親子関係の作り方は、必ず本文の実装手順中、「2 サブカテゴリ化」に従ってください。



記事の内容(画)が良かった!と思われたら、バナークリックをお願いします...


この記事にコメントする

名前:
URL:
 
情報を記憶: 
評価: