公式パンくずリストとサイドバーのカテゴリ表示とをカスタマイズした
パンくずリストの導入に伴いカテゴリを色々弄っていましたが、子カテゴリをそれなりに作った関係でサイドバーの表示が結構汚くなってしまいました。
今回は、それを解消するに至ったのでそのご報告。
カテゴリ表示をきれいにしたい!
テンプレートのデザインだと狭いサイドバー内でカテゴリ同士が並列表記されていました。
一列に2個だったり1個だけだったりと、当ブログにはちょっと向いていない感じ。
まずは、ここを変えてみました。
並列表示を直列表示に
かれこれ16年前からホームページ作ったりしていた身なので、HTMLとCSSは理解しています。
昔取った杵柄、ソースを見たりCSSのコードを見たりと奮闘し、該当する記載を発見。
サイドバー内のカテゴリー欄について、CSSで
display: inline-block;
と記載されていました。
これによって並列表記ができている、つまりここを変えれば直列表記になる。
詳細は、こちらを見ていただきたく。
と、いうわけで、デザイン→カスタマイズ→デザインCSSで
display:block
と上書き。
これによって、直列表示にすることができました。
ただ、これだけだと結構な数のカテゴリが延々と連なっていて、かえって見辛い状態に。
カテゴリを親子ごとにまとめたい!
親と子が離れ離れなんて嫌だ!
転勤は制度疲労を起こし単身赴任は色々な局面で家庭内不和を誘発する。
家族が一つ所で暮らすことの素晴らしさたるや!
成人してるなら速やかに独立してほしくはあるが。
人の話ではなくデザインの話でした。
はてなのサイドバーデザインで、カテゴリモジュールじゃなくてHTMLモジュールを使って擬似的に親子カテゴリを表示する、というのがネットで多く見つかったのですが、それだと各カテゴリにいくつ記事が含まれているのかわからないのが難点。
できれば、カテゴリごとに記事が何件あるかを表示したいし自動更新もしてほしい。
また、親子関係にあるカテゴリもしっかりわかるようにしたい。
これらを叶える技術力は、私には、ない。
頭がないときは外部記憶。これ、ちょっと前の記事でも書いた。
(頭がないなりに頑張った際の記事はこちら)
早速Googleで検索してみたのですが、検索してもなかなか解決策が出てこず、割と困りました。
みんな、サイドバーの表示に困っていないのかな。
親子ごとにまとめる方法、見つかる
その後も2,3日時間を見つけては検索していたのですが、ついに発見しました。
こちらの記事で紹介されていた通りにコードを貼り付けたらきれいにできました。
しかもはてなブログデフォルトのパンくずリストも子カテゴリまで表記に変わった!
技術力ある人ってすごい!
まとまったカテゴリをアーカイブ化したい
これだけでもすごいのですが、個人的には月別アーカイブみたいにまとめたいな、と思っていました。
その解決策も見つかりました。
同じ方のブログでした!
技術力すごすぎ!
サイドバーのリニューアル完了
そんなこんなで、技術力のすごい方のお力をお借りして無事サイドバーのリニューアルを完了しました。
また、こうやって▲のボタンでひとまとめにすることをアーカイブ化と表現すればよかったことも知ることもできました。
この場を借りてお礼申し上げます。
ありがとうございました!
IT系の方々は作ったものをオープンコードとして公開しているのを良く見るのですが、技術を独占することなく世に貢献するべく公開していて素晴らしいなぁと思います。
私自身、特許屋なので馴染みのない文化ですが、ただ素敵だと思います。