そんな疑問にお答えします。
今回は、はてなブログのサイドバーのカテゴリをタグ風にする方法をご紹介します。
といっても、コピペするだけで簡単にできます。しかし、テーマによっては少し調整も必要な場合もあったので、その対処も含めて見ていきたいと思います。
・はてなブログテーマ「Under Shirt」を使用している
・カテゴリをタグ風にしたい
カテゴリがボックス風にしてみた
現在は、はてなブログテーマ「Under Shirt」を使用しています。
このテーマはカスタマイズしやすく、シンプルでトップメニューの記事一覧をカード型にすることができるの気に入っています。
その中でもカテゴリ部分はシンプルな形式になっています。
このように縦に設定されています。
このままでも良いのですが、ボックス風にできないかなと思い調べてみると、いくつか方法が出てきました。
なので、このカテゴリをボックス風のデザインにしてみることにしました。
ボックス風にデザインにする方法
それではさっそく、ボックス風のデザインにしていきたいと思います。参考にしたサイトはこちらになります。
このサイトさまのCSSデザインコードを貼りつければ完了です。
貼る場所は管理画面→デザイン→カスタマイズ→デザインCSSになります。
で、実際にやってみるとこのようになります。
良い感じにタグ風になりました。色の変更もできますので、下記の記事を参考にしてください。
カテゴリ内の「矢印」が気になる場合の対処
「Under Shirt」の場合は、カテゴリの前に「矢印マーク」があるのですが、これを削除することができます。
僕は、気になったので削除する方法をいろいろと調べサイト載ってみましたが、に対処が載っていませんでした。
なので、はてなブログテーマ「Under Shirt」の作成者の「ろくぜうどん（@rokuzeudon）」さんに直接お聞きしました。
で、教えていただいたコードがこちらです。
.hatena-module-category a {
padding: 0;
}
.hatena-module-category a::before {
display: none;
}</blockquote>これをデザインCSSに貼り付けると矢印マークが消えました。
タグ風にカスタマイズした場合、カテゴリの階層化をすると、文字部分に矢印が重ってしまうので、その時にも活用できます。
まとめ
カテゴリをタグ風にカスタマイズする方法を紹介しました。
コードを貼り付けるだけなので、初心者の方でもすぐにできると思います。
最後まで読んでいただき、ありがとうございます。
↓「ブログ村ランキング」参加中！
