Firefox 24.0 にアップデート したら 印刷設定が ・・・


Firefox 24.0 にアップデート したら 印刷設定等が 初期状態に戻ってしまった..

ので 自分用に戻しました..




Firefox22.0 アップデートで ブックマークサイドバーが...


Firefox22.0 にアップデートして
ブックマークサイドバーの表示がおかしくなってしまった場合の対処法
 
自分の環境の場合、下のふたつを適用することで 以前の状態に戻った気がします..


■ FirefoxのUIやフォントを含む要素の表示サイズを調整

22.0の表示が、大きくなって画像がぼやける... - MozillaZine.jp フォーラム
FirefoxのフォントやUIなど全ての要素を拡大・縮小する方法。 - Mozilla Re-Mix


 
(1)ローケーションバーに about:config と入力して [Enter] キー押下。
(2)警告文をよく読み、[細心の注意を払って使用する] ボタンを押下。
(3)開いた画面の [検索] 欄に layout.css.devPixelsPerPx と入力。
(4)下欄に、同名の設定項目が表示される。初期値は -1.0 。
(5)この設定名をダブルクリックするか
(5)[右クリック] -> [値を変更] で設定ダイアログを開く。
(6)入力欄に 1.0 と入れて(あるいはマイナス記号を削除して)
(6)[OK] で閉じる。(変更すると項目行が太字になる)
(7)about:config のタブを閉じ、念のため Firefox を再起動。

■ FirefoxのUIのフォントサイズを調整(数値は環境により変わります)

firefoxのバージョンを22にしたらテキストサイズやら何やら... - だましだまし
Firefoxのユーザインタフェース(UI)のフォントサイズを指定する - 歌うキツネ
Firefox各部のフォントを変更する方法。 - Mozilla Re-Mix



Stylish 用ユーザースタイル・例
/* 全てのUIのフォントサイズを指定する */
* {font-size: 14px !important;}

 
※ 例・その2
/* 個別UIのフォントサイズを指定する */
menubar,/* メニューバー */
menubutton,/* ボタン */
menulist,/* リスト */
menu,/* メニュー */
menuitem,/* アイテム */
textbox,/* テキストボックス */
toolbar,/* ツールバー */
.tab-text,/* タブテキスト */
tree,/* ツリー */
tooltip,/* ツールチップ */
sidebarheader,/* サイドバーヘッダ */
statusbar/* ステータスバー */
{font-size: 14px !important;}




追記:Firefox25.0 アップデートで 行間が広くなってしまったのでそれに対応
 

firefox 25 サイドバー 行間 - Google 検索
Firefox 25.0 - 脳脂肪のパクリメモ


treechildren::-moz-tree-row {
height:1.4em !important;
border-width:1px !important;
}

menubar,menubutton,menulist,menu,menuitem,textbox,
toolbar,.tab-text,tooltip,sidebarheader,statusbar {
font-size: 14px !important;
}

tree {font-size: 13.2px !important;}





Web ㌻ を「Clearly」で整形して ScrapBook に保存する方法


Webページ(html)を「Clearly」で整形して ScrapBook に保存する方法


Firefox アドオン「Clearly」は
閲覧中のWebページから広告やリンクを消して、
ブログやニュース記事を読みやすく表示してくれます。


 
Firefox で ページを表示
○○○
Clearly でページを整形
○○○
■ ページを「すべて選択」⇒ ScrapBook で「選択範囲を保存
○○○
■ [保存ページ] を DOMイレーサーで編集(ほか 編集ツール
すべてのFRAMEタグを削除」でゴミ掃除(必須)
ScrapBook の「保存」ボタンで変更の保存
○○○
■ 不要ファイルを削除するために 右クリックメニューから
  「ページを保存」でページの再保存を行います。
○○○
■ 最初の[保存ページ](再保存前ページ)を削除して終了
 
  ※ 再保存ページのアイコンが表示されなくなった場合





「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 コンテキストメニュー




htmlを「Print Edit」で編集して ScrapBook に保存する方法


 

Webページを見たまま保存できる「ScrapBook」が
 
Webページのレイアウトを変えずに 編集できる「Print Edit」を使うことで
 
最強の Webページ保存ツールになるっ!
 
と..思います..

追記:現在のバージョンではこの方法↓が使えなくなりました。



Webページを「Print Edit」で編集して ScrapBook に保存する方法


 
Print Edit」って 印刷専用と思ってたら 普通に ScrapBook に保存できました。

 
■ Print Edit を起動中に キーボードの アプリケーションキー を押すと

  mkey.jpg

■ Firefox のコンテキストメニューが表示されので あとは
    ScrapBook 保存項目を選択するだけです。

  cmnus.png



描画比較


 
■ Firefox で表示したページ■「ScrapBook」で保存したページ

  Print Edit _1s  Print Edit _2s

■「Print Edit」で編集後「ScrapBook」で保存したページ

  Print Edit _3s



他の保存形式の描画比較


 
※「Print Edit」の保存機能からの保存(Firefox の「名前をつけて保存」ではありません)
 


mht ファイル( mhtファイルの問題点 )※ 設定:ブラウザの標準機能を使う
maff ファイル( Mozilla Archive Format )※ 設定:ブラウザの標準機能を使う
 
    元のページと微妙にちがいます。

  PE4s.png



■ IE で表示したページ○○○ ■ mht ファイルを IE で表示

  iest01.png  iesht02s.png



※「UnMHT」で作成した mht ファイルを Firefox で表示 ScrapBook で保存すると
    画像が保存されません。(MAFで保存した mht maff ファイルは問題ありません)

  PE6s.png    peged03s.png

※ 設定で対応できるのかも?



他の保存形式とのサイズ比較


保存サイズ 】(編集なしで保存)

■ mht maff ファイル(1,087KB)(395KB)

  h06_65ss.png

 
■ mht maff ファイルを Firefox で表示
    ScrapBook で「ページを保存」(29個 333KB)

  peged05ss.png

 
■ Webページを ScrapBook で「ページを保存」(49個 408KB)

  peged04ss.png



maff ファイルとの比較


 
■ maff で保存すると スクリプトを含めた保存ができます(ある程度完全な?)

  h06_53s.png

■ maff(zip圧縮)を解凍すると..(395KB → 945KB)

  h06_56s.png

□ index_files フォルダ

  h06_57us.png
 

□ index.html をダブルクリックして IE で表示(解凍すればIEで表示できます)

  PE5s.png



■ ScrapBook で「ページを詳細に保存」
 
■ JavaScritpをチェック

h06_58ss.png

■ 63個 1.71MB になります。

h06_59s.png

■ maff で保存したページを Firefox で表示し、ScrapBook で「ページを詳細に保存」
    47個 1.75MB(なんでサイズが大きくなるの?)

h06_52ss.png




mhtファイルの問題点 】

・テキストファイルである
・オフラインでは再現性が落ちる


【mht(*.mht)で保存】

リンクや画像などの参照先が絶対パスになるのでオフラインでは見れない。


【Webページ、完全(*.htm,*.html)で保存】

htmlの他に画像やCSS、JSファイルなど付随するファイルを階層を保持したまま一緒に保存されるので、オフラインでも見れる。
ただし、完全に再現出来ないサイトもある。
リンクが絶対パスの場合はオフラインでは閲覧不可。


【Webページ、HTMLのみ(*.htm,*.html)で保存】

オフラインでもページ自体は閲覧可能だが、付随する画像やCSS、JSファイルやその他のバイナリファイルなどは一緒に保存されないので、
画像なし、テキストのみ、レイアウト崩れといったページになる。


 
90s.png
EcoMhtEd 2 で外部参照確認
 
    最近のやつは 問題ないのかも?




「名前を付けてページを保存」(MAF)との比較


 
■ Firefox の「名前を付けてページを保存」(MAF)との比較

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

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

■ サイズ比較

  savpm04xsss.png


□ Firefox の「名前を付けてページを保存」(MAF使用)
 
・ブラウザの標準機能を使う
"Save Complete"を使いスクリプトとソースをを維持する
・ページの忠実なスナップショットを取る
 
・ブラウザの標準機能を使う
・他のブラウザと完全に互換性のある MHTML ファイルを...
maff 保存
maff 保存
maff 保存
 
mht 保存
mht 保存
385KB
2,028KB
318KB
 
1,036KB
640KB

 
□ 他
 
・Print Edit で(ブラウザの標準機能を使う) ○○○○○○○
・Print Edit で(ブラウザの標準機能を使う)
 
・ScrapBook で「ページを保存」(スクリプト保存なし)
・ScrapBook で「ページを詳細に保存」
maff 保存
mht 保存
 


395KB
1,087KB
 
333KB
1.75MB


 
■ 描画比較

・ブラウザの標準機能を使う [mht maff](△ 問題ないレベルですが)
"Save Complete"を使いスクリプトとソースを... [maff](○× ↓表示できない部分有)
・ページの忠実なスナップショットを取る [maff](○)
 
・他のブラウザと完全に互換性のある MHTML ファイルを作成する [mht](○)



■ スクリプト保存 ページの再現性 比較

・ブラウザの標準機能を使う [mht maff](ある程度完全にスクリプト保存)
"Save Complete"を使いスクリプトと...[maff](取り込みすぎて?表示できない部分有)
・ページの忠実なスナップショットを取る [maff](一部のスクリプトのみ保存)
 
・他のブラウザと完全に互換性のある MHTML ファイルを作成する [mht](同上)





□ ブラウザの標準機能を使う(maff mht ファイル)

  PE4s.png  iesht02s.png
 
○○○○○○○○○○○○○○▲ mhtファイルをIEで表示

□ ページの忠実なスナップショットを取る(maff ファイル)
他のブラウザと完全に互換性のある MHTML ファイルを作成する(mht ファイル)

  pgsto.png  iesht01s.png
 
○○○○○○○○○○○○○○▲ mhtファイルをIEで表示

"Save Complete"を使いスクリプトとソースを維持する(maff ファイル)

  Save Complete



IEで保存した mhtファイル


■ IEでページを mht で保存し IEで表示

  iesht05s.png

■ IEでページを mht で保存し Firefox で表示

  Save Complete

EcoMhtEd 2 で外部参照確認 すると「外部参照はありません」と出ますが、
    View Dependencies で依存関係を調べると..

  iesht06s.png

□ EcoMhtEd 2 で保存ファイル確認

▼ IEで mht 保存○○○○ ▼ Firefox で mht 保存
 
hhjufgfjs.png




ScrapBook ページ編集後の「再取り込み」(再保存)に注意!


ScrapBook ページ編集後の「再取り込み」(再保存)に注意!

再取り込み
 
以下の方法で前回保存したページを最新のページで上書きすることができます。

・ツリー アイテム右クリック → [ツール] → [再保存...]
・保存ページを開き、アドオンバーアイコンをクリックして[再保存...]を選択


※ [再保存...]を中クリック:再保存詳細ダイアログを表示せずに再保存
※ index.htmlだけでなく、掘り下げ取り込みによって保存された
    深さ1以上の特定のページのみを再保存することもできます。
※ ブックマーク形式のアイテムの再保存も可能です。



っつう ことですが..
これを 編集したページに適用してしまうと
せっかく手間隙かけて整形・編集したページが あっという間に、
無、になってしまいます。
ので 気ーつけてください。




■ ツリー アイテム右クリック → [ツール] → [再保存...]

  sb018es.png

■ 保存ページを開き、アドオンバーアイコンをクリックして[再保存...]を選択

  edit_7es.png




ScrapBook 再保存ページで「ソースURLを開く」 方法


 

ScrapBook で保存したページを 再度 ScrapBook で保存(再保存)すると
 
再保存したページの「ソースURLを開く」では
元ページ(ローカル)が開いてしまいます。さらに、
 
再保存した 元ページを削除してしまうと 下のように怒られます。


  sbd03s.png



【 ソースURLを開く 】

  sbd01s.png

  sbd02s.png

※ 中クリック:新しいタブでソースURLを開く



プロパティのURLを書き換える


 
■ 元ページを削除する前にソースURLを開き URLをコピーしておきます。

■ アイテムの右クリックメニューから [プロパティー] を選択

  sbd04hs.png

■ URL:にソースURLを貼り付けます。

  sbd05hs.png



ページに URLを埋め込む


 
Page HackerMake Link を使い 再保存したページにURLを埋め込みます。
■ 元ページを削除する前にソースURLを開き Make Link でURLをコピーしておきます。
○○○○
Page Hacker を使い ページを編集可能にします。
○○○○
■ 適当な場所にURLを貼り付けます。
○○○○
■ Page Hacker 編集モードを無効にして ScrapBookで「変更の保存」をします。

Make Link のリンク形式 フォーマット 例 (適当にカスタマイズしてください)
 
<div><a href="%url%" target=”_blank” title=”リンク”>%text%</a></div>




Webページ(html)を保存して直接編集(高度な)する方法


Webページを ScrapBook で保存し、
index.htmlStyleNote5 で開いて 高度な編集を行います。


StyleNote5 の すごいところ
 

文字化けしない(UTF-8対応)
・index.html を StyleNote5 アイコンにD&Dするだけで編集可能になります。
HTMLとCSSの編集が高度に融合し、効率的な作業環境を実現
 
・インストールは zipファイルを 適当なディレクトリに展開するだけ
・もちろんレジストリもいじりません
   (設定ファイルはマイドキュメントの「StyleNote」フォルダに保存)


Webページ(html)を保存して直接編集(高度な)する方法
Firefox で ページを表示します。
○○○
ScrapBook で ページを保存します。
○○○
■ ScrapBook の データ保存フォルダ を開きます。
○○○
index.html を StyleNote5 アイコンにD&Dして開き 高度な編集
○○○
■ 編集作業が終わったら ScrapBook で確認




■ index.html を

  StyleN00s.png

■ StyleNote5 で開きます

  StyleN000s.png

※ Firebug みたいに 内蔵ブラウザ(ビューア)上から簡単に要素選択できるといいのに...

外部CSSファイルの参照に対応(D&DするだけでCSSが適用され 編集可能に..)

  StyleN0000s.png




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ページ(html)を簡単に ブラウザ上で編集する方法


 
 WebページをFirefoxで表示して そのまま編集する方法
 

Firefoxアドオンを使って Webページを簡単編集
 
編集した後は 印刷するなり保存するなり どんぞご自由に


 

html 知識ゼロでもOK


 
■ 簡単編集

Nuke Anything Enhanced(必要ない部分を消します)
ScrapBook保存前編集 DOMイレーサー(必要ない要素を消します)
Page Hacker (ワープロ感覚で 編集
    ※ 同機能アドオン:wwwDesignMode Webpage Editable Switch


■ 程々編集

HackTheWeb(DOMイレーサーの高機能版?)
Print Edit "隠す"機能でレイアウト崩れなし・複数要素を選択可能
 
Page Hacker Revived(Firefoxをワープロ化する?)




※ 自動整形(読みやすく)

Clearly整形表示 ページを結合


※ 整形ツール
 
  〚 非表示系 〛

Clean the junk(インラインフレーム Flashやバナー画像などを非表示)
Image and Flash Blocker  Hide all Images(画像 Flash の表示、非表示)
Gif Block(GIF画像の読み込みをブロック)
Image Block(「画像を自動的に読み込む」設定をアイコンで切り替える)
NoComment! CommentBlocker(コメント欄を隠す)
FrameExt(フレームを削除する・フレームをDIVタグに置き換える)


  〚 配色変更 〛

Color Transform(要素を選択して配色変更)
Color toggle(文字色/背景色/リンク色を変更)
Blank Your Monitor + Easy Reading(文字色/背景色/リンク色を変更)
NoSquint(文字色/背景色/リンク色を変更)
No Color(背景色とテキストカラーを設定されたシンプルな色に変更 背景画像除く)


  〚 マーカー 〛

Wired-Marker
Prostetnic Highlighter(マーカーのみ96色)
TextMarker! Firefox  TextMarker Go(3種類)





多少の html 知識は必要


 
■ HTMLソース編集

SourceEditor(HTMLソースをブラウザ上で編集)
    ※ 不安定なので..ちょこっと編集に


■ CSS編集

Styles Tuner(指定した要素の色や文字サイズなどを変更)
    stylebot の Firefox版あればいいのに..
 
Stylish (言わずもがな)




※ カラーピッカー

ColorZilla(色の取得・保存)
Rainbow Color Tools(色の取得・保存)


※ HTMLの文法チェック

Html Validator




html 知識は必須


 

スタイルエディタ(スタイルエディタを表示ボタン

Firebug




Webページを「Page Hacker Revived」でワープロ感覚編集


 

Firefox アドオン「Page Hacker Revived」を使うと
 
現在見ているページをワープロ感覚で編集できるようになります。
 
操作方法は ワードパッドのそれと ほぼ同じなので 直感で使えると思います。



フォーマットツールバーの表示


 
■ インストールしたらツールバーに [ツールバーカスタマイズウィンドウ] からD&Dで
  「Page Hacker」アイコンを表示します。
 
    ※ すでに「Page Hacker」をインストールしていても
       「Page Hacker Revived」をインストールすると ツールバー上のアイコンが消えます。


  phr01bs.png

■ アイコンをクリックすると機能が有効になり
  「フォーマットツールバー」が表示されます

  phr02bs.png

※ ツールバーの右クリックメニューにも「フォーマットツールバー」項目が追加されます


 

フォーマットツールバーの各機能


 
■ フォーマットツールバー(ボタンはD&Dでカスタマイズ可)

  phr03s.png


■ 名前を付けて保存 / 元に戻す(無限?) / やり直す

  phr03as.png

■ フォント / フォントサイズ / フォントサイズ減・増

  phr03bs.png

■ 太字 / 斜体(?)/ 下線 / 抹消線

  phr03cs.png

■ フォント色 / 選択色 / 背景色

  phr03ds.png

■ 左寄せ / 中央寄せ / 右寄せ / 両端揃え / 下付き文字 / 上付き文字

  phr03es.png

■ 黒中点リスト挿入 / 順序リスト挿入

  phr03fs.png

■ 字下げ(<blockquote>の挿入)/ 字上げ(<blockquote><ol><li>タグの削除?)

  phr03gs.png

■ リンク挿入 / 画像挿入 / 水平罫線挿入

  phr03hs.png

■ フォーマット除去 / リンク除去 / ツールバー非表示

  phr03is.png




■ フォント / フォントサイズ メニュー

  phr05s.png



■ フォント色 メニュー

  phr06bs.png



■ リンク挿入 / 画像挿入 ダイアログボックス

phr07s.png




ScrapBook アイテムアイコン(favicon)の変更


 

サイドバーのツリーアイテムアイコンを 好きなアイコンに変えたい場合や
 
favicon が取り込めない、保存されないため アイコンがデフォルトになる場合には
 
アイテムの [プロパティー] から 手動で favicon を指定します。



アイコン(favicon)の変更



■ アイコンを変えるには、アイテムの右クリメニューから [プロパティー] を選択

  sb011s.png

〚 変更メニュー 〛

・デフォルト○○○○○○○ :デフォルト(fav02bs.png)アイコンに変えます。
・faviconを選択...○○○○ :データ保存フォルダを開きます。
・ユーザーアイコンを選択... :iconフォルダを開き favicon を指定します。
・URL...○○○○○○○○○ :現在のアイコンを確認(?)


     ※ マーク:アイテム文字が太字になるだけ(?)


 
  fav01ys.png

■ faviconを選択(保存ページのフォルダ)

  fav05s.png

■ ユーザーアイコンを選択(アイコン保存用フォルダ)

  fav03s.png

■ URL(アイコンの場所 確認)

  fav04s.png




■ index.dat ファイル(プロパティーで表示されるデータ?)

  fav06s.png



簡単に アイコン(favicon)を保存して アイコンを変更


Bookmark Favicon Changer で favicon を保存

  favc01s.png

■ ScrapBook の ico フォルダを指定

  favc02.png

■ ScrapBook ico フォルダに favicon を保存して

  favc03.png

■ アイテムの右クリメニューから [プロパティー] を選択
    [ユーザーアイコンを選択...] から iconフォルダを開き favicon を指定します。



ScrapBook 再保存ページの 差分確認方法


Firefox アドオン「PageDiff」を使って簡単確認
 
閲覧ページに変更があった部分をHTMLで差分表示します


〚 使い方 〛
 
比較したいページA のページ上で右クリックして、「Start DIFF」 を選択。そして、
比較したいページB のページ上で右クリックして「Show DIFF」を選択すると
専用ウインドウが開き、変更された行を赤く表示します。

  kbos.png





Webページ(html)を簡単に結合して保存・印刷する方法


Webページ(html)を結合して保存・印刷する方法


Firefox アドオン「Clearly」は
クリックひとつで、複数ページに分割された記事を1ページにまとめてくれます。
 
※ 分割された記事 専用テクです。さらに、レイアウトが崩れる確率も高いです。


 
Firefox で ページを表示
○○○
Clearly でページを結合
○○○
■ ページを「すべて選択」⇒ ScrapBook で「選択範囲を保存
○○○
■ [保存ページ] を DOMイレーサーで編集(ほか 編集ツール
すべてのFRAMEタグを削除」でゴミ掃除(必須)
ScrapBook の「保存」ボタンで変更の保存
○○○
■ 不要ファイルを削除するために 右クリックメニューから
  「ページを保存」でページの再保存を行います。
○○○
■ 最初の[保存ページ](再保存前ページ)を削除して終了
 
  ※ 再保存ページのアイコンが表示されなくなった場合
 
-------------------------------------------------------------------------------
  □ ページを任意の場所で 改ページ 印刷する方法
○○○
■ ページを Firefox の 印刷プレビュー で確認 印刷





■ ページを「すべて選択」⇒ ScrapBook で「選択範囲を保存」
[保存ページ] を DOMイレーサーで編集

Clearly01.png

■「ページを保存」でページの再保存

Clearly02.png

■ ページの再保存前ファイル数 135個

Clearly03.png

■ ページの再保存後ファイル数 30個

Clearly04.png




ScrapBook 保存ページの 画像リンク確認方法


 
ScrapBook 保存ページの ローカルファイルへの画像リンク確認方法

View Dependencies」は、Firefoxの [ページの情報] を開いた際、
新たに [依存関係] という項目を 表示させることができるアドオンです。

これを使えば、保存ページの ローカルファイルへの画像リンク確認ができます。
 
※ 注意:実際にファイルが存在するのかまでは 確認できません。



■ Firefox(ScrapBook)の右クリックメニューから [ページの情報] を開き

  Dep01ss.png

■ [依存関係] タブで画像リンク確認

  Dep02s.png

■ コンテキストメニューからも表示できます。

  rrs_20130329161300.png




Webページ(html)を結合して保存・印刷する方法


 
Webページ(html)を結合して保存・印刷する方法
 

ScrapBookの「結合ウィザード」を使わずにページを結合保存する方法
 
をまとめただけの記事ですが..


Firefox で ページを表示します。
○○○
ScrapBook で「選択範囲を保存」し、
ScrapBook アイコンをクリックして サイドバーを表示させ [保存ページ] を開き、
Page Hacker アイコンをクリックして編集機能を有効にします。
○○○
■ Firefoxで [結合させたいページ] を表示させ 必要部分を 選択反転 右クリコピー
○○○○○○○(必要回数 繰り返します)
■ ScrapBook の [保存ページ] を表示させ
貼り付けたい場所をクリックして キャレットを表示させ 右クリメニューで貼り付け
○○○
■ 結合作業が終わったら Page Hacker の編集モードを無効にします。
○○○
□ [保存ページ] を Nuke Anything Enhanced DOMイレーサー Page Hacker 等で編集
○○○
■ ScrapBook の「保存」ボタンで変更の保存
○○○
■ 結合したページの画像ファイルを保存するために 右クリメニューから
  「ページを保存」でページの再保存を行います。(ローカルファイルへのリンク確認
○○○
■ 最初の[保存ページ](再保存前ページ)を削除して終了
 
※ 再保存ページのアイコンが表示されなくなった場合
 
-------------------------------------------------------------------------------
ページを任意の場所で 改ページ 印刷する方法
○○○
□ ページを Firefox の 印刷プレビュー で確認 印刷


ScrapBook ページ編集後の「再取り込み」に注意!



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



ScrapBook の DOMイレーサー の使い方


DOMイレーサー
 

DOMイレーサーによって、取り込んだWebページ中の不要な部分を
HTML要素単位で削除することができます。


〚 使い方 〛
 

(1) 編集ツールバー edits.png アイコンをクリック(マウスポインタが十字型になります)
(2) 赤枠内をクリックすると その要素が削除されます
(3) 右クリックでクリックした要素以外を削除(DOMアイソレータ

■ 取り込み前にもこの機能は使えます(保存前編集モード
edit_us.png をクリックして、削除した操作を一回だけ元に戻すことができます。
 
※ DOMイレーサーは、マーカーによるハイライトをひとつずつ解除できます。





■ 編集ツールバーの表示

ツールバー の ScrapBook アイコンをクリックして サイドバーを表示して
取り込んだページを表示すると ページ下部に編集ツールバーが表示されます。


  edit_0s.png

編集ツールバー


 
  edit_2s.png

編集ツールバーの表示/非表示を切り替えるには、
アドオンバー の アイコンをクリックして、[編集ツールバー] を選択してください。


  edit_7s.png



アドオンバー の ScrapBook アイコンをクリック
メニューから「保存前編集モード」を選択すると、編集ツールバーが表示されます。


  edit_1s.png




■【DOM】アイコンをクリックして DOMイレーサーを有効にする

  edit_3s.png

DOMイレーサーが有効になると、
画像やテキストなどにカーソルを近づけると赤い線で囲まれます。
囲まれた部分を 左クリックすると その範囲を削除でき
囲まれた部分を 右クリックすると その範囲以外を削除できます。


  edit_6s.png

■ 修正したい場合は、右横の【元に戻す】アイコンをクリックします。

  edit_4s.png

■ 作業が終了したら【DOM】アイコンをクリックして DOMイレーサーを無効にします。

■ 編集作業が終了したら、【保存】アイコンをクリックして内容を保存します。

  edit_5s.png

※「保存前編集モード」中にクリックすると ScrapBook に保存されます。
    選択反転させていれば その部分のみ「選択範囲を保存」されます。



DOMアイソレータ(クリックした要素以外が削除されます)

・DOMイレーサーで右クリック
・Shiftキーを押しながらDOMイレーサーでクリック




■ 要素を選択できない場合(リンクをクリックしてしまい)

・とりあえず「HackTheWeb」を使ってみる(「e」キー赤枠の範囲を広げる )




■ ほかの編集機能

□ 選択範囲をカット
 
  edit_11s.png

 
  edit_12s.png

□ 選択範囲をカット
 
□ すべてのSCRIPTタグを削除
□ すべてのIFRAMEタグを削除
 
  ( 関連記事:ScrapBook の「すべてのFRAMEタグを削除」でゴミ掃除



Webページを分割印刷する方法・高解像キャプチャー編


画像キャプチャー印刷は簡単でいいけど もう少しきれいに印刷したい 方には
 
WebページをPDF化して PDFページを画像キャプチャーして印刷する方法 がおススメ
 
写真等は擬似的に解像度が上がるだけですが、文章部分の解像度は上がるので
文章部分はきれいに印刷できると思います。
ひと手間かければ 画像も高解像で印刷できます)

こちらの記事 をまとめただけの記事です。


 
Webページ(html)を分割印刷する方法・高解像キャプチャー編
 
Firefox でページを表示
○○○
    □ 指定場所で 改ページ(必要ない方はパス)
○○○
Print pages to Pdf仮想プリンタ 等でPDFファイル化します。
○○○
PDF-XChange Viewer PRO でPDFファイルを開き
新規ドキュメントの作成(用紙・枚数の選定)
○○○
■ [ スナップショットツール ] を使い、選択した領域をコピー(コピー解像度の設定
 
    □ Web ページの画像を直接右クリックコピー(リンク先に高解像画像があればそれをコピー)
○○○○○
■ プレレイアウトしながら、新規ドキュメントへ貼り付け
○○○
■ マウスドラッグでレイアウト / サイズ調整
○○○
    □ グリッド・ガイドを使い 細かい修正(必要ない方はパス)
○○○
■ PDF-XChange Viewer PRO で新規ドキュメントを印刷します。





■ PDFファイル化

cap01s.png

PDF-XChange Viewer PRO でPDFファイルを開き

cap02s.png

新規ドキュメントの作成

cap03s.png

■ 新規ドキュメントを開き

cap04s.png

スナップショットツールを 適当な解像度に設定

cap10s.png

スナップショットツール でコピー

cap05s.png

■ 新規ドキュメントへ貼り付け

cap06s.png

■ マウスドラッグでレイアウト / サイズ調整

cap07s.png

印刷

cap08s.png

cap09s.png




Webページ(html)を分割印刷する方法・画像キャプチャー編


Webページ(html)を画像キャプチャーすれば簡単に分割印刷できます。が、
画像解像度はスクリーン解像度等に依存するので、
印刷品位は”それなり”ということになります。


Webページ(html)を分割印刷する方法
Firefox でページを表示
○○○
Pearl Crescent Page Saver Basic で「ページ全体をPNGファイルで保存」をします。
○○○
■ 保存したPNGファイルを IrfanView 等で開きます。( 印刷イメージの確認 )
○○○
PDF-XChange Viewer PRO での印刷準備用紙・枚数の選定
○○○
■ 画像の必要部分をクリップボードへコピー
○○○○○
■ PDF-XChange Viewer PRO のドキュメントへ画像を貼り付け 調整
○○○
■ PDF-XChange Viewer PRO で印刷します。


■ キャプチャー印刷に便利なアドオン

 


IrfanView で必要部分をクリップボードへコピー

  copdd.png



PDF-XChange Viewer PRO のドキュメントへ 画像を貼り付け 細かい調整

  xhst.png



■ キャプチャー印刷に便利なアドオン

Default FullZoom Level( ページズーム率を任意の値に変更します )
 
Browsizer(ブラウザのサイズと位置情報を保存し、簡単に呼び出す事ができる)
   (段組み構成にも利用できます)
 
Page Hacker(画像をドラッグして 移動・リサイズできる)
Image Resizer/Scaler(画像を右クリドラッグするだけでリサイズできる)
FlashResizer(ページ内のFlashをリサイズできる)

kwout(選択範囲をキャプチャ)
はてなスクリーンショット拡張(選択矩形範囲をキャプチャ・メモ書きキャプチャ)
Fireshot(選択矩形範囲をキャプチャ・編集可)
Screenshot Pimp(選択矩形範囲をキャプチャ)[日本語非対応]
Screengrab(選択矩形範囲をキャプチャ)
Firefox Abduction(選択矩形範囲をキャプチャ)[日本語非対応]
Awesome Screenshot(編集可)[日本語非対応]
Shooter(選択矩形範囲をキャプチャ)[日本語非対応]
Aviary Firefox
pdfit
キャプチャーイット!ツールバー




Webページ(html)を分割印刷する方法


Webページ(html)を指定場所で 改ページ 印刷する方法 で対応できない場合は、
 
以下の方法で印刷します。
 
タブ毎に、プレビュー確認しなければならず めんどくさいですが..




Webページを分割印刷する方法
Firefox で、同一ページを 分割ページ数分 新しいタブ で開きます。
○○○
Nuke Anything Enhanced で印刷に必要ない部分を消します。
ScrapBookDOMイレーサー で印刷に必要ない部分を消します。
Page Hacker を使い 編集 します。  ※ ほかの編集ツール
 ( 以上 必要ない方はパス )
○○○○○○○
■ 各ページを Firefox の 印刷プレビュー で確認
○○○
■ Firefox で 印刷




Webページを編集して分割印刷する方法
 

上の方法ではページ数が増えると めんどくさいことになるので


Firefox で ページを表示します。
○○○
■ 保存前編集
  □ Nuke Anything Enhanced で印刷に必要ない部分を消します。
  □ ScrapBookDOMイレーサー で印刷に必要ない部分を消します。(保存前編集
  □ Page Hacker を使い 編集 します。  ※ ほかの編集ツール
 ( 以上 必要ない方はパス )
○○○
ScrapBook で 分割枚数ぶん「ページを保存」「選択範囲を保存」します。
○○○
■ ScrapBook アイコンをクリックして サイドバーを表示させ
保存した各ページを 新しいタブで開きます。
○○○
■ 各ページを Nuke Anything Enhanced DOMイレーサー Page Hacker で編集
○○○○○○○
■ 各ページを Firefox の 印刷プレビュー で確認
○○○
■ Firefox で 印刷( ページが多い場合 PDFファイルにしておき 後で一括印刷 )




■ 開いている全てのタブを印刷できる Firefox アドオン「Universal print
 

Universal Print :: Add-ons for Firefox
Mozilla Re-Mix: Firefoxにマルチな印刷メニューを追加できるアドオン
Universal Print - Firefox更新情報 Wiki*





Webページ(html)を指定場所で 改ページ 印刷する方法


Webページを任意の場所で 改ページ 印刷する方法
 
いろいろ考えましたが..
 
簡単にできそうなのは 次の二つ位しか思いつきませんでした..

ブラウザを 編集モードにして改ページ印刷
 
SourceEditor(Firefoxアドオン)で 改ページコードを挿入して 改ページ印刷


 

ブラウザを 編集モードにして改ページ印刷


 
ブラウザを編集モードにして「改行等」を挿入し、任意の場所で改ページ印刷
Firefox でWebページを表示
○○○
ScrapBook アイコンをクリックして ScrapBook をオンにします。
DOMイレーサー で印刷に必要ない部分を消します。( 必要ない方はパス )
○○
Page Hacker で Firefox を 編集モード にします。
○○○
改ページしたい場所に「改行・段落」等の「改ページ コード」を挿入します。
○○○○○○○( 元へ戻す でやり直し )
■ Firefox の 印刷プレビュー で確認
○○○
■ Firefox で 印刷




改ページしたい場所に「改行・空段落」を挿入
◇ マウスクリックで表示させたキャレット位置に

・[Shift]+[Enter]キーで改行が入ります。
・[Enter]キーで段落が入ります。






■ 改ページしたい場所に「改ページ コード」を挿入・例
◇ 下の「改ページ コード」を 改ページさせたい場所に コピペしてください

この部分(一行)を「反転選択」→ コピー
○○○
□□ここで改ページ□□
○○○
「□□ここで改ページ□□」の(一行)全文字を コピペしてください



〚 コピーするコード 〛
<span style="color:#FFFFFF; page-break-after:always;">□□ここで改ページ□□</span>
 
 ※ 注意 こちらをコピーしてもテキストデータしかコピーされません




■ 背景色も印刷すると 上のコードでは、
  「□□ここで改ページ□□」が白抜きで印刷される場合があるので、
◇ 下の「改ページ コード」を 改ページさせたい場所に コピペしてください

この部分(一行)を「反転選択」→ コピー

        

この部分「        」(空白)をすべて(一行)コピーしてください






SourceEditor で 改ページコードを挿入して 改ページ印刷


 
SourceEditor(Firefoxアドオン)で「改ページコード」を挿入して 改ページ印刷
Firefox でWebページを表示
○○○
ScrapBook アイコンをクリックして ScrapBook をオンにします。
DOMイレーサー で印刷に必要ない部分を消します。( 必要ない方はパス )
○○○
SourceEditor アドオンバーアイコンをクリックして SourceEditor をオンにして
○○○
改ページしたい位置のブロックをダブルクリックすると、
    直接 HTMLソースを編集できるようになります。
○○○
■ そこへ「改ページ コード」を挿入
SourceEditor アドオンバーアイコンをクリックして SourceEditor をオフにします。
○○○○○○○( やり直す場合は SourceEditor をオンに )
■ Firefox の 印刷プレビュー で確認
○○○
■ Firefox で 印刷


■ コピペ コード ・例
<span style="page-break-after:always;">&nbsp;&nbsp;</span>
 style="page-break-after:always;"




ScrapBookの保存ページ(index.html)を直接編集する方法


保存ページ(index.html)を StyleNote5 で開き 高度な編集を行います。
 
index.html」を開くだけでCSSが適用され 即、編集可能になるのは
 
この StyleNote5 だけだと思います。(?)


StyleNote5 の すごいところ
 

文字化けしない(UTF-8対応)
・index.html を StyleNote5 アイコンにD&Dするだけで編集可能になります。
HTMLとCSSの編集が高度に融合し、効率的な作業環境を実現
 
・インストールは zipファイルを 適当なディレクトリに展開するだけ
・もちろんレジストリもいじりません
   (設定ファイルはマイドキュメントの「StyleNote」フォルダに保存)






ScrapBookに保存したファイル(index.html)を開く


(補足用ページ)

■ Firefox の右クリックメニューから「ページを保存」

  jjjs.png


■ ScrapBookアイコンをクリックして ScrapBookサイドバーを表示

  jjjffss.png



index.html ファイルを表示させる


■ サイドバー の アイテム右クリックメニュー [ツール] →「ファイルを表示」で..

  murak2s.png

 
  sb018.png

■ 保存フォルダを開くと、そこに index.html があります。

  murak1s.png




ScrapBook のデータ保存先を開く



取り込んだデータはローカルディスクのどこへ格納されていますか?
 
デフォルトではプロファイルフォルダ下の 'ScrapBook' フォルダに格納されます。 'ScrapBook' フォルダの中にある 'scrapbook.rdf' は
取り込んだアイテムのツリー構造を管理するRDFファイルであり、また
'data' フォルダの下には取り込んだ各アイテムが14桁の日時のフォルダで
保存されています。

dataフォルダを開く
アイテムデータフォルダを開く




【 dataフォルダを開く 】

■ ツールメニューから dataフォルダを開く

  sb03s.png

■ dataフォルダ内に、

  sb04s.png


■ 保存日時名でフォルダが作成され、ファイルが保存されています。

  sb05gos.png

  sb05s.png


 


【 アイテムデータフォルダを開く 】

■ 簡単にアイテムデータ保存フォルダを開くには、
    アイテムの [右クリメニュー] → [ツール] → 「ファイルを表示」から..

  sb018.png





Webページの サムネイル画像を きれいに印刷する方法


Webページのサムネイル画像を そのまま印刷すると
低解像のため きれいに印刷できません
 
きれいに印刷したいときは WebページをPDFファイル化して
リンク先の高解像画像を サムネイル画像の上に貼り付けて印刷します。


 
Webページのサムネイル画像をきれいに印刷する方法
 
Firefox でページを表示
○○○
Print pages to Pdf または 仮想プリンタ 等でPDFファイル化します。
○○○
PDF-XChange Viewer PRO でPDFファイルを開き
○○○
■ Webページの画像(リンク先の高解像画像)を 右クリックコピー
画像を画像ビュワー等に貼り付け、その画像をクリップボードへコピー (必ず必要)
○○○○○
PDFページへ貼り付け
○○○
■ マウスドラッグでレイアウト / サイズ調整
○○○
■ PDF-XChange Viewer PRO でWebページを印刷します。





Webページを 用紙いっぱいに 印刷する方法


ブラウザの印刷機能がしょぼすぎるので、
めんどくさいことをしないと 思いどおりの印刷ができません。
 
ページを一旦 PDFファイル化してから印刷すれば
印刷調整も簡単にでき 思いどおり(?)の印刷ができます。
 
けっこう手間がかかりますが、ブラウザから直接印刷するよりは ましかも..


 
Webページを 用紙いっぱいに 印刷する方法
Firefox でWebページを表示
○○○
■ Firefox の印刷機能を使い PDF仮想プリンタ でPDFファイル化する か
    PDFファイル化ツール で(PDFファイル化アドオン)PDFファイル化する
○○○
■ PDFファイルを PDF-XChange Viewer PROページのトリミング
○○○
■ PDF-XChange Viewer PRO で印刷

 





Firefox の 印刷設定(自分の場合)


自分の場合、仮想プリンタでPDFファイル化しかしないので
下のような設定になってます。
ここのブログ記事も この設定を前提として書いてます。

 


【 ページ設定 】

■ 余白はすべて ゼロ
■ ヘッダ / フッタ すべて なし

fox001bs.png


■ 白黒(モノクロ)印刷しかしないので「背景色・・・」のチェックは外します。
 
■ 印刷方向は 縦

  横印刷が最適なページでも、PDFをトリミングしてから印刷するので、
  縦ページに収まるよう縮小します。



fox002s.png




■ 仮想プリンタでPDFファイル化しかしません。

fox004s.png

※ 文字化けする場合は、CubePDF を使います。



■ 縮小率は 80%

  PDFファイル化した後、
  PDF-XChange Viewer PRO でトリミングしてから印刷するので
  ページ内に収まるまで縮小します。



fox003s.png




■ 印刷する時に便利なFirefoxアドオン

fox005s.png

Web ページを印刷するのに便利なFirefoxの設定 / アドオン







プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム