Top 雑記帳 >コード編集なしでウェブページの要素を自由に動かすことができるブックマークレット「Liquid Page」
2010年08月14日

コード編集なしでウェブページの要素を自由に動かすことができるブックマークレット「Liquid Page」

自分のサイトデザインをテストしたい場合、通常はローカルのHTMLツールで配置などを変更してブラウザで確認するなどの作業が必要となります。

Firefoxユーザーなら、アドオンを使ってこのような作業もサイドバーで行うようなことも可能ですが、どちらにせよコードの編集などは必要となります。

ブログなどの場合、サイト内にある要素の移動を行うとどのような配置バランスになるのかが気になるようなことがよくありますが、それを確認するだけのために何度もこのような作業を繰り返すのは非常に面倒ですね。

「Liquid Page」というブックマークレットを使えば、このような作業を行うことなく、マウスで要素をドラッグ&ドロップするだけでページ各部のパーツを自在に移動し、配置イメージを確認することができるようになります。





配布ページ中ほどにある[Liquid Page]と書かれたリンクをブックマークツールバーにドラッグ&ドロップするだけですぐに利用することができるようになっています。


01_Liquid Page.JPG


目的のページを表示し、このブックマークレットをクリックすると、以下のような案内と準備完了のダイアログが表示されますので。OKをクリックします。


02_Liquid Page.JPG


03_Liquid Page.JPG


これで、ページ内の各要要素をマウスでつかんで移動させることができるようになります。


04_Liquid Page.JPG


リロードすれば移動した状態を元に戻すことができます。

このように、ツールを使う必要もなく、コードを編集することもなく簡単にウェブページのレイアウトをテストすることができるというブックマークレットです。

ウェブサイトオーナーの方は使ってみてはいかがでしょうか。


ダウンロード:Liquid Page


<関連記事>


■Firefoxで表示しているページを自在に編集することができるようになるブックマークレット。

■Firefoxで使える10個の便利なブックマークレット。

■複数のブックマークレットを一つのブックマークレットに集約できる「Bookmarklet Combiner」

■コマンドを入力して検索やサイトアクセスができるブックマークレット「Quix」
posted by moziller at 16:58 | Comment(0) | TrackBack(0) | 雑記帳



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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/159415560
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

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