Top Firefox拡張機能(アドオン) >ウェブページにPhotoshopライクな方法でガイド線を引くことができるFirefoxアドオン「FoxGuide」
2010年11月03日

ウェブページにPhotoshopライクな方法でガイド線を引くことができるFirefoxアドオン「FoxGuide」

Photoshopでコンテンツの配置などを行う際に、ガイド線を表示すれば便利なことがあります。

ウェブページデザインなどを行っている方なら、この機能を使うことで全体のレイアウトを構成したりすることもできて便利ですね。

ブラウザで今見ているページでも、このような機能を使うことができれば、同じようにレイアウトを組み立てる際の目安になるかもしれません。

そんな機能をFirefoxに与えてくれるアドオンが「FoxGuide」です。

「FoxGuide」は、Firefoxで表示しているウェブページ上で、Photoshopライクな方法でガイド線を簡単に引くことができるというアドオンです。

アドオンをインストールすると、ステータスバーに専用のボタン 01_FoxGuide_Firefox_Add-ons.JPG が付与されます。

デフォルトでグレーアウトしているこのボタンをクリッすれば、機能を有効にすることができるようになっています。

機能が有効になるとコントロールパネルが表示され、ブラウジングスペースの上部、および左端にルーラーが表示されるようなります。


02_FoxGuide_Firefox_Add-ons.JPG


コントロール部ではルーラーの不透明度、ガイド線の色が指定できるほか、(Hex部に直接カラーコードの記入も可)、現在のマウス位置が表示されるようになっています。


03_FoxGuide_Firefox_Add-ons.JPG


ここでガイド線の色を指定し、ルーラー部にマウスを乗せるとガイド線がドラッグできるようになり、マウスを離した位置にガイド線を置くことができます。


04_FoxGuide_Firefox_Add-ons.JPG


水平・垂直のガイド線は何本でも引くことができ、このガイドはウェブページを再訪問しても保持されるようになっています。

*ルーラーは最大10000pxまで表示されますので、かなり長めのページや幅の広いページにも対応することができます。

また、ページコンテキストメニューにも[FoxGuide]という項目が追加され、ここからは引いたガイド線の全消去(Reset)とコントロール部の表示・非表示ができるようになっています。


05_FoxGuide_Firefox_Add-ons.JPG


ウェブサイトオーナーやデザイナーさんには役立つことがあるかもしれませんので、興味のある方は使ってみてはいかがでしょうか。


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


<関連記事>


■閲覧ページの各部サイズを計測する「MeasureIt」

■Firefoxのブラウズ画面にラインを自由に書き込める「Firedoodle」

■ダミーイメージを簡単に作成することができるFirefoxアドオン「Dummy Images」



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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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

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





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。