【備忘録】サイドバーのカテゴリーを折り畳まずに階層化する(はてなブログ)
参考にしたブログ
【はてなブログ】カテゴリーを階層化する方法 – ブログ運営のためのブログカスタマイズ
はてなブログにパンくずリストを設定し、カテゴリーを階層化したのは良かった。
過去記事参照
しかし、カテゴリー数が大したことないのにサイドバーのカテゴリーが折り畳まれ、展開するために毎回クリック(スマホではタップ)する必要があるのが煩わしく感じるようになった。(自分の怠惰さに正直呆れる。)
そこで、カテゴリーを折り畳まずに階層化だけを行えるスクリプトを探したところ、まさに求めていた通りのスクリプトを自作し公開してくださっている方がいた。
手順1
過去記事にて貼り付けたパンくずリストを設定するスクリプト削除し、以下の内容を貼り付ける。
<!--カテゴリーを折り畳まないパンくずリストの設定--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function sub_cat(str){ (function($) { $(function() { $(str).each(function(){ var txt = $(this).text(); $(this).html( txt.replace(/.*-(.*)/g,'$1') ); }); }); })(jQuery); } (function($) { $(function() { $("ul.hatena-urllist li a:contains('-')").css( "margin-left", "20px" ); sub_cat("ul.hatena-urllist li a:contains('-')"); sub_cat("article div.entry-categories a:contains('-')"); sub_cat("archive-entry div.categories a:contains('-')"); }); })(jQuery); </script>
問題発生
過去記事の通り、当ブログはトップページをアーカイブページにすることで疑似的にホームを記事一覧にしている。
しかし、このスクリプトを導入したところ、記事一覧に表示されるカテゴリー名に親カテゴリー名と-(半角ハイフン)が残ったままになることに気がついた。
(カテゴリーを折り畳まなくするのには成功した)
CSSやHTMLについては全くの素人なので勘なのだが、
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
この方のフッターに設定するコードはスクリプトやCSSファイルをサーバーから読み込む構造になっており、3つのURLが入っている。
CSSを設定する場所ごとに分けているのだとしたら、どこかにアーカイブに表示されるカテゴリ名を編集するCSSがあるはずで、それだけを取り出して貼り付けることができれば競合などを起こさずに欲しい機能だけを叶えることができるのではないかと考えた。
解決法を模索する
1から勉強してコードを読み、特定の部分だけを抜き出すというのは面倒だった。
なのでまずこの3つを上からABCとし、組み合わせでどうなるのかを検証した。
また、スクリプトの順番(ここでは[折り畳まずに階層化するスクリプト]と[ABCによる任意の組み合わせ]の順番)によって結果が変わることがあると考え、[折り畳まずに階層化するスクリプト]の上にABCを追加した場合と下に追加した場合を分けて検証した。(ABCの組み合わせについては全てアルファベット順に並べるものとする)
結果
上に追加した場合
組み合わせ | カテゴリー名 | 階層化 | 結果の簡易表示 |
---|---|---|---|
A+B+C | 親カテゴリー名と-は表示されない | 折り畳まれない | 〇・〇 |
A+B | 親カテゴリー名と-は表示されない | 折り畳まれない | 〇・〇 |
B+C | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
A+C | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
Aだけ | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
Bだけ | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
Cだけ | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
何もなし | 親カテゴリー名と-が表示される | 折り畳まれる | ✖・✖ |
下に追加した場合
組み合わせ | カテゴリー名 | 階層化 | 結果の簡易表示 |
---|---|---|---|
A+B+C | 親カテゴリー名と-は表示されない | 折り畳まれない | 〇・〇 |
A+B | 親カテゴリー名と-は表示されない | 折り畳まれない | 〇・〇 |
B+C | 親カテゴリー名と-は表示されない | 折り畳まれる | 〇・✖ |
A+C | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
Aだけ | 親カテゴリー名と-が表示される | 折り畳まれない | ✖・〇 |
Bだけ | 親カテゴリー名と-は表示されない | 折り畳まれない | 〇・〇 |
Cだけ | 親カテゴリー名と-が表示される | 折り畳まれる | ✖・✖ |
何もなし | 親カテゴリー名と-が表示される | 折り畳まれる | ✖・✖ |
正直なところ、Cにはcategory_archive
という単語が入っていて、これだけ入れれば解決するのかと思っていた
違った
取り敢えず、一番行数が少なくて済む「下にBを追加する」ことに決めた。
しかし、この結果の理解の出来なさが気持ち悪すぎるので、やっぱり自分でコードを考えるかもしれない…