お役立ちツール脱初心者!WordPressのカスタマイズが捗る「Firebug」の使い方WordPress2016.08.11WordPressのカスタマイズをする時に上手くいかないことってよくあると思います。参考コードをコピペしても反映されない、なんか表示がおかしい、みたいなことって誰もが経験あるんじゃないでしょうか。そんな時に役立つのが「Firebug(ファイヤバグ)」というFirefoxの拡張機能です!「Firebug」はWeb開発者用のデバッグツールで、Web制作の仕事をしている人にとっては定番なんですけど、コピペだけでなんとかWordPressをカスタマイズしているような初心者の方にもオススメのツールです。向けアドオンaddons.mozilla.org「Firefoxへ追加」のボタンを押すとインストールできます。起動してみよう!起動方法は簡単です。調べたいサイトを開いている状態で、虫のアイコンをクリックします。すると画面が上下に分割されて下にこんなやつが出てきます↓これはmacでの画面なんですけど、右上の真ん中のボタンを押すとFirebugを新規ウィンドウで表示できます。終了するときは一番右上のボタンです。新規ウィンドウで表示している場合はブラウザを閉じてもオッケー。Firebugの使い方それでは使い方の説明をしていきます。難しそうな感じですが、触ってみるとすぐに慣れると思います♪HTML、CSSを確認まずは一番基本的で、良く使う機能のご紹介。Firebugの左上にある矢印のアイコンをクリックしてから、サイト内にマウスカーソルを持って行くとHTMLの要素ごとに青い枠が出てきます。この青い枠が出ている時にFirebugを見てみると、その部分のHTMLとCSSを確認することができます。左側がHTMLで右側がCSSです。マウスカーソルを動かすと青い四角も動いちゃいますが、じっくり調べたい部分で青い枠内をクリックすれば確定されて、カーソルを離してもその部分のHTMLとCSSが表示され続けます。HTML部分の見方HTMLの部分を見れば、どんな構造になっているのか、どんなid名やclass名が使われているのかをすぐに確認することができます。「▶」この三角アイコンを押すと、中に入れ子になっている要素を表示することができます。文字やclass名などをクリックすると編集でき、変えた内容がブラウザですぐに反映されるので変化を確認することができます。Firebugを終了してブラウザを更新すればまた元に戻るので、気にせずガンガンいじっちゃってOK!HTML部分の活用方法HTMLを見ればid名やclass名が分かるので、例えばどこかのサイトから拾ってきたCSSのコードを自分のサイトのどのclass名で指定すれば良いかが分かりますね。20px;>テキスト</p>」みたいに、HTMLに直接スタイルが指定されている場合があります。この場合、style.cssなどの外部スタイルシートで指定をしていても、インラインでHTMLに直接記述した方が優先されてしまいます。CSSが効かない場合などにHTMLでスタイルが指定されていないか確認してみると良いかもしれません。次に右側のCSSの部分です。右上の青い文字は、スタイルシートがサーバー内のどこにあるのか、またそのコードがスタイルシートの何行目に書かれているのかを知ることができます。取消線が入ったコードは上書きされて無効になっているコードです。子テーマのstyle.cssを使うと、そっちが優先されて反映されますが、上書きされた親テーマのコードに取り消し線が付いて表示されます。CSS部分の活用方法サイトの表示がおかしかったり、CSSが反映されてないような疑いがある場合に、その部分に今どんなCSSが適用されているか確認できます。テーマのスタイルシートで指定していても、プラグイン側のスタイルシートが優先されちゃってる場合なんかもあります。その場合テーマのCSSは読み込まれているけど取り消し線が付いているかもしれません。右上の青い文字でスタイルシートの場所を確認することで、テーマ内のコードなのか、プラグインなど外部のコードなのか分かりますね。!important;」のような記述がある場合があります。この「!important」が付いていると最優先されるので、例えば子テーマでのCSSが効かない場合に親テーマで「!important」が付いていた、みたいな原因を知ることもできます。便利な機能WordPressのカスタマイズに役立つさらに便利な機能をご紹介!CSSを無効化できる!CSSのコードにマウスカーソルを合わせると、赤い丸が出てきます。これをクリックするとその行のコードを無効化できるんです!ブラウザにすぐ反映されるので、CSSを指定した場合、しなかった場合の違いをすぐに確認することができます。実際のスタイルシートを編集しているわけではないので、Firebugを終了すればちゃんと元に戻ります。活用方法コードを無効化した場合、上書きされて取り消し線が付いていたコードが有効になります。自分で書いたコードが反映されていない場合、今適用されているコードを無効化してみると希望通りの表示になることがあります。CSSが効かない原因を探るための1つの方法にもなりますね!プロパティや値を変更できる!これはメチャメチャ便利な機能です。「width」や「color」などのプロパティと、その値をFirebug上で変更できて、しかもそれがブラウザにすぐ反映されちゃうんです!変更したい場所でクリックすると編集できるようになります。する」なんてこともすぐ出来ちゃいます。これもスタイルシートに保存はされないので、Firebugを終了すれば元に戻ります。活用方法いちいちスタイルシートを編集して、保存して、サイトに戻って確認しなくても、すぐにその場で変化を見ることができるので非常に便利です。いじってみて思い通りに表示できてからスタイルシートを編集すれば良いので効率的に作業が出来るようになりますね♪プロパティを追加できる!変更するだけじゃなくて、新しくプロパティを追加することもできます。右側にスペースをダブルクリックすると、新しいプロパティを書き込めるようになります。プロパティを入力してからEnterキーを押すと、値を入力できるようになります。値を入力してもう一度Enterキーで確定です。追加したプロパティもすぐにブラウザで反映されて、変化を確認することができます。これも元のスタイルシートには保存されません。活用方法プロパティや値の変更と同じように、実際に表示の変化をすぐに確認できるので便利です。「レイアウト」のタブをクリックすると、その要素のサイズや、指定されているmargin、border、paddingなどを確認することができます。ブラウザにも色が付いて表示されるので、直感的に分かりやすくなるのが良いですね。青い部分がコンテンツの入っている要素の部分で、紫色がpaddingの部分、黄色がmarginの部分です。活用方法CSSで高さや幅を指定していない要素のサイズが何pxなのか知りたい場合などに使えますね。「float」のプロパティを使っている場合、floatした要素が入っている親要素の高さが出ないためにレイアウトが崩れてしまうことがあります。そんな時も親要素がどんな状態なのか確認できるので、レイアウト崩れを解決するのに役立つこともあります。まとめ他にもFirebugには色々な機能がありますが、仕事でもあんまり使う機会はありません(笑)WordPressのカスタマイズを色々やっていると、HTMLやCSSも少しずつ覚えてきますよね?Firebugを使えるようになるとさらに1段レベルアップして、使っているテーマ以外のカスタマイズを自分のテーマに応用したりもできるようになると思います。コードをコピペするだけでは上手くいかないことも多いと思うので、こういったツールもぜひ活用してみてください。Migrationの使い方WordPressWordPress:画像に文字をキレイに回り込ませる方法【スマホ対応】WordPressSTINGER7:コメント欄をカスタマイズする方法【その2】WordPress【Cocoon】タグクラウドのデザインをカスタマイズcommentコメントをキャンセルメールアドレスが公開されることはありません。超オススメ!iMacの周辺機器&アクセサリ【オシャレ&機能的】タイトルとURLをコピーしました。