はぴまむ

子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。

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

time 2015/12/02

CSS初心者の一番の悩み。

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

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

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

そんなCSS初心者でも簡単にサイトのCSSをカスタマイズできる方法が要素の検証です。

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

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

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

sponsored link

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

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

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

 
サイト上で 右クリックしてソースの表示で見るかな?

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

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

 
え?要素を検証?そんな文字見当たらない。。

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

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

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

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

ブラウザの種類

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

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

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

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

  • ブラウザの中でもまだまだシェアが多く一般的なIEでは要素の検査
  • GoogleChromeでは要素を検証
  • Macユーザーの方なら要素の詳細を表示
  • Firefoxでは要素を調査

などなど。

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

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

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

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

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

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

 

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

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

要素の検査でCSSカスタマイズ

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

要素の検証でCSSのカスタマイズ

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

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

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

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

 

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

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

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

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

要素の検証でCSSのカスタマイズ

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

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

要素の検証を使ってCSSのカスタマイズ

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

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

 

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

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

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

css-custom5-1

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

すると。。

要素の検証でCSSのカスタマイズ

 

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

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

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

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

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

 

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

要素の検証でCSSを確認

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

要素の検証でCSSを表示

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

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

 

 
CSSのとこに飛んできたはいいけどどこ変更したかわからない。。
というか、さっきいろいろいじりすぎてどことどこをコピペすればいいかわからないー。。

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

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

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

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

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

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

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

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

sponsored link

コメント

  • こんばんは。この「初心者でも簡単!ブラウザを使ってCSSをカスタマイズする方法」すごく参考になりました。インターネットで調べながら、HTMLとCSSを少しづつではありますが勉強しはじめてちょっとだけカスタマイズが判ってきました。でもどこを直せばいいのか?記述箇所がわからなかったのですがブラウザと要素の検証、検査を使う。これって誰も教えてくれないテクニックですよね。いやぁ、検索ユーザー120%以上満足しちゃう素晴らしい記事です。ゆいくりさんが女神様に見えてきました。ありがとうございます。

    by 西澤 洋 €2016年4月26日 6:59 PM

    • 西澤さん、うれしいコメントをありがとうございます^^
      最近記事の内容が雑記方向にそれ気味なので、これからも少しでもお役に立てるような記事をアップしたいと思います!

      by ゆいくり €2016年5月11日 2:12 PM

down

コメントする




sponsored link

はぴまむの中の人

ゆいくり

ゆいくり

30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。 [詳細]