頑張りたくないからガンバル

頑張りたくないことは頑張らないで、頑張りたいと思えることをガンバル

CSSをいじくってカテゴリーを見やすくしてみた(非階層化)

階層化をしたわけではなく、CSSをいじくってフォントや表示位置を変更して見やすくしてみました。

ちょっと見やすくなりました

Before

まだ記事数がそんなに多くないのにごちゃっとしてますね

f:id:ti--ko:20160807030448j:plain

After

大カテゴリーだけちょっと左にずらして、文字を大きくして、1行全部使わせてみました

f:id:ti--ko:20160807030727j:plain

ちょっと見やすくなったと思いませんか?

これでこれから記事数が多くなっても少しは探しやすいかな?と。

方法

参考にさせてもらったのははぴらきさん!

この記事を参考にしつつ、自分なりにアレンジしました。

はてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法 - はぴらき合理化幻想

 

以下はchrome&はてなブログで私が実際にやった方法なので、他ブラウザに関しては分かりません!

ではいってみよう!

はぴらきさんのブログを参考にカテゴリーのURLを確認する

自分のブログのトップページを表示

Ctrl+Uでページのソースを表示

Ctrl+Fで「hatena-module hatena-module-category」を検索

f:id:ti--ko:20160807041805j:plain

 

オレンジのところに注目!

f:id:ti--ko:20160807042152j:plain

デザイン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こずつ地道にやっていきます。

 

見やすくなって嬉しい

記事数が多くなっていけばこの効果が出てくるかなと。

本音は、こんなことしなくてもはてなさんの方でカテゴリーの階層化をできるようにお願いしたい・・・