初心者でも簡単！ブラウザを使ってCSSをカスタマイズする方法

ＣＳＳ初心者の一番の悩み。

それは、どの記述がどこに影響しているのかがわからない！

せっかくカスタマイズを頑張ろうとstyle.cssを開いてみても、何がなんだかわからずそっと閉じてしまう。。。

初心者でも簡単なWordpressですが、カスタマイズしようとするとちょっと敷居が高いんですよね。

この方法を使えば他の人が作った素敵なサイトを覗いてさわっていじくりたおしながらお勉強できるんです。

しかもリアルタイムで変化を確認しながら微修正もできる！

そう、要素を検証ならね！

自分好みのサイトを発見！どんなCSSなのか見てみたい！

おぉ！美しい！なんて綺麗なサイトだ！ソースを見たい。。どんなCSSでできているんだ。。？！覗きたい。。！(変態)

そんな時、あなたはどうしますか？

なるほどなるほど。見るだけならそれでも十分かもしれませんね。
でも実は、ソースの表示以外にもサイトの記述を見る方法があるんです。

それが「要素を検証」です。

実はこの「要素を検証」というものはブラウザによって名前が違うので、見当たらない場合でも無問題！

ネットを見るために必要なブラウザは何種類も！

今あなたがこの記事を読んでいる、ということは必ずなにかのブラウザを使っているということになります。

ブラウザというのは、ネット上の情報を見るためには必要不可欠なものなんです。
そして、そのブラウザには実はいくつも種類があります。

上記のマークの中に見覚えのあるマークがありますよね？

これがブラウザというもので、いろんな会社がブラウザの開発をおこなっています。

それぞれ少しずつ規格が違ったりするので、ブラウザによってちょっとずつサイトの見え方が違ったりもするんですよ。

要素を検証？要素の検査？ブラウザごとの名称

• ブラウザの中でもまだまだシェアが多く一般的なＩＥでは要素の検査
• GoogleChromeでは要素を検証
• Ｍａｃユーザーの方なら要素の詳細を表示
• Ｆｉｒｅｆｏｘでは要素を調査

などなど。

でも見ていただくとわかるとおり、だいたい似たような名前なんですね。

今回はこの中のGoogleChromeというブラウザの要素を検証を使ってＣＳＳを簡単にカスタマイズしていきたいと思います。

他のブラウザでももちろん同じようにカスタマイズできますが、ちょっとずつ名称や使い方が違う可能性がありますので参考程度にしてみてください。

GoogleChrome「要素を検証」を使ってCSSの記述を確認する

まずは覗き見たいサイトを開いて右クリック→要素を検証でどんなCSSがかかれているのかを確認してみましょう。

今回は例として、このサイトはぴまむを使って説明します。

 

サイト内のCSSを見てみたい気になる箇所で右クリック→要素を検証をクリックしてみます。

では私はタイトルの記述を見てみたいので、タイトルの部分にカーソルを合わせて右クリックして、要素の検証をクリック！

すると。。。なんということでしょう！

左側にはHTMLの記述、右側にはCSSが記述されたものが出てきました。

左側のHTMLの部分でクリックして選択している(青色)部分に使っているCSSが右側に出てきています。

このように見たい要素ごとのCSSがまとめて右側に出てくるので、今現在反映されているCSSを探すのも簡単です。

どこにどんなCSSが記述してあってどのCSSが反映されているのかがよくわかりますね。

 

style.cssを普通に開くと、なんだか英語の記述が膨大すぎて思考回路はショート寸前だったって人でも、変更したい要素に使用しているCSSが見やすいので探す手間も省け、勉強に割く時間も多く取れるので効率もアップ！

GoogleChrome「要素を検証」を使ってCSSの記述を変更する

また、このブラウザ上でCSSを変更してみることもできます。

試しに文字の大きさを指定している「font-size」をなくしてみましょう。

反映されているCSSを外すのは、左側のチェックボックスをクリックしてチェックを外すだけ！

ポチっとな、とチェックを外すと。。

あらビックリ！文字がちっちゃくなっちゃった！

戻したい場合は、さっきクリックしたチェックボックスをもう１度クリックして、チェックをつければOKです。

 

では次に文字の大きさを変えてみましょう。

文字の大きさを変えるのは「font-size」を指定している数字を好きな大きさに変更するだけ。

数字部分をクリックして、今回は例で3にしてみましょう。

1.5emとなっている部分をクリックして、3emに変更してみました。

すると。。

 

あら不思議！文字がでっかくなっちゃった！

要素の検証で微調整して出来上がったCSSをコピペ！

CSSを変更した変化を見ながら調整できて便利な要素の検証ですが、今の状態はただのプレビューと同じ。

大元のCSSの記述が変更されているわけではないので、ページの更新をすると元に戻ってしまいますし、自分以外の人のブラウザからはいじった状態は見えません。

あくまでも自分のブラウザ上でだけ変更したという状態なので、大元から変えるには今変更した記述を自分のテーマのstyle.cssに上書きしてあげる必要があるんです。

 

要素の検証の右部分、CSSの記述の上にリンクがあるのでそこをクリック。

すると、style.cssだけを表示しているSourcesに移動できます。

さっき変更した場所のCSS記述部分に飛ぶので、必要な記述だけを抜き出してWordpress管理画面の「外観→テーマの編集」にコピペ。

要素の検証では何行目の記述を変更したのかまで確認できるので、変更箇所も探しやすいです。

 

そんな方は、Sourcesページ全部を「外観→テーマの編集」に上書きコピペすればOK。

ブラウザを使ってCSSをカスタマイズする方法　まとめ

GoogleChromeの要素の検証を使ったCSSのカスタマイズ方法は初心者でも簡単なのでとってもおすすめ。

CSSの変更ってちょっと敷居が高いな。。どこをどう変えていいかわかんないしこのままでいいや。。なんて思っていた方。

要素の検証なら変化をリアルタイムで見られるので、CSSの名前を知らなくてもOK！

簡単にサイトのCSSが変更できるので、ぜひ要素の検証で遊びながらCSSに触れてみてください。

また、がっつりCSSなどを変更する時には子テーマの設置をお忘れなく！

WordPressをカスタマイズする時には子テーマを使うと幸せになれるお話