yunico's fluffy life

横着主婦の暮らしの詰め合わせ

当ブログにはPR広告を利用した記事があります

【はてなブログ】1つしか表示されないカテゴリを全て表示させる方法

ブログをカスタマイズする時、選んだブログテーマによってはカテゴリを複数選んでも、表示されるカテゴリは1つだけに設定されていることがあります。

【表示されるカテゴリを1つだけにする方法】は調べると出てきたのですが
その逆の【1つしか表示されないカテゴリを複数表示させる方法】は見つけられなかったので覚書として記載しておこうと思います。

カテゴリを複数表示させる方法を探している方がいましたら参考にしてください😊

色々と補足を書いています。
お急ぎでしたら目次から特定の場所に飛んでコードを見てくださいね。




このブログでも利用させてもらっているデザインテーマColor Bookで、カテゴリを3つ選択した記事を投稿した場合

PC/タブレットで見た時

スマホで見た時

これをスマホで見たときも、全てのカテゴリが表示されるようにします!



 

1つしか表示されないカテゴリを複数表示させる方法

CSSコードの使い方

パソコンから、はてなブログのダッシュボードへアクセスする。(ブラウザをPC表示にすることでスマホでも可能です。/すごく細かい作業になりますが😖💦)
左側にある【デザイン】ページに移動する。
🔧カスタマイズ→{}デザインCSSに、下に記載されているコードを貼り付け→【変更を保存する】ボタンを押して完了です。

不明な点がある場合はヘルプページも一度ご覧下さい。
デザインCSSを記述する - はてなブログ ヘルプ

CSSコードをいじる前にバックアップを取っておくと安心ですよ。
(元々のコードをコピーしてメモ帳などに貼り付けておく)



 

投稿した記事内に反映させるコード

/* 記事内のカテゴリを全て表示 */
.entry-categories a:nth-child(n+2) {
   display: inline-block;
   }

スマホで見た時

 

トップページの記事一覧に反映させるコード

/* トップページ記事一覧のカテゴリを全て表示 */
.page-index .categories a:nth-child(n+2) {
   display: inline-block;
   }

スマホで見た時



 

カテゴリー別の記事一覧に反映させるコード

/* カテゴリー別記事一覧のカテゴリを全て表示 */
.page-archive-category .categories a:nth-child(n+2) {
   display: inline-block;
   }

スマホで見た時


以上です!
これで1つしか表示されないカテゴリを複数表示させることができます。
参考になれば嬉しいです。

ブログにこのようなことを書くのは初めてなので、わかりにくい点がありましたらすみません。

ご不明な点がありましたらお気軽にコメントください。わかる範囲にはなりますが、一生懸命✊🏻回答させてもらいます( ・`ω・´)✨

お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍