【Cocoon】カテゴリーラベルとタグラベルをカスタマイズする

カテゴリーラベルとタグラベル

WordPressテーマ Cocoonの「カテゴリーラベル」と「タグラベル」のカスタマイズについてまとめてみました。

テーマCocoonのカテゴリーラベルとタグラベル

WordPressテーマ Cocoonで使われている「カテゴリーラベル」と「タグラベル」は、次の様になっています。

非常にシンプルな「カテゴリーラベル」と「タグラベル」のデザインなので、これをもう少し丸みを帯びたデザインにしたいと思います。

カテゴリーラベルとタグラベルのカスタマイズ

今回のカスタマイズ内容は、「カテゴリーラベル」と「タグラベル」のデザインを、少し丸みを帯びたデザインにカスタマイズします。

カスタマイズ内容

「カテゴリーラベル」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ●カテゴリーラベルのカスタマイズ
************************************/
.cat-link{ /*カテゴリーラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 12px; /*フォントサイズ*/
  background-color: #fe619a; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.cat-link:hover{ /*カテゴリーラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #fff; /*フォントカラー*/
  background-color: #fe619a; /*背景色*/
}

「タグラベル」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ●タグラベルのカスタマイズ
************************************/
.tag-link{ /*タグラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 12px; /*フォントサイズ*/
  background-color: #fe619a; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.tag-link:hover{ /*タグラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #fff; /*フォントカラー*/
  background-color: #fe619a; /*背景色*/
}

カスタマイズ後のカテゴリーラベルとタグラベル

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「カテゴリーラベル」と「タグラベル」は、次のようになりました。

一般に多くのサイトで使われているラベルデザインです。

WordPressテーマ Cocoonの「カテゴリーラベル」と「タグラベル」ではそれぞれ違うカラーが設定されていましたが、今回は「カテゴリーラベル」「タグラベル」共に同じデザイン・カラーにしました。

これは好みに合わせて変更すると良いと思います。

自分の場合は、サイトに合わせて背景色にピンク、文字色に白の2色を使いました。

最後に

今回の「カテゴリーラベル」と「タグラベル」のカスタマイズによって、サイトにあったデザイン・カラーになりました。

また、丸みを帯びたデザインにしたことで、小さいながら目立つラベルです。

今のところ自分のサイトでは「タグラベル」は使っていませんが、「カテゴリーラベル」は重要な表示なのでカスタマイズは是非行うべきでしょう。