moti.life

日々のたのしいを探すもちらいふ

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

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」で自動生成されるカラーパレットはボタンっぽいデザインになっていて、

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

 

関連記事