お問い合わせ

トラストコンシェルジュは不動産屋さんの不便を便利にするために作成された、ホームページを提供しています。インターネット不動産でお困りのことがございましたら、トラストコンシェルジュにお任せください!

2017年7月25日 IT, ブログ

WordPressと直接的に関係があるわけではありませんが、テーマのカスタマイズに関することで、「ここのフォントサイズを変更したい」「余白をもう少し狭くしたい」などのご質問を頂くことがございます。そんなときに、使うと便利なのがFirefoxアドオンの「Firebug」です。

Firebugを使うと、例えば「ここをカスタマイズしたい」と思った所をクリックすると、該当するCSSコードを教えてくれる機能があります。該当する箇所さえ分ければ、あとは値をお好みで変更するだけなので、非常に感覚的にCSSのカスタマイズができるわけです。もちろん、WordPressサイトをカスタマイズする際にも役立ちます。

また、GoogleChromeをお使いの方は、Chromeデベロッパーツールでも同様の機能がありカスタマイズの際に役に立ちますよ。

サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

Firebugをインストールする


  1. まず、Firefoxをインストール
  2. Firebugをインストール

※Firefoxをインストール済の場合は、Firebugのみインストールしてください。

Firebugの使い方


下図のように、Firefoxのアドレスバーの右辺りに昆虫のアイコンがありますので、そこをクリックするとFirebugが起動します。カスタマイズしたいサイトも開いておきましょう。

 
次に、下図のように「矢印マーク」をクリックした後、カスタマイズしたい箇所をクリックしてください。

 
以上で、カスタマイズしたいところに該当するCSSが一発でわかるわけですね。あとは、値をお好きなように変更すればOKです。

 
ちなみに、Firebugのすごいところは、この状態のまま編集テストを行うことが出来るところです。例えば、下図のようにフォントサイズを 11→15px に変更してみると

あら不思議。文字のサイズが変更されました。また、右クリックでclassやプロパティを新規で追加することも可能です。このようにして、編集テストを行うことが出来るのもFirebugの強みです。

テストが終わったら、あとは実際のサイトをカスタマイズするだけです。いかがでしょう?これなら専門的な知識がなくてもカスタマイズが楽にできるようになりますね。