スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Firefoxアドオン「HackTheWeb」使ってWebページを編集


Firefoxアドオン「HackTheWeb」は、マウス操作 キーボード操作で
 
Webページを要素ごとに 簡単編集することができます。



開始方法


■ HackTheWeb開始方法
 

・コンテキストメニューの「HackTheWeb」から開始する
・Firefoxボタン(メニュー)→ ツールの「HackTheWeb」から開始する
・ツールバーのカスタマイズから「HW」ボタンを追加してボタンから開始する


  hk01bs.png



キー操作・説明


「HackTheWeb」を有効にすると カーソル下に赤い枠線が 要素ごとに表示され
 
キーボードのキーを押すことにより 赤い枠に囲まれた部分を色々と操作ができます。




キー操作一覧(hキーを押すとキーの一覧が表示されます)

  hk04s.png

r
u
w
i
l
b
s
c
p
v
j
x
k
d
h
e
n
キー 説明
:赤枠内の要素を削除する
:削除した要素を元へ戻す
:赤枠内の幅制限を無効にする(style="width: auto;" 挿入)
:赤枠内の要素のみを表示する
:赤枠内の背景色を白くする
:赤枠内の背景色を白に、文字を黒にする(?)
「Stylish」でスタイルを保存します
:赤枠内の背景色を順番に変更する
:最後に削除した要素を貼り付ける
:赤枠内のソースを表示する
:赤枠内のJavaScriptコードを表示する
:赤枠内のXPathを表示する
:赤枠内を恒久的に非表示に(要 Remove It Permanently
:赤枠内の幅制限を無効にする(style="width: auto;" 挿入)
:キー操作の一覧を表示
:赤枠の範囲を広げる
「W」「d」「e」で広げた赤枠の範囲を狭める
 (style="width: auto;" の削除はしません)





ツールバーアイコン(マウスクリック編集用)

  hk02as.png

  アイコンをクリックして機能を選択し、マウスで要素を選択してクリック 適用

r
u
w
i
l
b
s
:赤枠内の要素を削除する
:削除した要素を元へ戻す
:赤枠内の幅制限を無効にする(style="width: auto;" の挿入)
:赤枠内の要素のみを表示する
:赤枠内の背景色を白くする
:赤枠内の背景色を白に、文字を黒にする(?)
「Stylish」でスタイルを保存します



キー操作で編集


 
■ マウスクリック編集モードもありますが、めんどくさいことになるので
設定で マウスクリック編集は「OFF」にします。

  hk007s.png

※ バグ・仕様?「ソースを表示」等でウィンドウを表示したあと
    それを閉じると、選択していた要素も消えてしまいます。
    これで消えた要素は「undo」で元に戻せません

※ マウスクリック編集を「ON」にして 右クリックに機能を割り当てても
    Firefox の右クリックメニューが出てきてしまい
   どこかクリックするまで消えません

 
■ それでもマウスクリック編集がいい という方は
「v」「j」「x」「k」「h」キーを押さないように操作してください



■ キー操作で簡単編集
 
r
u
w
i
l
b
c
p
e
n
:赤枠内の要素を削除する
:削除した要素を元へ戻す
:赤枠内の幅制限を無効にする(style="width: auto;" の挿入)
:赤枠内の要素のみを表示する
:赤枠内の背景色を白くする
赤枠内の背景色を白に、文字を黒にする(文字サイズも小さくなってしまい..)
:赤枠内の背景色を順番に変更する
:最後に削除した要素を貼り付ける
赤枠の範囲を広げる(マウス移動で選択できない要素の選択に)
「W」「d」「e」で広げた赤枠の範囲を狭める




■ 表示系(調べたいところをピンポイントで表示できます)
 

マウスオーバーでその場所の要素を枠で示したり 要素名やクラス名を表示したり出来ます
キー操作でソースの表示などもできます


v
j
x
:赤枠内のソースを表示する
:赤枠内のJavaScriptコードを表示する
:赤枠内のXPathを表示する




○○○○機能・検証中



■ マウスクリック編集できないんじゃ意味ないです

  hk02as.png



■ 編集したスタイルを「Stylish」で保存できます

  hk02bs.png

■ 保存したスタイルを使い いつでもページを整形表示できるように.. が、
■ 適当にやってもなかなかうまくいきません(たまにうまくいくことも)
■ 何かルールがあるのかも
■ Tips になにか 書かれてるのかも



■ Stylish Tips = None

  sty5ss.png



■ 選択できない要素 けっこうあります




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。