カテゴリーをスッキリさせたい！
タグ風にしたい！
PV数も上げたい‥！！
との思いから、サイドバーにあるカテゴリー欄をタグ風にカスタマイズしてみました！
このように、サイドバーのカテゴリー欄がスッキリしました(^^)
- カスタマイズの注意事項
- はてなブログのサイドバーのカテゴリーをまずは階層化する
- はてなブログのサイドバーのカテゴリーをタグ風にしてみた
- 終わりに：はてなブログのサイドバーのカテゴリーを階層化＆タグ風にカスタマイズしてみた！
カスタマイズの注意事項
- 当ブログは、はてなブログ、テーマは、Palette （パレット）を使用しています。
- テーマによっては、異なってしまう場合があるのでご注意ください。
- 元々あったCSSデータなどを破棄してしまうような展開にならないよう、くれぐれもご注意ください。
はてなブログのサイドバーのカテゴリーをまずは階層化する
サイドバーのカテゴリーを階層化したのは結構前で、別記事で紹介させていただいていました。
カテゴリー欄の【▶︎】を押すと、子カテゴリーが展開されるようになりました！
サイドバーのカテゴリーの「▶︎」をクリックすると上記のように子カテゴリーが見えるようになりました。
階層化を参考にさせていただいたのはこちらのサイトです。
▶ 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ (wackwack.net)
当ブログは、趣味化のブログ（ようは雑記？！）なので、徐々にカテゴリーが増えてしまったので、改めてカテゴリーを見直しました。
はてなブログのサイドバーのカテゴリーをタグ風にしてみた
カテゴリーをタグ風にするのに参考にさせていただいたのはこちらのサイトです。
▶はてなブログのカテゴリーをCSSでタグっぽくしてみた - 脱サラしてハンドメイド作家になりました (hatenablog.com)
.hatena-module {
clear: both;
overflow: hidden;
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
}
/* category css */
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
float: left;
list-style-type: none;
margin: 0 2px 2px;
padding: 7px;
background-color: #ff99cc;
text-decoration: none;
border-radius: 10px 10px 10px 10px
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #fff;
}
こちらのタグをコピーして、デザイン設定➩カスタマイズ➩デザインCSSに入れます。
すると、このようになりました。
「▶︎」の色が気になるので、背景色・文字色を変更してみても「▶︎」はそのままの色でした(^_^;)
背景色を変更する場合は、上記サイトのこちらの部分
background-color: #ff99cc;
「#ff99cc」の箇所を変更します。
文字色を変更する場合は、上記サイトの下段部分の
color: #fff;
「#fff」の箇所を変更します。
色彩選び、色彩のカラーコードはこちらのサイトで選べます。
▶WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)
結局、デザインテーマと、「▶︎」にしっくりしたのは、超絶シンプルに
- 背景色が白（#fff）
- 文字色は黒（#1a1a1a ）真っ黒ではない
でした。
このような感じで、シンプル＆スッキリしたタグ風のカテゴリーになりました！
タグ風にする前と比べてみると、スクロールしなくてもカテゴリーが分かるようになりました。
「▶︎」をクリックして子カテゴリーを開いてみると、このようになりました。
あと、ブログを始める前の以前の私は、「▶︎」ってなんだろ？と思ってスルーしてしまっていた経験がありました。
もしかしたら、ブログ内の周遊率（PV数）の増減に繋がるかもしれません。多分‥。
なので『カテゴリーの中にまだカテゴリーがあることを気がついてもらい』と思って、『▶︎おすと詳細がでます』と追記しました(^_^;)
追記場所は、デザイン➩カスタマイズ➩サイドバー➩カテゴリー➩タイトルに追記しました。
終わりに：はてなブログのサイドバーのカテゴリーを階層化＆タグ風にカスタマイズしてみた！
ブログを始めてもう少しで2年が経とうとしているのですが、WEBデザインに関してド素人のままです。。
素敵なテーマデザインや、カスタマイズを教えてくださっているブロガーさん達に感謝しています(^O^)
以上！
はてなブログのサイドバーのカテゴリーを階層化＆タグ風にカスタマイズしてみた！でした✧⁎
最後までご覧いただきありがとうございました！