カテゴリー
サイト構築

SafariやChromeでサイトのCSSを簡単に調べる

CSS!    

 CSSって、いったどこを触ればどこが変わるのかわかりづらいですよね。SafariやChromeを使ってCSSのどこをいじればデザインが変更できるか調べる方法です。

Safariで変更したい場所に対応するCSSがどこにあるか調べる

 まずは、Safariの環境設定から「詳細」の中の「メニューバーに”開発”メニューを表示」にチェックを入れます。これでCSS調査用のメニューが使えるようになります。

Css02 2

 Aタグ(リンク)の表示を変更したい場合は、リンクの所で右クリックすると「要素の詳細を表示」というメニューがさっきの設定で出てくるようになっているので、これをクリック。

Css03 4

すると、下の方に該当箇所のHTMLの構造と、右の方には適用されているCSSの情報が出てきます。

Css04

Aタグの情報を見ると、「style.css」の485行目に指定してある内容が使われていることがわかります。style.cssの所をクリックするとCSSまで確認できます。(ちなみにWordPressでHead Cleanerプラグインを使っていると設定によってはCSSの名前は実際のファイル名と違う場合があります。)

Css05 4

こんな感じでCSSと読み込みされているCSSの場所もここで確認できますね。

さらにここでCSSを書き換えると、サイトにどのように反映されるかも「実験」できます。text-decorationをunderlineに変えてみました。

Css08 2

Css06 2

 

もちろん、本当に反映させる場合は、Webサーバーにおいてあるソースを変更する必要があります。

Chromeで変更したい場所に対応するCSSがどこにあるか調べる

Css07 2

 上はChromeの場合の同様の機能の画面ですが、ほとんどSafariと変わりません。Safariと違って特に設定しなくても右クリックすると調査の為のメニューが出てきます。メニューの名前は「要素の検証」になっています。

WordPressの子テーマを作る

 WordPressでサイトを運用している場合はCSSはテーマの中に含まれています。テーマの中のstyle.cssを直接編集してもいいのですが、テーマが最新版に更新されると編集した内容が元に戻ってしまいます。

 なので、基本はカスタマイズしたいテーマの「子テーマ」を作るのが良いと思います。やり方は以下のサイトに詳しく紹介されていました。

【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇|ThePresentNote

まとめ

 「要素の検証」を使うとCSS変更がとても捗ります。コレ使ってもなかなかうまく反映されなくて都度CSSについて調べたりしてますけどね…。CSS難しい。

この記事を書いた人: A-tak

A-tak.com(えいたっく どっとこむ)の管理人。
Apple野郎なおっさんでしたが、ちょっと最近のAppleには飽き気味。
A-tak.comは2002年2月から運営(前身のサイトは1999年3月から)。今年で18年目!

Youtube / Twitter / Mastodon / Facebook