WordPressウィジェットの文字のサイズや色を変更する方法

カッテネをアレンジしたコードをウィジェット「カスタムHTML」に書いたら文字が小さかったので CSS で調整しました。

クラス名をGoogleChromeデベロッパーツールで検証

ウィジェットを表示できるページを開いたら、右上にある設定マーク→その他のツール→「デベロッパーツール」をクリック。

中央付近にある矢印をクリックしたら、変更したい箇所をマウスでカーソルをあてて選択します。

この場合のクラス名は「custom-html-widget」であることが分かります。

スタイルシート (style.css)にコードを追記

CSSの記述場所

文字の大きさを変更したい場合の例。

.custom-html-widget{
font-size:1rem;
}

モバイルで変更したい場合の例。

@media screen and (max-width:480px){
.custom-html-widget{
font-size:1.4rem;}
}

文字の色を変更したい場合の例。

.custom-html-widget{
color:red;
}

リンクの文字の大きさや色を変更したい場合の例。

.custom-html-widget a{
font-size:1rem;
color:red;
}