「Print Edit」フォーマット


 
■ フォーマット(選択した要素のCSSプロパティ値を変更)


プロパティ・Flsgs


■ プロパティ
 

書式プロパティは、[クイックスタイル]セクションのボタン または
[プロパティ]セクションで、チェックボックスにチェックを入れて個別に適用できます。
いくつかのプロパティの値は、小さな矢印ボタンをクリックすることで変更できます。
[プロパティ]セクションは"シェブロン"ボタンで、表示​​または非表示にできます。


  fmth_111ss.png

□ 左:auto
□ 最上部:auto
□ 幅:auto
□ 高さ:auto
□ マージン:0 / 5 / 10 / 15 / 20 px
□ パディング:0 / 5 / 10 / 15 / 20 px
枠線:0 px
アウトライン:0 px
float:none / left / right
clear:none / left / right / both
overflow:visible
□ 文字色:黒
□ 背景色:白
フォントファミリ:Arial / Times
フォントスタイル:normal
□ フォントサイズ:10~20 / 22~30 px
行の高さ:1.0~1.5
□ テキストの配置:left / right / center
テキストの装飾:none
□ 上下の整列:baseline
リストのスタイル:none / disc(黒丸)
□ テーブルの枠線:collapse




■ Flsgs

  fmth_002s.png

□ 入れ子のサブ要素にも適用:
□ 優先度(重要)を適用:




クイックスタイル


■ クイックスタイル
 

・各[クイックスタイル]ボタンは、グループ(複数プロパティ)を一括チェックします。
 
・グループのすべてが有効な [クイックスタイル] のボタンは 緑色になります。
 
・グループの一部が有効な [クイックスタイル] のボタンは 琥珀色になります。
 
・琥珀色状態のボタンをクリックすると、グループのプロパティは
  すべてチェックされ ボタンも 緑色になります。
 
・緑色状態のボタンをクリックすると、グループ内のすべてのチェックがはずされ
  ボタンは着色なし(無効)になります。


  fmtr_22s.png



■ プレーンテキスト
fmth_03ss.png


文字色:黒
背景色:白
フォントファミリ:Arial / Times
フォントサイズ:10~20 / 22~30 px
行の高さ:1.0~1.5
テキストの配置:left / right / center





■ マージンを縮小
fmth_04ss.png


マージン:0 / 5 / 10 / 15 / 20 px
パディング:0 / 5 / 10 / 15 / 20 px
overflow:visible
テーブルの枠線:collapse





■ ブロックを整える
fmth_05ss.png


左:auto
最上部:auto
float:none / left / right
clear:none / left / right / both





■ 装飾なし
fmth_06ss.png


枠線:0 px
アウトライン:0 px
フォントスタイル:normal
テキストの装飾:none
上下の整列:baseline
リストスのタイル:none / disc(黒丸)





■ コンテンツに合わせる
fmtd_12ssss.png


幅:auto
高さ:auto







■ すべてのチェックをはずす

  fmth_0ss.png

■ すべてチェックする

  fmth_00ss.png




Webページを編集して印刷・保存する「Print Edit」の使い方


 

Webページを編集(不要な部分を消して)から印刷・保存できる Firefox アドオン。
 
Print Edit


ほかのDOM削除系アドオンにない機能 〛
 
要素を"隠す"機能で ページレイアウトに影響を与えない
複数要素を選択後、一括編集ができる



編集開始


 
■ ツールバー上のボタンから起動するのがいちばん簡単です。(デフォルト設定

  PriEd02s.png

■ ボタンの ドロップダウン・メニュー項目

  PriEd01s.png

■ 起動すると編集ツールバー・編集画面が表示されます。

  PriEd03s.png


※ ほかにも、
印刷プレビュー」の「編集」ボタンから起動
※ ページの右クリックメニュー → 印刷 →「Print Edit」から起動
※ と.. 起動方法は いろいろあります。



選択方法


 
■ 編集ページ上でマウスを動かすと、赤い枠が出てきます。(ブロック要素上で)
 
■ その枠内をクリックすると、枠線が点線に変わり選択が確定されます。
もう一度同じ枠内を クリックすると枠の選択が解除されます。

  PriEd_7ss.png  PriEd_8ss.png

■ 選択部分の確定後に 次の選択をすることができるので、
    選択部分を複数指定できます。

  PriEd_9s.png

■ マウスドラッグで 複数要素を一緒に選択・選択解除できますボックスをキャプチャ

  PriEd_3s.png  PriEd_2s.png

※ [Ctrl]キー + マウスドラッグで選択すると 複数要素を選択解除
※ [Shift]キー + マウスドラッグで選択すると グラフィック要素のみを選択できます。

 
■ 選択が確定したら以下の各種メニューボタンを選択することにより
  (編集メニューがアクティブに変わり)編集が可能になります。



編集ツールバー


■ 選択メニュー 選択解除
 

[選択メニュー](未選択時):すべて選択
[選択メニュー](未選択時):グラフィックを選択


  PriEd05s.png
 

[選択解除]:全ての選択を解除


  PriEd06s.png


■ 要素を 隠す 削除
 

[隠す]:選択した要素を隠します。(ページのレイアウトに影響を与えません)
[削除]:選択した要素を削除します。(レイアウトに影響を与えることがあります)
[他の要素を隠す]:選択した要素以外を全て隠す。(レイアウトに影響を与えません)
[他の要素を削除]:選択した要素以外を全て削除する。(レイアウトに影響します)


  PriEd07s.png

□ [他の要素を削除]ドロップダウン・メニュー(機械翻訳しただけなので?)
 

[制限]:上位レベル要素からの 位置・サイズ制限を適用します。
[... Without Margins]:上記と同じですが、選択した要素から余白を削除します。
[制限解除]:上位レベル要素からの 位置・サイズ制限を削除します。
[... Without Margins]:上記と同じですが、選択した要素から余白を削除します。


  PriEd08s.png


フォーマット(選択した要素のCSS定義を変更)

■ 元に戻す(やり直す 一つ前の操作に戻る) すべて元に戻す

  PriEd_0s.png

ファイルに保存

  PriEd10s.png

■ テキスト要素(テキストの個々の選択や編集が可能に..)

  PriEd11s.png

■ Webスタイル (CSSプリントスタイルシートを適用/無効に?)

  PriEd12s.png

■ プレビュー

編集が終わったらプレビューボタンをクリックして印刷プレビュー画面を表示します。

PriEd_1s.png

あとは、普通に印刷する時と同じです。
もう一度編集作業を行うときは、右上の編集ボタンをクリックします。


 
  PriEd_4.png

□ 編集が終了したら左上の印刷ボタンをクリック

  PriEd_5.png

■ 閉じる(編集ウィンドウを閉じて「Print Edit」を終了します)



 

プロパティ確認


■ 選択した要素のCSSプロパティ値を 右クリックで確認

  PriEd_6s.png


フォーマット


■ 選択した要素のCSSプロパティ値を変更することがきます。

  fuyh_0sss.png



名前を付けて保存


編集されたウェブページは、[Save As]ボタンをクリックして、
ファイルとして保存することができます。


Saving Edited Pages
 
An edited web page can be saved as a file by clicking on the Save As button.
 
The save page feature provides access to all of Firefox's standard save methods. It is also compatible with the Mozilla Archive Format (MAF) add-on, which provides access to MAF's own save methods and to the UnMHT add-on's save methods.
 
Note that saving as "Web Page, complete" always uses Firefox's standard save method, and ignores MAF's "When saving complete web page contents" option.
 
The best results are obtained by using the UnMHT add-ons's save methods, but the other methods also usually give good results.
 
When closing Print Edit, there is an option for the user to be asked whether to close without saving the edited web page.
 
When re-editing a saved edited web page, the user will be asked whether to retain or discard the edits from the previous session.



■「UnMHT」か「MAF」をインストールすれば mht ファイルで保存できます。

  hzon02s.png


■「MAF」をインストールすれば maff ファイルで保存できますMozilla Archive Format

  hzon01s.png


■「Print Edit」からの「名前を付けて保存」では、「MAF」オプション 設定は無視され
     mht maff とも「ブラウザの標準機能を使う」での出力となります。

▼ MAF(Mozilla Archive Format)オプション

  savpm01s.png
完全な Web ページの保存:
 
ブラウザの標準機能を使う
○ "Save Complete"を使いスクリプトとソースを維持する(Firefox 19.0 使用不可)
○ ページの忠実なスナップショットを取る
 
    □ 他のブラウザと完全に互換性のある MHTML ファイルを作成する

アプリケーションキー から「ScrapBook」へ保存もできます



オプション設定


 
■ ボタン:既定のアクション (印刷... / 印刷プレビュー / Print Edit)
■ ツールバー:ツールバーのレイアウトをコンパクトにする
■ コマンド:「隠す」後に要素を選択可能にする
■ コマンド:「元に戻す」後、ボックスの選択を再開する
■ コマンド: 閉じる際の保存について尋ねない

  PriEd21s.png

■ ハイライトボックス(選択時)

枠線の色と線の太さを設定します。


■ 選択ボックス(選択確定時)

枠線の色と線の太さを設定します。


■ ボックスをキャプチャ(複数選択矩形)

枠の色と領域の不透明度を設定します。
 
Web ページの端までのスタートポイント位置:
キャプチャボックスのスタートポイントがエッジにスナップされる距離を設定します。
(キャプチャ領域の開始点は、Webページの端に近い場合は、エッジにスナップします)





キーボード操作


■ キーボードショートカット

-------------------------------------------

【(Alt)】+
 
【Deselect(S)】
【Hide(H)】
【Delete(D)】
【Hide All Except(I)】
【Delete All Except(E)】
【Format(F)】
【Undo(U)】
【Undo All(N)】
【Save As(A)】
【Text (T)】
【Web (W)】
【Preview(P)】
【Close(C)】

-------------------------------------------

• Deselect - Return key.
• Hide - Insert key.
• Delete - Delete key.
• Undo - Backspace key.

-------------------------------------------

• アプリケーションキー:Firefox コンテキストメニュー




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



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




Webページ印刷に便利「Nuke Anything Enhanced」使い方


 
「Nuke Anything Enhanced」使える機能

[ Remove everything else ]:選択範囲以外を削除します。
[ Remove selction ]選択範囲:選択範囲を削除します。

※ ほかの機能はこちら



■ 選択反転 右クリックメニューから

NukeAn01s.png

■ [ Remove everything else ] で選択反転した部分以外を削除します。

NukeAn02s.png

■ [ Remove selction ] で選択反転した部分を削除します。

NukeAn03s.png




■ ほかの使えないメニューは「Menu Editor」で消します。

ghytfaf.png




【 メニューの日本語化 】( 英語 イラッとする人用 )

ダウンロードページへ行き 右クリメニューから「名前をつけてリンク先を保存」

NukeAn04s.png

■ ダウンロードした xpiファイル(zipファイル)を解凍します。

NukeAn05ss.png

拡張子を zip に変えて解凍するか eo 等で解凍



■ nukeanything.dtd ファイルを書き換えて メニューを日本語にします。

〚 nukeanything.dtd ファイルのパス 〛
nuke_anything_enhanced-1.0.2-fx+sm\chrome\nukeanything.jar\locale\en-US\nukeanything\nukeanything.dtd

□ nuke_anything_enhanced-1.0.2-fx+sm フォルダ
NukeAn06as.png
□ chrome フォルダ
NukeAn06bs.png
□ nukeanything.jar フォルダ
NukeAn06cs.png
□ locale フォルダ
NukeAn06ds.png
en-US フォルダ
NukeAn06es.png
□ nukeanything フォルダ
NukeAn06fs.png
■ nukeanything.dtd ファイル



■ nukeanything.dtd ファイルを「さくらエディタ」で開き

NukeAn07s.png

■ メニュー項目を適当な文字にかえます。

NukeAn08cs.png

■ 文字コードを「UTF-8」で上書き保存します。

NukeAn09s.png




■ [nuke_anything_enhanced-1.0.2-fx+sm] フォルダ内の
 
[chrome] [defaults] フォルダ [chrome.manifest] [install.rdf] ファイル
    を zip ファイルにまとめます。

NukeAn10s.png

■ [chrome.zip] の出来上がり

NukeAn11as.png

■ [chrome.zip] を [nuke_anything_enhanced-1.0.2-fx+sm.xpi] へ リネーム

NukeAn12as.png

※ かんたん拡張子変更ソフト「CHANGE ext.



■ インストール前に

□「Nuke Anything Enhanced」を すでにインストールしている方は 削除します。
□ 削除できない場合は 手動で削除します。


■ [nuke_anything_enhanced-1.0.2-fx+sm.xpi] を
    FirefoxウインドウへD&Dしてインストール


 
oos.png



Page Hackerを使ってWebページを編集


閲覧中のWebページをブラウザ上で編集できる
Firefoxアドオン「Page Hacker
Web ページを印刷する前の編集
ScrapBookでページを保存する前に編集する
テキストエディタとして使う(空のタブで利用)など様々な用途につかえます。

Page_Hacker1s.png



【 使用方法・できる事 とか 】


■ ツールバーに追加したドクロアイコンのクリックか
   [Ctrl+F2]キーで編集モードが有効/無効になります。

sbf0002s.png
 
---------------------------------------------------------------------------------
 
・Webページの画像の移動、サイズ変更
・Webページにテキストを追加、削除、配置を変更
・テーブルも行の追加、削除、サイズ変更もできます。

・他のサイトを開き、もってきたいコンテンツをコピー、ペーストできます。
 (CSSとかは飛んでしまいますが、画像などはそのままコピーできます)
 
---------------------------------------------------------------------------------
 
◇ 選択してのち
・[Delete]キーで削除

◇ マウスクリックで表示させたキャレット位置へ
・[Shift]+[Enter]キーで改行が入ります。
・[Enter]キーで段落が入ります。

◇ 右クリメニュー

ph002g.png

---------------------------------------------------------------------------------
 
■ 編集モード 有効/無効の判断( これが 分かりにくい )
・ページをクリックして キャレットが表示されれば 編集モード 有効





【 WYSIWYGエディタとの併用でもう少し高度(?)な編集 】

◇ WYSIWYGエディタへコピペして編集 ⇒ 編集済みデータをコピーして貼り付け

prototype.jsでクロスブラウザなWYSIWIGエディタ - AUSGANG SOFT
elRTE - オープンソースWYSIWYGエディタ for Web


 


[関連リンク]


Page Hacker | Firefox アドオン | Mozilla Japan ダウンロード
Page Hacker - Firefox更新情報 Wiki*

閲覧中のWebページをブラウザ上で編集できる Page Hacker 1.2 | FOX x FOX
画面レビューにめちゃくちゃ便利なFireFoxプラグイン - EC studio 技術ブログ
最近入れてみて、おぉ!と思った Firefox アドオン 4 つ | バシャログ。
Page Hackerでwebページ内の文字列を変更 - YouTube
資料作りに便利なツール - NHN Japan ディレクターブログ
Evernoteを使うなら絶対に知っておくべき神アドオンの使い方 - MakeWebService
編集したwebページのevernoteへの取り込みと確認 - YouTube

Mozilla Re-Mix: Firefoxに"Dreamweaver"ライクなHTMLエディタ「Codetch」

ブックマークレット Webページ 編集 - google
Mozilla Re-Mix: webページ上で選択部分のHTMLソースを編集「SourceEditor」
Mozilla Re-Mix: ページを自在に編集できるブックマークレット。
Mozilla Re-Mix: ページを自由自在に編集してソースを取得できる「Edit Page」
Mozilla Re-Mix: 要素を自由に動かせるブックマークレット「Liquid Page」
ページ編集モード :: ブックマークレット
窓の杜 - ページを編集した上で印刷できるブックマークレット“Print Friendly”
不要なものを消去::ブックマークレット
ウェブサイトの制作・検証に役立つブックマークレット集 | コリス
[ajax]quickedit - HTMLリアルタイム編集(ブックマークレット)
不要な部分を消してからプリントできる便利なブックマークレット | kotaログ






プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム