WordPressと直接的に関係があるわけではありませんが、テーマのカスタマイズに関することで、「ここのフォントサイズを変更したい」「余白をもう少し狭くしたい」などのご質問を頂くことがございます。そんなときに、使うと便利なのがFirefoxアドオンの「Firebug」です。
Firebugを使うと、例えば「ここをカスタマイズしたい」と思った所をクリックすると、該当するCSSコードを教えてくれる機能があります。該当する箇所さえ分ければ、あとは値をお好みで変更するだけなので、非常に感覚的にCSSのカスタマイズができるわけです。もちろん、WordPressサイトをカスタマイズする際にも役立ちます。
また、GoogleChromeをお使いの方は、Chromeデベロッパーツールでも同様の機能がありカスタマイズの際に役に立ちますよ。
サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方
Firebugをインストールする
※Firefoxをインストール済の場合は、Firebugのみインストールしてください。
Firebugの使い方
下図のように、Firefoxのアドレスバーの右辺りにゴキブリのようなアイコン（本当は違う昆虫みたいですが・・）がありますので、そこをクリックするとFirebugが起動します。カスタマイズしたいサイトも開いておきましょう。
次に、下図のように「矢印マーク」をクリックした後、カスタマイズしたい箇所をクリックしてください。
以上で、カスタマイズしたいところに該当するCSSが一発でわかるわけですね。あとは、値をお好きなように変更すればOKです。
ちなみに、Firebugのすごいところは、この状態のまま編集テストを行うことが出来るところです。例えば、下図のようにフォントサイズを 11→15px に変更してみると、、、
あら不思議。文字のサイズが変更されました。また、右クリックでclassやプロパティを新規で追加することも可能です。このようにして、編集テストを行うことが出来るのもFirebugの強みです。
テストが終わったら、あとは実際のサイトをカスタマイズするだけです。いかがでしょう？これなら専門的な知識がなくてもカスタマイズが楽にできるようになりますよね。
コメント