wordpressのテーマをテスト編集できるFirebugの使い方

Firebugとは、ブラウザー上でHTMLやCSSをテスト編集する事ができ、編集した箇所がリアルタイムで更新されます。wordpressのテーマ調整や初心者の方のテーマ編集の練習に非常に便利なツールです。

テーマをテスト編集できるFirebugの使い方

wordpressを導入した当時、HTMLやCSSなど多少理解している程度の私がPHPの仕組みを理解できるはずもありませんでしたが、このFirebugを使うことにより、PHPやwordpressの仕組みが何となく理解できるようになりました。

そのおかげでPHPの中にアドセンスやリンクを埋め込むことができるようになり、いちいち記事ごとにアドセンスを埋め込まなくても自動表示させることができたり、日付やタグなどを消して表示させないようにできるようになりました。

Firebugとは、簡単に言いますとFirefoxのプラグイン（アドオン）です。上記画面のように2段に別れ編集する事が可能です。（あくまでテスト編集なので保存される事はありません。）

簡単な使い方を説明します。

CSSを選択し、ｈ１の部分を編集してみます。
CSSのｈ１の部分を見つけマウスを当てると文字を変更できます。

フォントサイズを変更すると、リアルタイムに適用され画面が変わります。けして保存されるわけではないので何回でも納得が行くまで変更編集ができます。

納得したら編集部分をコピーしてwordpressのスタイルシートにコピペすれば完成です。

Firebugインストール方法

まずFirefoxをインストールします。

Firefoxインストール←からＤＬできます。

ダウンロードしてセットアップが終わりましたら、ツールのアドオンをクリックします。

アドオンを入手のタブになっていることを確認して、すべてのアドオンを参照をクリックします。
Firefox用のアドオンページが表示されますので検索画面に[Firebug]と入れて検索してください。

表示されましたら、Firefoxへインストールをクリックして[いますぐインストール]をクリックすれば完成です。

Firefoxを再起動すると右下に虫っぽい（ゴキブリ？）が表示されますのでクリックすると使用できます。

応援クリックありがとうございました(人´Д`)

WordPress使いならあわせて読みたい関連記事

• WordPressでIE8新機能webスライスを追加プラグイン『Webslicer』
• WordPressでMySQLを自動バックアップするプラグイン『WP-DB-Backup』
• WordPressをiPhone用の表示に最適化するプラグイン「WPtouch iPhone Theme」
• WordPressテーマ(テンプレート)の編集方法
• WordPressでアドセンスのSection Targeting行うプラグイン『Google Ad Wrap』