Top Firefox拡張機能(アドオン) >Firefoxで表示しているページ上にローカル画像を重ねて配置イメージを確認することができるアドオン「DraftDiff」
2011年12月14日

Firefoxで表示しているページ上にローカル画像を重ねて配置イメージを確認することができるアドオン「DraftDiff」

ウェブページ開発者の方なら、ページ全体、またはページ内に挿入する画像がどのようなイメージで配置されるのかを確認することがあると思います。

こんな作業を行うには、HTMLエディタのプレビューを使うか実際にアップロードして確認するなどの方法が考えられますが、ちょっとバナーや一部の画像を変更したいだけというような場合、このような作業を行うのも面倒なものですね。

そんな時、ブラウザで表示しているページに手持ちの画像を重ね合わせるようなことができれば簡単に確認できて便利ですね。

Firefoxに「DraftDiff」というアドオンをインストールしておけば、そんなことができるようになります。

「DraftDiff」は、Firefoxで表示しているページ上に、ページ全体のスクリーンショットやその他の画像を半透明で重ね合わせ、実際に画像を掲載した場合や置き換えた場合のイメージを簡単につかむことができるというアドオンです。

アドオンをインストールすると、アドオンバーに専用のボタン 01_DraftDiff Firefox Add-ons.JPG が設置されます。

このボタンをクリックすると小さなウィンドウが開くようになっています。


02_DraftDiff Firefox Add-ons.JPG


ウィンドウ左端のボタン 03_DraftDiff Firefox Add-ons.JPG をクリックするとファイル参照ダイアログが開くようになっており、ここで参照した画像がウィンドウ内に半透明で表示されるようになっています。


04_DraftDiff Firefox Add-ons.JPG


このウィンドウをドラッグ&ドロップし、目的の位置へ移動させることにより、配置した際のイメージや画像を置き換えた際の状態をチェックすることができるというわけです。

*ドラッグ&ドロップでウィンドウサイズを自由に変更することができます。
*ウィンドウ内の画像をマウスでドラッグすることにより、位置を変更することができます。

ウィンドウ右側にはウィンドウをアクティブページのスクロールと連動させる機能を有効/無効、Firefoxのウィンドウサイズに合わせて最大化、元のサイズに戻す、最小化する、閉じる・・ボタンが用意されており、実際の表示スタイルに合わせてイメージを配置することができるようになっています。


■ウィンドウに合わせて最大化


05_DraftDiff Firefox Add-ons.JPG


このように、別途ツールを利用することなく、非常に簡単な操作でウェブページにページ全体画像や個別画像を配置した場合のイメージを確認することができるようになります。

ウェブページ管理者の方や、開発者の方は使ってみてはいかがでしょうか。


ダウンロード:DraftDiff (Add-ons for Firefox)


<関連記事>


■FirefoxでGUIを使ったプロトタイプを作成できるアドオン「Pencil Project」

■Firefoxに"Dreamweaver"ライクなHTMLエディタをビルトインするアドオン「Codetch」

■Mozillaが源流のHTMLエディタ「KompoZer-0.7.10」が公開されました。




この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック