【はてなブログ】カテゴリー毎にラベルの色を変える設定方法【コピペで簡単！】 - わたしたちのかんがえたさいきょうのけっこんしき！

カテゴリー毎にラベルの色を変えたい・・・
こんにちは。
わたこんのブログ管理を担当している方、新郎です。

今回は結婚式とは関係ないのですが、私がブログをカスタマイズしていく上で困ったことを備忘録としてまとめた記事です。
同じ悩みに直面しているブロガーさんの助けになれば嬉しいです。

簡単！カテゴリー別にタグの色を変更する設定

今回解説するのは、記事上部に表示されているカテゴリーラベル*1の背景色を、カテゴリー毎に別の色にする設定方法です。
僕のブログでいうと「新郎Side」「結婚式準備」みたいなやつですね。
「新郎Side」は水色、「新婦Side」はピンク、その他はオレンジに設定しています。
このように、特定のカテゴリーだけ色を設定する方法はちょっとググっただけでは見つからなかったので、自分なりに試行錯誤してたどり着いた方法をここに記しておきます。

前提条件

まずは前提条件として、私のブログの情報を記します。
同じ条件の人はコピペするだけでOKですが、そうでない人にも参考になるかと思います。

はてなブログ（無料版）を使用している

テーマは「Minimalism」を使用している

当ブログ『わたこん！』をブックマークしている*2

実際の設定（コピペOK!）

設定はとっても簡単です。
手を加えるのはたったの一箇所！
ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS

ここです。

ここに、このコードをペタペタとコピペ*3してください。

/* カテゴリー毎に色を変える */
.entry-category-link{
  border-radius: 5px !important;  /* 枠の角の丸さを指定 */
  padding: 2px 7px !important;    /* 枠の大きさを指定 */
  background: #ffebcd;            /* デフォルトの色を指定  "#ffebcd"を好きな色に変更 */
}
.entry-category-link.category-新婦Side{  /* "新婦Side"を色を変えたいカテゴリー名に変更 */
  background: pink;                     /* "pink"を好きな色に変更  */
}
.entry-category-link.category-新郎Side{  /* "新郎Side"を色を変えたいカテゴリー名に変更 */
  background: lightcyan;                /* "lightcyan"を好きな色に変更 */
}