階層化をしたわけではなく、CSSをいじくってフォントや表示位置を変更して見やすくしてみました。
カテゴリーを見やすくしてみた。似非階層化!
— ちこ@ミニマリストな投資家 (@ti__ko__) 2016年8月6日
ちょっと見やすくなりました
Before
まだ記事数がそんなに多くないのにごちゃっとしてますね
After
大カテゴリーだけちょっと左にずらして、文字を大きくして、1行全部使わせてみました
ちょっと見やすくなったと思いませんか?
これでこれから記事数が多くなっても少しは探しやすいかな?と。
方法
参考にさせてもらったのははぴらきさん!
この記事を参考にしつつ、自分なりにアレンジしました。
はてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法 - はぴらき合理化幻想
以下はchrome&はてなブログで私が実際にやった方法なので、他ブラウザに関しては分かりません!
ではいってみよう!
はぴらきさんのブログを参考にカテゴリーのURLを確認する
自分のブログのトップページを表示
Ctrl+Uでページのソースを表示
Ctrl+Fで「hatena-module hatena-module-category」を検索
オレンジのところに注目!
デザインCSSをいじる
管理画面から、デザイン→カスタマイズ→でざいんCSSに以下を記入する
*/何を変更したかのメモ(なくても良い)*/
.hatena-module-category a[href*="オレンジのことろをコピペ"]{
font-size:16px; →文字の大きさ
font-weight:bold; →文字の太さ
margin-left:-15px; →左の余白を15px減らす
margin-right:100%; →右の余白を100%にすることで1行使わせる
}
青色のところは色々といじって自分ブログに合うようにしてみてください
そうするとこんな感じになります↓
/*ちこの独断と偏見*/
.hatena-module-category a[href*="category/%E3%81%A1%E3%81%93%E3%81%AE%E7%8B%AC%E6%96%AD%E3%81%A8%E5%81%8F%E8%A6%8B"]{
font-size:16px;
font-weight:bold;
margin-left:-15px;
margin-right:100%;
}
これを大カテゴリーにしたいやつに対して1こずつ地道にやっていきます。
見やすくなって嬉しい
記事数が多くなっていけばこの効果が出てくるかなと。
本音は、こんなことしなくてもはてなさんの方でカテゴリーの階層化をできるようにお願いしたい・・・