安達司法書士.comブログ:開閉状態を保持するカテゴリ - livedoor Blog(ブログ)

2013年01月19日

開閉状態を保持するカテゴリ


livedoor Blogの記事は2つのカテゴリに登録できますが、サブカテゴリを設定することはできません
「記事カテゴリ階層化」機能を追加 −末尾「2013年02月21日追記」参照−
投稿した記事の数が増えるにつれ、きちんとカテゴリ分けしていないと、サイト訪問者の使い易さを損なうことに… (´_`;) 。そこで、アクセス数の多いカテゴリを中心に細分化することにしました。これによって、訪問者の滞在時間が延び、閲覧するページ数も増えるはずです。

livedoor Blogのカテゴリを開閉可能なツリー型にするには、定評のあるtakoashiさんのスクリプトを導入するのが手っ取り早いのでは もちろん、当方もそうしましたが、気になる点がいくつか出てきました。
開閉時の動きが機械的で滑らかなスライドではない… (;´д`)ノ
サブカテゴリの開閉に合わせて記号[+]が変わらない…
サブカテゴリの開閉状態を維持することができない…
そこで、takoashiさんのスクリプトのうち、サブカテゴリの開閉に関する部分は、jQueryを使って新たに作成しています。

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

1 カテゴリ別アーカイブ

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

2 サブカテゴリ化

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

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

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

3 スクリプトの設定

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

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

4 スタイルの設定

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

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

5 参照画像

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

カテゴリ別アーカイブの追加 フリーエリアの設定 スタイルシートの設定

以上で手順は終了です。最後に、この「開閉式カテゴリ」は、Internet Explorer 8、Firefox 18の環境でしか動作確認していません。使用にあたっては、あくまで自己責任でお願いします。


2013年02月19日追記重要なお知らせ


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

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

2013年02月21日追記


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

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


記事の内容(画)が良かった!と思われたら、バナークリックをお願いします...
人気ブログランキング
書式の無償ダウンロード・便利ツールのご利用はホームページ

トラックバックURL

この記事にコメントする

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