【WordPress】【JIN】フッターのタグクラウドの色を変えるCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、フッターのタグクラウドの色を変えるCSSカスタマイズをご紹介します。

WordPress有料テーマ【JIN】を使っている方向けの記事です。

タグクラウドの説明とフッターに設置する方法
フッターのタグクラウドの色を変えるCSSカスタマイズ
- コード
- 説明
編集後記

タグクラウドの説明とフッターに設置する方法

タグクラウドをフッターに表示するためには、まずタグクラウドのウィジェットをフッターに設置する必要があります。

タグクラウドの説明やフッターに設置する方法は、下記の記事を参考にしてください。

【WordPress】【JIN】タグクラウドって何？どういう順番で何個表示されるのか？【WordPress】【JIN】タグクラウドって何？どういう順番で何個表示されるのか？についてご紹介します。...

フッターのタグクラウドの色を変えるCSSカスタマイズ

では、CSSにコードを追加して、フッターのタグクラウドをカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---フッターのタグクラウド---*/
/*文字と背景*/
#footer-widget-box .tagcloud a {
color: #aaa !important;/*文字色*/
background-color: #aaa;/*背景色*/
}
#footer-widget-box .tagcloud a:hover {
color: #aaa !important;/*ホバー時の文字色*/
background-color: #aaa !important;/*ホバー時の背景色*/
}
/*文字と背景*/
/*記号*/
#footer-widget-box .tagcloud a:before {
color: #aaa !important;/*色*/
}
#footer-widget-box .tagcloud a:hover::before {
color: #aaa !important;/*ホバー時の色*/
}
/*記号*/
/*---フッターのタグクラウド---*/

/*　*/　で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

#footer-widget-box .tagcloud a {
color: #aaa !important;
background-color: #aaa;
}
#footer-widget-box .tagcloud a:hover {
color: #aaa !important;
background-color: #aaa !important;
}
#footer-widget-box .tagcloud a:before {
color: #aaa !important;
}
#footer-widget-box .tagcloud a:hover::before {
color: #aaa !important;
}

説明

/*文字色と背景色*/

#footer-widget-box .tagcloud a	文字色と背景色を指定します。
#footer-widget-box .tagcloud a:hover	マウスホバー（マウスを置いた）したときの文字色と背景色を指定します。

/*記号*/

←コレの色を指定します。

#footer-widget-box .tagcloud a:before	色を指定します。
#footer-widget-box .tagcloud a:hover::before	マウスホバー（マウスを置いた）したときの色を指定します。