アフィリエイトJAPAN

ライバルのサイト研究用に入れたFire Foxにホタル(Firebug)を入れる

firefox-Firebug

この記事はFirefoxをインストールした方専用の記事です。

Firefoxをまだインストールしていないという方は早めにインストールすることをオススメします。インストール手順はこちら

さて、今回ご紹介するツールは「Firebug」です。

Firebugでできる事

Firebugを使うと以下のことが出来るようになります。

■ HTML, CSS, XML, DOM, JavaScript などのリアルタイム表示・作成・編集
■ JavaScript のログ出力、デバッガ、プロファイラ
■ コマンドライン機能
■ 通信解析(ファイルや XMLHttpRequest など)
■ デュアルディスプレイ環境での表示に対応
(※ウィキペディアより引用)

Webデザイナーの多くはこのツールを使ってCSS, HTML, XML, DOM, JavaScript などの記入や修正をしています。

難しい言葉が並んでいますが、実際このツールを頻繁に使うことはありません。

稀に出会う優良サイトのレイアウト幅を調べたり、フォントサイズやカラーを調べたりするくらいです。コードに慣れてきたらもっと活用の幅が広がりますが…。

とはいえ、導入しておくとライバルサイトを調べたる時に活躍しますから、早めの導入をオススメします。

では早速導入手順を解説していきますね。

Firebugの導入手順

以下、Firebugの導入手順です。

1.Firefoxを立ち上げる

今回のツールはFirefox専用ですから、まずはFirefoxを立ち上げて下さい。

2.Firebugの紹介ページへアクセス

以下のURLをFirefoxのURL入力欄に貼り付けて「Enter」を押して下さい。

https://addons.mozilla.org/ja/firefox/addon/firebug/
0612-6

「+Firefoxに追加」をクリック

このボタンをクリックしてください。

0612-7

インストールする

以下の画面が表示されるので、「インストール」をクリック(クリック出来るまで時間がかかる場合があります)。

0612-8

インストールされたことを確認する

右上にホタル(ゴキブリっぽいですが…)が表示されましたか?

0612-9

表示されれば完了です。

任意のページでホタルをクリックする

好きなページにアクセスして、ホタルをクリックしてみて下さい。するとこんな画面が出てきます。

0612-10

この中で様々な編集をしたり、ライバルサイトのレイアウト幅、フォントサイズやフォントカラーを調べることが出来るようになります。

まとめ

自分のブログやサイトを編集する時、ライバルサイトのデザインを調べる時に重宝するツールが「Firebug」です。

このツール一つで多くの情報を得ることができます。

何度も触って、このツールに慣れておきましょう。

最短で月収100万円を稼ぐ5ステップ
URL :
TRACKBACK URL :

Leave a reply

*
*
* (公開されません)

*

This blog is kept spam free by WP-SpamFree.

Return Top