メモブログ

アニメ・ゲーム・漫画の感想や情報など

[はてなブログ]サイドバーのカテゴリーをタグ風にカスタマイズしました


アフィリエイト広告を利用しています。

f:id:motimoti444:20200624115013p:plain

 

 

今までのカテゴリー

 f:id:motimoti444:20200624114323p:plain

カテゴリーはデザインを一度もいじっていないので

UnderShirt」の初期のデザインのままでした。

上から1列になっていて、ブログサイトによくあるシンプルなデザインです。

カテゴリーをタグ風にカスタマイズする方法

CSSにコピペする

love-world.hatenablog.jp

こちらのサイト様からコピペさせていただきました。

ありがとうございました。

 

こちらのサイト様の赤い部分を好きな色のカラーコードに書き換えて、

CSSに貼り付けましょう。

タグの背景の色と、文字の色が変更できます。

カスタマイズ後

f:id:motimoti444:20200624114433p:plain

カスタマイズ後はこんな感じになりました。

タグ風になってすっきりとまとまりました。

カテゴリーが縦に1つずつだと味気がないなとか、幅を取ってしまうなと思っていたので、カスタマイズ出来て良かったです。

色が決まらない時は

色が決められないという方はカラーパレットサイトを参考にしてみるといいかもしれません。

「Color Kitty」

colorkitty.com

画像をアップロードするとカラーパレットを作成できるサイトです。

自分で撮影した写真や、フリー素材の写真などをアップロードして使うといいと思います。

「Leonardo」

leonardocolor.io

「Leonardo」で自動生成されるカラーパレットはボタンっぽいデザインになっていて、

今回のタグ風のデザインに生かせそうです。