【初心者さん向け】Chromeのデベロッパーツールを使って自分でCSS修正!

子供のわかった! サーバ・ソフト

はじめに

この記事は、

・ブログ初心者の方
・CSSとかよくわからん
・でもかっこいい(かわいい)ブログを作りたい

といったゼイタクな悩みを抱える初心者ブロガーさん向けにお話ししていきます。

さて、ワードプレスの有料もしくは無料のテーマをインストールして有効化!

いよいよブログ公開~!!ってなるはずが、

・この部分の色変えたい~
・余白空きすぎ~
・表示が崩れちゃう

なんてこと、ありますよね。

どんなに優秀なテーマを導入したって、そこは人が作るものですからね。完璧はありません。

それにせっかくワードプレスでブログを運営するなら、多少のことなら

自分でなんとかしたい

ですよね。

そんな時に役立つのが

Google Chromeのデベロッパーツールです!

スポンサーリンク

Chromeのデベロッパーツールとは?

マーケティング的画面

デベロッパーツールは、

Webブラウザで動くアプリケーションの開発者用にGoogleが提供するChromeの拡張機能

です。

HTMLやCSSといったフロントのマークアップはもちろん、ネットワークやセキュリティーに関する問題を発見するのにすごく役立つ便利なツールです。

リス太
リス太

ようは機能がめっちゃ豊富なんですね。

じゃあ全部覚えにゃあかんのかいなって?

大丈夫です!

ほんの一部だけでOK。

それだけでも相当便利なんですよ~!

Chromeデベロッパーツールの使い方

かわいい女の子

使い方をわかりやすくイメージしてもらうためには、実際の例で見てみるといいですよね。

そんなわけで、リス太が奥さんのブログでやったCSS修正を例にとりましょう!

ご多聞に漏れず、奥さんのブログもCocoonで作ってます。

リス太
リス太

まぁ、もともとは違うテーマだったんですけど、結果はこれに落ち着いちゃったわけですね笑 まぁ、いいや。

で、スキンを女子向けにしたら、なんかね、、、

サイドバーの閉じるボタンがないじゃん!!!

ボタンがない!

ってなったわけです。

スキン側の問題なのか、もともとリス太が設定してたCSSの問題なのかはわかりませんが、とにかく閉じれないじゃん!ってなったわけです。

そんな時はもちろんこれですよね!

Chromeデベロッパーツールの出番です(大前提として、ブラウザはInternet ExproreやFirefoxじゃなくてGoogle Chromeを使いましょう!)

まずはお使いのPCのF12ボタンを押しましょう。
もしくは、右上の「…」が縦に並んでいる設定ボタンから「その他ツール→デベロッパーツール(D)」をクリックしてもいいですよ。

マウスを右クリックして「検証」でもいいです。

すると、右側もしくは下側になんやかやわーわー書いてある画面が表示されましたね。

リス太
リス太

なんだ。わーわーって…汗

これが、デベロッパーツールです。

デベロッパーツールのウィンドウ左上にある□に矢印アイコンがあるボタンをクリックします。

デベロッパーツールの修正ボタン

その状態で、本来閉じるボタンが存在しているであろう箇所にマウスオーバーすると、、、

おおっ!やっぱりホントは閉じるボタンあるんじゃ~ん!

ってことがわかるわけです。

閉じるボタンがホントはある場所をクリックすると、CSSがバ~ッと出てきます。

CSSの修正などについては、また別の記事で書こうと思いますが、今回はボタンが非表示なんじゃなくって、色が白だったから背景と同化して見えない状態になっちゃってたってことがわかるわけです。

だって、

「color: #fff;」

ってなってるでしょ??

カラーがFFF

これは、CSSのカラーコードってやつで、「#fff」は白色を意味します。

背景も白なんだから、そりゃ見えんわなってことですね。

今回は、サイト全体のバランス、他のテキストのカラーを考えて、「#555」に変更してみます。

ちなみにデベロッパーツール上でですよ。

カラーコードを修正

おお!閉じるボタンが現れました!!

ボタンが現れた

デベロッパーツールの便利なのは、ブラウザ上で簡易な修正をしたらその場で修正結果が確認できちゃうとこなんです。、

とはいえ、修正はこれで終わりじゃないっすよ。
あくまでもデベロッパーツール上で修正してみただけですからね。

リス太
リス太

ちゃんとCSSを修正したらホントに完了です。

修正したCSSの部分をコピーします。
デベロッパーツール上でコピーできますよ。
コードはコピーペースト
この部分ね!

.menu-close-button::before {
    color: #555;
}

これをそのまま、ワードプレスの管理画面で「外観→テーマの編集→スタイルシート(style.css)」と進み、一番下にでもペロッとペーストして更新したら完了です!

※作業前にバックアップはかならず取りましょうね!

それにしても、便利ですよね。
デベロッパーツールなら、閉じるボタンを赤にしてみたり、

閉じるボタンを赤くする

黄色にしてみたり、

閉じるボタンを赤くする

いろいろできちゃうわけです。
まぁ、しないけどね笑

F5ボタンを押してリロード(更新)したら、Webサイトの最新の状態に戻りますよ~。

便利なChromeのデベロッパーツール、つかってみましょうね。

スポンサーリンク

おわりに

便利な機能、Chromeのデベロッパーツールの使い方でした。

素敵なワードプレステーマを作ってくれた人には感謝しかないわけですが、インストールして有効化したらあとはこっちのもの笑

Chromeのデベロッパーツールをフル活用して、自分好みのブログにカスタマイズしていきましょうね!