Gush2カスタマイズ カテゴリーとタグの色を変更する方法

記事内に広告が含まれています。

Gush2のデフォルトテーマでは、個別記事下にカテゴリーとタグが表示されています。

(タグのマークはカスタマイズにより入れました。→Gush2カスタマイズ カテゴリとタグを区別しやすくしてみた

gush2_category_tag_color

カテゴリーとタグの色を、h2タグやh3タグのカラーに合わせたかったので、カスタマイズしてみました。

Gush2テーマでカテゴリーとタグの色を変更する方法

カテゴリーとタグの色は、style.cssを編集する事で変更する事が出来ます。

style.cssの記述は以下になります。

/*--------------------------------------
  カテゴリー・タグ
--------------------------------------*/
#cat_tag {
	margin: 48px 0;
	padding: 0 0 12px 0;
	text-align: left;
	word-break: keep-all;
	line-height: 1em;
}

#cat_tag a {
	color: #666;
	background-color: #fff;
	margin: 0 0.2em 0.5em 0;
	padding: 0.5em;
	border-radius: 5px;
	text-decoration: none;
	line-height: 1em;
	display: inline-block;
	border: 1px solid #888;
}

#cat_tag a:hover {
	color: #ff7ddf;
}

これを、以下のように変更しました。

/*--------------------------------------
  カテゴリー・タグ
--------------------------------------*/
#cat_tag {
	margin: 48px 0;
	padding: 0 0 12px 0;
	text-align: left;
	word-break: keep-all;
	line-height: 1em;
}

#cat_tag a {
	color: #fff;
	background-color: #0D70EC;
	margin: 0 0.2em 0.5em 0;
	padding: 0.5em;
	border-radius: 5px;
	text-decoration: none;
	line-height: 1em;
	display: inline-block;
	border: 1px solid #0D70EC;
}

#cat_tag a:hover {
	color: #191970;
}

すると、プレビューは以下のようになりました。

gush2_category_tag_color

h2やh3などの色に合わせてカテゴリとタグの色も変更してみました。

関連記事

スポンサーリンク
スポンサーリンク

コメント