【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

【はてなブログ】サイドバーの「カテゴリ」をタグ風にする方法

悩み人

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

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

どうも、ブログ運営者のポチ(@sunrise_033)です。

この記事では、はてなブログのサイドバーのカテゴリをタグ風にする方法を画像付きで解説していきたいと思います。

カテゴリを見やすくすることによって、読者にとってサイトが発信していることは何か分かりやすくなります。

ユーザーファーストを意識したサイトはPVも増加する傾向にあるので積極的に取り入れていきましょう。

テーマによっては少し調整も必要な場合もあったので、その対処も含めて見ていきます。

この記事はこんな人におすすめ
  • はてなブログテーマ「Under Shirt」を使用している
  • カテゴリをタグ風にしたい
この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

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

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

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

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

f:id:sanrisesansan:20200821172649j:plain

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

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

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

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

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

love-world.hatenablog.jp

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

下記に私が実際に貼り付けたコードを貼っておきますので参考にしてみてください。(コピペしてもOKです)

/* カテゴリーをタグ風に */
.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: #696969; /* 背景色 */
text-decoration: none;
border-radius: 10px 10px 10px 10px
}
.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
color: #fff; /* 文字色 */
}

貼る場所は管理画面→デザイン→カスタマイズ→デザイン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;
}</blockquote>

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

f:id:sanrisesansan:20200821170040j:plain

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

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

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

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ 【PR】サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメント一覧 (6件)

ブログを始めたい人から、ビギナークラスに向けたブログ戦略全集 | トレンド情報まとめサイト へ返信する コメントをキャンセル

目次