テーマを編集のに役立つツール


 既存のテーマを編集するときは子テーマを作り、style.cssでレイアウトを修正していくのが安全で簡単。でも、ここを修正したいんだけど、セレクタはどうやって指定したらいいんだろうとか、もとはどういう風になっているんだろうと、ソースとにらめっこしてるだけでは中々見つけづらい。こういうときはFirefoxのアドオンを使えば、そういったことも簡単に解決できちゃいます。

0038

 FirefoxのアドオンのFirebugはソースを表示しながらCSSやHTMLなどを確認、編集できるアドオン。通常の「ページのソースを表示」より視覚的に見やすくなっているのがポイント。気になるところにカーソルを合わせるだけで、その部分のソースがハイライトで表示されるので、修正したい部分のソースをすぐに発見することができちゃうのです。さらにMarginやPaddingなど、目には見えず分かりにくいものも色分けして表示されるので、自分の設定が反映されているのかを確認しながら作業しやすいので絶対にオススメのツールです。


調べたい要素をクリック!
0039 Firebugをインストールしたらナビゲーションツールバーにてんとう虫のようなアイコンが表示される。それをクリックすると下段にFirebugの画面が表示されます。続けてFirebugの画面左上に矢印のようなアイコンクリック。あとは調べたい部分をクリックすると、ソースがハイライトされます。

0040


要素のサイズ、マージンなどを確認する
0042 Firebugの編集画面にカーソルを合わせると、カーソルの合った部分がページ上でハイライトされます。水色の部分が要素の部分、紫の部分がPadding、黄色の部分がMarginのスペースとなっています。編集したい部分のidやclassが確認できたら、style.cssで編集。ちゃんと反映されてるかどうかはFirebugで確認というような流れで編集するといい感じです。またFirebugの右側にあるウィンドウのレイアウトタブを表示すれば、さらに視覚的に要素の情報を確認することができます。

調べたいようその情報も確認できる


CSSが反映されているかどうかも確認できる
 しっかり記述したはずなのに思い通りに反映されてないときは、Firebugの右側にあるスタイルタブで確認。選択した要素にどんなスタイルが適応されているか確認することができます。例えば親要素のスタイルと競合しているときは!importantを使って強制的に反映させたり、そもそも指定自体が間違っているときは、それを見直したりするときに役立ちます。またスタイルタブに直接書き込むことで、一時的ですが変化を確認することもできますし、特定のプロパティを停止させることもできます。リロードすれば元の状態に戻るので、適当にいじってみてどんな変化が起こるのか見てみるだけでも勉強になりましたー。

スタイルタブで確認


変更したい要素のidやclassが確認できたら、あとはスタイルを記述していくだけ。オシャレなテクニックはこちらの書籍が参考になります。

CSS3デザインブック 仕事で絶対に使うプロのテクニック


Related Posts Plugin for WordPress, Blogger...
投稿日: 作成者: カテゴリー: CSS, WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です