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


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


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


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





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




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




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




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


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

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


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


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



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;"




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 で印刷

 





プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム