JINカスタマイズ

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

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

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

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

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

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

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

【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マウスホバー(マウスを置いた)したときの色を指定します。
  • #aaaには、お好みのカラーコードを入れてください。
  • タグクラウドにあるタグは、+文字で構成されています。(←コレは、JINオリジナルアイコンのひとつです。)
  • 透明度のある色を使いたい場合は、rgba(***, ***, ***, ***)を使って下さい。

フッターのタグクラウドの色を変える変えることができました‼

編集後記

コードが長くて少し分かりにくいですが、お好みで色をアレンジして下さい。

【WordPress】【JIN】パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズ【WordPress】【JIN】パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズをご紹介します。...
【WordPress】【JIN】フッターのアーカイブの表記を非表示にする方法【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのアーカイブの表記を非表示にする方法をご紹介します。...
【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ