隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

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

f:id:Sakuranbox:20200731213901j:plain 

 

 

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

 

 

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

 

 

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

 

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

 

 

 

 

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

 

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

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

 

 

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

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

 

 

ポイントは

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

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

 

 

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

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

お待ちしております♪ 

 

 

 

 

階層化のリンク色(文字色)を変える 

 

おかえりなさい~!!

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

 

 

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

 

f:id:Sakuranbox:20200731210802j:plain



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

 

 

そのCSSがこちら☟

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

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

 

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

 

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

 

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

 

f:id:Sakuranbox:20200731210757j:plain



 

 

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

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

 

 

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

 

 

 

階層化の▲色を変える

 

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

 

 

CSSはこちら☟

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

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

 

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

 

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

 

 

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

 

f:id:Sakuranbox:20200731211208j:plain




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

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

 

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

 

 

 

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

 

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

 

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

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

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

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

 

 

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

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

 

 

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

 

_人人人人人人人人人人人人人人_
> 少ないうちにやるべき!! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

 

 

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

 

 

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