EC studio EC studio デザインブログ

「テキスト修正してサーバーにアップしたけど、今度は改行がおかしい・・・
 また作り直して、アップしなおさないと・・・」
「このテーブル、項目が増えてもレイアウトが崩れないかなぁ・・・
 検証面倒くさいなぁ・・・」
「打ち合わせ中に、この画像を削除したパターンが見たいっていわれけど・・・
 今HTMLファイルもFTP情報もないしなぁ・・・」

こんなとき、リアルタイムでWebページを編集できたら便利ですよね。

そこで紹介するのが今回の方法です。
ブラウザのアドオンやエクステンションのインストールは一切なし!
ブラウザに左右されない!(Firefox、IE8、Chrome、Opera共通)

そんな便利な方法をご紹介します。

お気に入りに追加してWebページを編集する方法

sample1
下記のテキストリンクを「ドラッグ」し、
ブラウザのツールバーに「ドロップ」します。
このページを編集する

sample2
ツールバーに入った「このページを編集する」のブックマークをクリック。

すると、開いているページが編集できるようになります。
テキストや画像を選択し、「Delete」や文字を入力してみてください。

なんということでしょう。
編集したとおりに、Webページが変わります。
sample0

アドレスバーに入力してWebページを編集する方法

JAVASCRIPT:
  1. javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200

もう一つの方法は、直接ブラウザのアドレスバーに上記の文字列を入力する方法です。

sample3
そして、入力後エンターを押してください。

すると、さきほどと同じように編集が可能になります。

機能は、Firefoxのアドオン「PageHacker」と同じです。
【参照記事:画面レビューにめちゃくちゃ便利なFireFoxプラグイン
でも、「PageHacker」と違ってインストールが不要、
Firefox以外でも使えるので、さらに便利!
是非お試しあれ。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.