SWELLのタグクラウドのタグの色をカスタマイズする方法

WordPressテーマ「SWELL」でフッターウィジェット等に「よく使われるタグリンク集」を設置したけど、デフォルトの配色が好みじゃないので自分の好きな色にカスタマイズしたいという方向けに、タグリンクの背景色と文字色を変更する方法をご紹介。

記事内で紹介するCSSコードのカラーコード部分をご自身のサイトの色味に合ったものに変更して色々試してみていただけると幸いです。

タグリンクのデフォルトのデザイン

上がデフォルトのタグリンクの配色です。文字は黒、背景色は薄いグレーといった感じ。

当サイトのフッターウィジェットの背景色はご覧の通り淡い黄色なので、初期状態のタグリンクの色のままにしておくと見づらいかなと思います。

タグリンクの色をカスタマイズするCSS

結論。以下のコードを使ってタグリンクの色をカスタマイズ可能です。

.tag-cloud-link {
	background: #FF9494;/*背景色*/
	color: #fff!important;/*文字色*/
}

こちらの手順でやってみましょう。

1. 「外観」＞「カスタマイズ」＞「追加CSS」を選択
2. 先程紹介したコードをコピペする（色はご自身のセンスで調整してね）
3. 「公開」をクリックして色変更完了！

カスタマイズしたタグリンク例

当サイトでは素敵な配色がたくさん見つかるサイト「Color Hunt」でビビッと来た上のピンク色を採用しました。

あなたも色々な色を試して最もしっくり来る配色にたどり着きましょう！