灰色の棚

適当な話を適当に書くので、適当に見ていってください

構造化したカテゴリをサイドバーのカテゴリー欄に表示してみた

ブログ ブログ-灰色の棚


スポンサードリンク

・2015.1.31 編集・追記 - 言及記事がアップデートされていたため

f:id:syunki-gt:20140924150802p:plain
　前記事で「サイドバーのカテゴリを綺麗にリスト表示したいけど」「ちゃんと考えればできると思うんですが、メンドイ」とか書いたくせに、直後に作っちゃいました。

　意外とサクッと出来たので、やり方書いておきますね。


　では、いってみよー。

基本的にはこちらのコードを


　（記事のアップデートを確認したので差し替えました / 2015.1.31）

　こちらに上げられているコードに付け加えて、構造化したカテゴリをサイドバーのカテゴリー欄に表示していきます。

　なので、まずは上記事のコードを導入することが第一です。

Javascriptに数行書き足す

  for(var key in rootCategories) {
    if(!(rootCategories[key].outerHTML === void 0)) {
      html += '<li>' + rootCategories[key].outerHTML + '</li> ';
    }
  }

　このfor文を書き換えます。書き換えたのが、

  for(var key in rootCategories) {
    var html2 = '<ul>';
    for(var key2 in childCategories[key]) {
    	html2 += '<li>' + childCategories[key][key2].outerHTML + '</li>';
    }
    html2 += '</ul>';
    if(!(rootCategories[key].outerHTML === void 0)) {
      html += '<li>' + rootCategories[key].outerHTML + html2 + '</li> ';
    }
  }

　こちら。


　やったことは、親カテゴリのリストの最後に、その子カテゴリのリストを追加してます。単純です。

CSSを追加する

　CSSは使っているデザインなどによって様々だと思いますし、好きに整えるのがいいと思いますが一例として私が書いたものを載せておきますね。

.hatena-module-category li {
    display: list-item;
    margin-left: 15px;
    list-style-type: disc;
}
.hatena-module-category li li {
    margin-left: 25px;
    list-style-type: circle;
}
.hatena-module-category li a {
    display: inline;
    border: none;
    padding: 0;
    line-height: 20px;
    font-size: 100%;
}
.hatena-module-category li a:hover {
    background: none;
    text-decoration: underline;
}

　こんな感じにしてみました。


　もともとはいらないはずの行もいくつかありますが、使っているテンプレートの設定を戻すために必要だったので書いてます。

　お使いのテンプレートによっては、他にもいろいろ追加する必要が出てくるかもしれません。

おわりに

　簡単に出来るかな？ と思ってJavascriptのコードを眺めたら出来そうだったので、書き足しました。

　所要時間10分くらいかな。もともとのところから作ろうと思ったらかなり時間がかかったと思うので、私のやったことは簡単な改造でしか無いですけどね。


　ま、とりあえずやりたい事は出来たので良かったです。

　では、今回はこのへんで。おわり！

追記（2015.1.31）

　言及記事のコードがgithubからの読み込み型になったため、部分的に改変することが難しくなっています。

　しかし、やりたいことは変わらない、どうするか。簡単な方法を（コードを載せるのはちょっとどうかと思うので文章で）説明します！


　やることは、関数をコピペしてきて該当部分を置き替え、それを呼ぶ。というだけ。

　urlの先を見ればコードは見えるので、必要部分をコピペしてきてヘッダーにscriptとして貼り付けて、改変して呼んでやると動きました。


　ただ、この方法を使うと、大本のスクリプトがアップデートされたりした時に動作がおかしくなる可能性があるし、完全に自己責任でお願いします。

　具体的には書かないので、上の文章だけでやり方が分かって、かつ何か起きたら自分で何とか出来る（する）人だけお試し下さい。


　以上、追記でした！

'; $('#main').prepend(pager); } });