ブログで使える“超簡単にcssの色を変える”方法

新年あけましておめでとうございます!

2020年もよろしくおねがいいたします。

新年いろいろと決意を新たにしました。

今年はブログを頑張ってやっていきたいな、なんて気持ちが強いです。

そこで

1時間くらいでかける小ネタでTwitterに投稿しよう

と決意しまして、ブログカスタマイズするときに簡単にcssの色調整ができるTipを投稿してみます!

たぶん1分くらいで読めます。

ブラウザ上で簡単に色を変更できる方法

まずはPCのwebブラウザで自分のブログを開きましょう。

今回はGoogleChromeを使用していきます。

まずはブラウザ上で右クリックします。

右クリックしたらこのような画面になるので「検証」を選びます

そうすると画面下にこんな画面がでてきます。

赤丸をつけた部分がパーツを選択するツールになりますので、ここをクリックします。

赤丸の選択ツールをクリックしたら、次に色を変更したいパーツをクリックします。

↓こんな感じになると選択完了です。

選択が完了したら、右下の部分を確認します。

赤丸の部分に現在のパーツの色が見えると思います。

この矢印の先の部分をクリックすると…

カラーピッカーが登場します!!

ここをいろいろいじっていろを変えると

こんなかんじ。

そうすると……

webブラウザ上のパーツの色が代わり、cssコードが右下に表示されます

現在のデザインだと、吹き出しの三角の部分も色がついているので、このパーツに対しても同じ処理を繰り返します。

最後に変更した部分のcssを抜き出して

.article h2 {
    background: #e500f2;
}
.article h2:after {
    border-top: 15px solid #e500f2;
}

お使いのブログサービスのcssに貼り付けて完了です。

貼り付けたけれど色が変わらない

「cssを貼り付けたけど色が変わらない」という場合ですが。

cssにはルールがあり“より後に書いたコード”が強くなるルールがあります。

(厳密にいうと、もっと細かく厳格なルールもあるのですが、ここでは割愛します)

なので

  • ブログサービスで用意されているカスタマイズ用のエリアに書く
  • できるだけファイルの最後のほうにcssを書く
  • それでもだめなら!importantハックを使う

という順番で試してみてください。

.article h2 {
    background: #e500f2 !important;
}

!important;ハックを多用すると、管理が難しくなるので、あまり多用しないようにするのがベストです!

いかがでしたでしょうか。

1時間の突貫で書いたのでわかりにくかったらすみません。

2020年も、皆様のブログライフがステキなものでありますように!!

ブログ運営
ぴよこ

Webデザイナーとして働くワーママのブログです。
子育て情報やお得情報、ブログの運営方法(主にグーグルアドセンスの運営術)などについてゆるっと書いていきます。

ぴよこをフォローする
ぴよこをフォローする
Web屋のワーママ・ぴよこの雑多なブログ

コメント

タイトルとURLをコピーしました