Firebugのアイコンをリアルな虫から変更する方法

この記事は約3分で読めます。

Firebugのアイコンをリアルな虫から変更する方法
サンプル

こんにちは、さち です。

Webページの作成,編集にとても役立つFirebugですが
「ファイアバグ」という名前とかけてアイコンが虫(バグ)になっています。

虫のアイコンは結構リアルなので
虫が苦手な私にとってはあまり見たくないというのが正直なところ。
(過去バージョンのアイコンよりはだいぶよくなりましたが…)

でも Firebug はとても便利なアドオンなので使い続けたい。
そこで今回は Firebug のアイコンを変更する方法について書いていきます。

アイコンの変更は
イカ娘(マンガキャラクター)へ変更する方法と
自分の好きな画像へ変更する方法の2種類を紹介します。

 

スポンサーリンク

アイコンをイカ娘へ変更する

操作画面

後で紹介する自分の好きな画像へ変更する方法よりも簡単でお手軽です。
自分でアイコン画像を作るのは面倒という方や
イカ娘が大好きだという方はこちらの方法をどうぞ。

  1. Firefoxをイカ娘が侵略プロジェクトへ移動します。
  2. ページに書かれている手順に従ってアイコンを選びます。
    通常は特にデフォルトのまま何も変更しなくて大丈夫です。
  3. アドオン(拡張子:xpi)をダウンロードします。
  4. ダウンロードしたアドオンを
    Firefoxのウィンドウへドラッグ&ドロップしインストールします。
    (すでにFirebugを導入している場合は上書きインストールされます)
  5. Firefoxを再起動すると
    Firebugのアイコンがイカ娘に侵略(変更)されているでゲソ。

アイコンを自分の好きな画像へ変更する

アイコンに使う画像を自分で用意する必要があるので少し手間がかかります。
アイコン画像は背景が透明なアルファチャンネル付きのPNG画像なので
画像を自分で編集する必要が出てくると思いますが
画像編集の経験がある方であればそんなに時間はかからないと思います。

  1. アイコンに使用する画像を用意します。
    画像のサイズは、32x32px 以上のものを準備して下さい。
  2. Photoshopなどを使い背景を透明にします。
    操作画面
  3. ・32x32px の firebug32.png
    ・24x24px の firebug24.png
    ・20x20px の firebug.png
    ・16x16px の firebug16.png
    ・16x16px でモノクロの firebug-gray-16.png
    の5種類のアルファチャンネル付きPNGを作成し保存します。
    操作画面
  4. Firefox を起動している場合は終了します。
  5. Firebug のアイコンが保存されているフォルダへ移動します。
    WindowsXP の場合、通常は下記の場所にあります。

    C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\ランダム文字列.default\extensions\firebug@software.joehewitt.com\skin\classic

    WindowsVista, Windows7 の場合、通常は下記の場所にあります。

    C:\User\ユーザ名\App Data\Roaming\Mozilla\Firefox\Profiles\ランダム文字列.default\extensions\firebug@software.joehewitt.com\skin\classic

  6. 「3」で作成したアイコンを上書きしファイルを置き換えます。
    操作画面
  7. Firefox を起動するとアイコンが変更されています。
    操作画面

アイコンに使用した画像はこちらのサイト様からDLさせて頂きました。

   → 素材のプチッチ

アイコンを元に戻したい場合は
公式サイトから Firebug をダウンロードし上書きインストールするだけでOK。
(Firebug をアップデートした場合も元に戻ってしまうので注意)

虫が苦手という方はこの方法でアイコンを変更してみてはいかがでしょう?

コメント

タイトルとURLをコピーしました