webサイトを制作する際、CSSを利用し微調整することはよくあることだと思います。
先日、「こんな便利な使い方があったのだ!」と目から鱗が落ちましたので、その便利な使い方をまとめました。
STEP
ピンポイントでソースを開く。
ブラウザ(今回はChrome)で編集したいところの上で右クリック
「①の背景色を青に変更したい場合(例:このサイトのトップページ)」
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-1.png)
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-2.png)
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-4.png)
上の場合は、
.smb-step__item__number {
}
の部分です。
STEP
ソースを編集し、変更が反映されるようにする。
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-5.png)
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-6.png)
今回の場合は、「背景色:青」を記入
左側の画面で変更が反映される。
されない場合は、後ろに「!important」をさらに追記
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-10.png)
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-8.png)
STEP
ソースが反映されるよう、CSSに追記する。
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-11.png)
CSSに追記する
- style.cssなど、自分が使っているCSSファイルに貼り付け、保存、FTPソフトで転送。
- WordPressの「カスタマイザー」を利用の場合、「カスタマイズ」「追加CSS」に貼り付け、「公開」or「更新」
STEP
最初のソースの画面に戻る。
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-12.png)
![](https://www.riceriver.com/rr_2024/app/wp-content/uploads/2021/07/image-13.png)