【はてなブログ】カテゴリーの階層化とリンク色（文字色）を変えるCSS

 

思い描いているブログに近づけるため＆カテゴリーが増えてきて目的のものを探すのが大変になってきたのでカテゴリーの階層化を実装してみました！

階層化は無事できたものの、黒からブログに合わせた文字色にしたくCSSを追加しました

参考にさせて頂いたものはスマートですが、CSS初心者がクロムの検証を使って組み立てたものがあるのでスマートなやり方ではないと思いますがご参考になると幸いです

CSSを追加するときは念のためバックアップをしてから追加してくださいね

はてなブログのカテゴリー階層化を実装させる

階層化させるために実装させていただいたのが小さな星がほらひとつの作者様。

すぐ下にリンクを載せさせていただきました

手順通りやっていけば階層化できます

たくさんの方が階層化の記事を書いているのでここでははしょります（笑）

ポイントは

• パンくずリストの有効化すること
• カテゴリーをアルファベット順にすること
• ○○-△△の「-」は半角にすること

この３点に気を付けて実装していきましょう 

まずは実装に行ってらっしゃいませ！！

色を変えたかったらまた戻ってきてください！

お待ちしております♪ 

blog.wackwack.net

階層化のリンク色（文字色）を変える 

おかえりなさい～！！

さて、文字色（リンク色）を変えていきます

当ブログのサイドのリンク色は茶系ですが階層化を実装させると黒になってしまいました

なんとか同じ色に揃えたい！！

そのＣＳＳがこちら☟

デザイン→カスタマイズ→デザインCSSに追記してください

　※念のためバックアップを取ってからにしましょう

/*サイドカテゴリ　リンク文字色変更*/
.hatena-urllist li a {
color: #916d52!important;
}

#〇〇〇〇〇〇を変えて色をそろえてね

これで黒から変えることができました！

はてなブログのサイドバーのリンク色を変更する - 幸せ落ちてた拾った咲いた

リンク色は変わったものの▶の色は記事本文の文字色と同じです

当ブログはサイドが茶系なのでこの▶の黒がなんとなく違和感が…

そこで次に▶の色を変えていきます

階層化の▲色を変える

ここの部分はchromeの検証を見ながらＣＳＳど素人がカスタムしたものなのでスマートではないかもしれません

ＣＳＳはこちら☟

デザイン→カスタマイズ→デザインCSSに追記してください

　※念のためバックアップを取ってからにしましょう

/*カテゴリ三角色変更*/
.hatena-module.hatena-module-category {
    color: #948572;
}

こっちも#〇〇〇〇〇〇を変えて色をそろえてね

追記すると色が変わってくれました

今回はカテゴリー欄のバックカラー色にしてみました

色が揃ったことで違和感がなくなりましたね！

今後また色を変えるかもしれませんがしばらくはこのままでいこうと思います

カテゴリーの階層化をするのなら早めがいい

当ブログが特化ではなく雑記ブログなのでどうしてもこれからカテゴリーが増えがちになると予想。

• ブログをすっきりさせたい 

• 特定の記事を見つけるのがめんどくさい 

• なによりスマートではない！

という理由でカテゴリーの階層化をさせました

なぜ階層化するのが早めがいいかというと…

まだ６４記事という少なさですら子カテ分けに時間がかかっているから！

今後カテゴリーが増えそうだと思うのなら声を大にして言いたい。

＿人人人人人人人人人人人人人人＿
＞　少ないうちにやるべき！！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

今回はカテゴリーの階層化とその色を変えるＣＳＳカスタマイズでした

次回は何をカスタマイズしようかな～