さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【はてなブログ】簡単カスタマイズ、カテゴリをタグ風にする方法

f:id:sanrisesansan:20200821190005p:plain

はてなブログでカテゴリの見た目を、ボックス風にしたい!どのような方法があるのか知りたい!

そんな疑問にお答えします。

今回は、はてなブログのサイドバーのカテゴリをタグ風にする方法をご紹介します。

といっても、コピペするだけで簡単にできます。しかし、テーマによっては少し調整も必要な場合もあったので、その対処も含めて見ていきたいと思います。

 

こんな人におすすめ!

はてなブログテーマ「Under Shirt」を使用している

・カテゴリをタグ風にしたい

 


スポンサードリンク
 

カテゴリがボックス風にしてみた

現在は、はてなブログテーマ「Under Shirt」を使用しています。

このテーマはカスタマイズしやすく、シンプルでトップメニューの記事一覧をカード型にすることができるの気に入っています。

その中でもカテゴリ部分はシンプルな形式になっています。

f:id:sanrisesansan:20200821172649j:plain



このように縦に設定されています。

このままでも良いのですが、ボックス風にできないかなと思い調べてみると、いくつか方法が出てきました。

なので、このカテゴリをボックス風のデザインにしてみることにしました。

ボックス風にデザインにする方法

それではさっそく、ボックス風のデザインにしていきたいと思います。参考にしたサイトはこちらになります。

 

love-world.hatenablog.jp


このサイトさまのCSSデザインコードを貼りつければ完了です。

貼る場所は管理画面→デザイン→カスタマイズ→デザインCSSになります。

f:id:sanrisesansan:20200820162938j:plain

 

で、実際にやってみるとこのようになります。

 

f:id:sanrisesansan:20200821170037j:plain



良い感じにタグ風になりました。色の変更もできますので、下記の記事を参考にしてください。

www.colordic.org

 

カテゴリ内の「矢印」が気になる場合の対処

「Under Shirt」の場合は、カテゴリの前に「矢印マーク」があるのですが、これを削除することができます。

僕は、気になったので削除する方法をいろいろと調べサイト載ってみましたが、に対処が載っていませんでした。

なので、はてなブログテーマ「Under Shirt」の作成者の「ろくぜうどん(@rokuzeudon)」さんに直接お聞きしました。

ろくぜうどんさん、ありがとうございました!

で、教えていただいたコードがこちらです。

.hatena-module-category a {
padding: 0;
}
.hatena-module-category a::before {
display: none;
}

これをデザインCSSに貼り付けると矢印マークが消えました。

 

f:id:sanrisesansan:20200821170040j:plain

タグ風にカスタマイズした場合、カテゴリの階層化をすると、文字部分に矢印が重ってしまうので、その時にも活用できます。

カテゴリの階層化についてはこちらの記事で説明しています。 

www.sunrise033.com

まとめ

カテゴリをタグ風にカスタマイズする方法を紹介しました。

コードを貼り付けるだけなので、初心者の方でもすぐにできると思います。

最後まで読んでいただき、ありがとうございます。

合わせて読みたいカスタマイズ記事を紹介しています! 

合わせて読みたい

www.sunrise033.com

 

この記事が良いと思ったらポチッ!をしていだだけると嬉しいです!

 ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村