2013年01月19日
開閉式カテゴリ for livedoor Blog
livedoor Blogの記事は2つのカテゴリに登録できますが、サブカテゴリを設定することはできません(注)1。
(注)1 「記事カテゴリ階層化」機能が追加されました。末尾「2013年02月21日追記」をご覧ください。
投稿した記事の数が増えるにつれ、きちんとカテゴリ分けしていないと、サイト訪問者の使い易さを損なうことに… （´＿｀;） 。そこで、アクセス数の多いカテゴリを中心に細分化することにしました。
まず手っ取り早くtakoashiさんのスクリプトを導入したのですが、気になる点がいくつか出てきました。
- 開閉時の動きが機械的で滑らかなスライドではない…
- サブカテゴリの開閉に合わせて記号［+］が変わらない…
- サブカテゴリの開閉状態を維持することができない…
そこで、takoashiさんのスクリプトのうち、サブカテゴリの開閉に関する部分は、jQueryを使って新たに作成しました。
それでは、「開閉式カテゴリ」の実装手順を説明していきます。なお、「5 参照画像」も参考にしてください。
1 カテゴリ別アーカイブ
まず、ブログの管理画面から［ブログ設定］−［ブログパーツ］と進み、サイドバーに［カテゴリ別アーカイブ］があるかを確認し、もしなければ追加しておきます。
2 サブカテゴリ化
［ブログ設定］−［カテゴリの設定］と進み、［新しいカテゴリを作る］を押して、サブカテゴリを新たに設けます。
- 例えば、現在ある「ニュース」というカテゴリの下に、「政治」・「経済」・「スポーツ」というサブカテゴリを設けるには、「ニュース」を「ニュース：政治」に変更し、新たに「ニュース：経済」・「ニュース：スポーツ」を作成します。
- 投稿した記事のカテゴリの変更を行います。
- 細分化しないカテゴリについては、特に必要な操作はなく、何もしなくて構いません。
サブカテゴリの区切り記号は、必ず全角の「：」を使ってください。
3 スクリプトの設定
上記１の［カテゴリ別アーカイブ］の直下に、［ブログパーツ］の［フリーエリア］を追加して、下記のスクリプトをコピーして貼り付けます。
スクリプト中、var cate_div = GetPluginByTitle("カテゴリ別アーカイブ");の太字部分が、［カテゴリ別アーカイブ］の［ラベル］名と異なる場合、表示名に合わせて変更します。
4 スタイルの設定
［ブログパーツ］−［カスタマイズ］−［CSS］と進み、下記のコードをコピーして、スタイルシートの最後に貼り付けます。
コード中、".key"，".key2"の文字色や背景色は、実装するブログスタイルに合わせて適宜変更してください。
5 参照画像
画像をクリックすると拡大します
【カテゴリ別アーカイブの追加】
【フリーエリアの設定】
【スタイルシートの設定】
以上で手順は終了です。使用にあたっては、あくまで自己責任でお願いします。
ランキングに参加中…クリックをお願いします．
2013年02月19日追記 重要
一部のPCで開閉記号［+］が表示されない不具合があり、本スクリプトの更新を行いました。
「開閉式カテゴリ」をすでに導入されている方は、必ず現在ご使用のスクリプトとCSSコードを全て削除してから、本文の実装手順中、「3 スクリプトの設定」および「4 スタイルの設定」を再度行ってください。
2013年02月21日追記
livedoor Blogにも、「記事カテゴリ階層化」機能がやっと追加されました。ただ、既存のテンプレートに適合しない、Firefoxで正常に動作しないなど、いくつかの問題点が指摘されています。「開閉式カテゴリ」はまだ十分に利用価値ありか…(笑)
「開閉式カテゴリ」を導入される場合、カテゴリの親子関係の作り方は、必ず本文の実装手順中、「2 サブカテゴリ化」に従ってください。
|
