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

2013年01月19日

開閉式カテゴリ for livedoor Blog

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

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

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

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

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

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

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

1 カテゴリ別アーカイブ

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

2 サブカテゴリ化

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

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

3 スクリプトの設定

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

<!-- カテゴリツリー表示開始 -->
<script type="text/javascript" 
src="http://blog.livedoor.jp/takoashi/js/CreateCategoryTree.js"></script>
<script type="text/javascript" 
src="http://blog.livedoor.jp/takoashi/js/ConvertTree.js"></script>
<script type="text/javascript" 
src="http://www.adachi-shihoshoshi.com/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" 
src="http://www.adachi-shihoshoshi.com/js/jquery.cookie.js"></script>
<script type="text/javascript" 
src="http://www.adachi-shihoshoshi.com/js/subcategory.js"></script>
<script language="JavaScript"><!-- 
var cate_div = GetPluginByTitle("カテゴリ別アーカイブ"); 
if( cate_div != null )
{
var cate_tree = CreateTreeDataFromCategories(cate_div,"：");
var cate_td = new TreeDataObj();
// 開閉するための設定開始
cate_td.KeyTS	= '<div class="key">';
cate_td.KeyTE	= '</div>';
cate_td.KeyTSN	= '<div class="key2">';
cate_td.KeyTEN	= '</div>';
cate_td.LeafAS	= '<div class="leaf_area">';
cate_td.LeafAE	= '</div>';
// 開閉するための設定終了
ConvertTree(cate_tree,cate_div,cate_td);
}
// --></script>
<!-- カテゴリツリー表示終了 -->

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

4 スタイルの設定

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

/*------------------------------*/
  /* カテゴリツリー表示 */
         .key_area {
                padding:0 0 0 10px;
                text-align:left;
        }
        /* カテゴリ（サブカテゴリ有り） */
        .key {
                color:#000080; /* 文字色 */
                cursor:pointer;
                background:url(https://livedoor.blogimg.jp/horiemon3_/imgs/6/d/6d917d08.gif); /* 開閉記号［＋］ */
                background-repeat:no-repeat;
                background-position:0% 51%; /* 背景画像の表示開始位置[左][上] */
                padding:1px 0px 1px 15px; /* 要素内のスペース[上][右][下][左] */
        }
        /* カーソルがカテゴリ（サブカテゴリ有り）の上に乗った時 */
        .key:hover {
                color:#0000ff; /* 文字色 */
                background-color:#ffddff; /* 背景色 */
        }
        /* カーソルがカテゴリ（サブカテゴリ無し）の上に乗った時 */
        .key2:hover {
                background-color:#eee; /* 背景色 */
        }
        .leaf_area {
                margin:3px 3px 3px 3px;
                text-align:left;
                display:none;
        }
        .leaf {
                padding:0 2px 2px 18px;
                margin:0;
                background: url(https://livedoor.blogimg.jp/horiemon3_/imgs/1/0/1019ab65.gif) no-repeat; 
        }
        .leaf_last {
                padding:0 2px 2px 18px;
                margin:0;
                background: url(https://livedoor.blogimg.jp/horiemon3_/imgs/d/b/db924646.gif) no-repeat; 
        }
/*------------------------------*/

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