【Firefoxアドオン】Print Edit WEで思い通りにWebページを編集して印刷

    icon-clock-o読了時間:約12分20秒


Print Edit
⇒ Print Edit WE へのバージョンアップ

より快適にブラウザを使うためのFirefoxアドオン でもご紹介したPrint Edit

このアドオンは、閲覧しているページの中から一部分だけを印刷したり、
不要な箇所や余白部分を削除し、必要な箇所だけ残すといった編集をしてから
印刷することが簡単にできる、印刷用の便利なアドオンです。

 
Webページを範囲選択したのに、印刷したら要らない所も印刷されてる…

 
上部メニューとかサイドメニューの所は別に要らなかったのに

 
なんでか分からないけど空白の部分が印刷されてコピー用紙いっぱい無駄にしちゃった

こうした悲しい状況が 『 Print Edit 』 さえあれば無くなります。
印刷したい箇所・印刷に出したくない箇所の編集や削除がすぐに出来るので本当にオススメ。

Firefox(ver.57)リリースに向けた旧アドオン停止でもご説明しましたが、
Firefoxの仕様変更により、新仕様のアドオンへの切り替えが必要になっているので、
今回は Print Edit の新バージョンである Print Edit WE の使い方などをご説明したいと思います。


 目次 

アドオン停止・削除の手順
  ∟Print Edit 使用例
Print Edit WE の使い方
  ∟Print Edit WE で編集を始める
  ∟印刷用にページを編集する
   ・Select / Deselect(選択/選択解除)
   ・Hide(隠す)
   ・Delete(削除)
   ・Hide Except(選択部分以外を隠す)
   ・Delete Except(選択部分以外を削除)
   ・Format(書式)
   ・Text(テキスト挿入)
   ・Undo(元に戻す)
   ・Undo All(全て元に戻す)
   ・Save(保存)
   ・Text Pieces(テキスト編集)
   ・Web Style(CSS編集)
   ・Preview(印刷プレビュー)
   ・Close(閉じる)
  ∟マウスでより便利に操作
  ∟キーボードのショートカット機能
印刷サイズについて


アドオン停止・削除の手順

今までも Print Edit を使っていて、今回 新しいバージョンの Print Edit WE へ
切り替えた方は、動作の競合が起きないように
旧バージョンの Print Edit を無効化、もしくは削除しておいてください。

Firefoxウインドウの右上、【 icon-reorder メニュー 】ボタンをクリック
 icon-arrow-right 【 icon-puzzle-piece アドオン 】をクリック。
Firefoxアドオンの停止・削除1
 ※上部メニューから【 ツール 】→【 アドオン 】でも同じ設定画面が開きます。
 Firefoxアドオンの停止・削除2
左メニュー内の【 icon-puzzle-piece 拡張機能 】をクリック。
旧バージョンの Print Edit を【 無効化 】もしくは【 削除 】してください。
Firefoxアドオンの停止・削除3

Print Edit 使用例

Yahoo!のトップ画面で、ピンク色の部分だけを残して、残りは削除してみます。
PrintEdit編集1
   icon-arrow-down 
不要なサイドメニューなどを削除し、余白を詰め、全体を左寄りにしています。
メインのコンテンツ、本文だけを印刷したい時に便利。
PrintEdit編集2
もちろんこれは、実際のWebページに何か影響を与えるわけではなく、
自分のパソコン側の印刷プレビュー画面上で編集しているだけです。

   icon-arrow-down 
印刷プレビューウインドウでは縮小・拡大や、PDF保存なども可能。
機器の取扱説明書などをメーカーサイトで開き、
必要な箇所のみをPDFファイルとして保存、といった使い方もできますね。
PrintEdit編集3


Print Edit WE の使い方

新バージョンの Print Edit WE は、旧バージョンの Print Edit よりメニューが増えています。
しかもまだ日本語対応しておらず、英語でちょっと分かりづらいため、1つずつご説明してみます。

Print Edit WE で編集を始める

印刷したいWEBページを開いた状態で Print Edit WE のアイコンをクリックすると
preparing(準備段階)として同じページが開き、アイコンに【PRE】マークが付きます。
Print Edit WEの使い方1
preparing(準備段階)の状態であれば、ページ内のリンクをクリックする
クリックしないと表示されない項目などを表示させてから印刷、といったことが可能です。

preparing(準備段階)ページを開いた状態で
もう一度 Print Edit WE アイコンをクリックすると
今度こそediting(編集)画面になってアイコンに【EDI】マークが付き、
ページ上部に編集用のメニューが表示されます。
Print Edit WEの使い方2

印刷用にページを編集する

editing(編集)画面内をクリックするとその部分が選択された状態になり、
メニューの内容が変わります。
Print Edit WEの使い方3

メニュー項目はこんな感じ。
Print Edit WEの使い方4
Print Edit WEの使い方5

Select / Deselect(選択/選択解除)

マウスクリックで要素を選択、
選択した状態で【 Deselect 】で選択が解除されます。

Hide(隠す)

選択した部分を非表示にします。

Delete(削除)

選択した部分を削除します。

Hide Except(選択部分以外を隠す)

現在選択されている要素以外のすべての要素を非表示にします。

Delete Except(選択部分以外を削除)

現在選択されている要素以外のすべての要素を削除します。

【 Delete Except 】をクリックすると、
不要部分を削除した後のレイアウトをどうするか3種類の項目が表示されます。
Delete Except
 icon-file-text-o Restricted(制限あり):元のレイアウトのまま出来る限り左上に寄せる
 icon-file-text-o Without Float(フロートしない):出来る限り余白を省く
 icon-file-text-o Unrestricted(無制限):ページ幅に合わせてレイアウトを変える
Delete Exceptレイアウト

Format(書式)

選択部分の書式や余白を編集できます。

例えば【 Magins 】から数値を▼で変更すると、上下左右の余白の幅を変更することができます。
・左右のマージン
・上下のマージン
・左右のパディング
・上下のパディング
書式設定
マージンやパディングについて詳しくはこちらをご参考ください。
  icon-arrow-right 余白 マージンとパディング

また【 Block Layout 】の【 Page Breaks 】を設定すると、
選択している箇所の前後(before・after・inside)でページ区切りを入れることができます。
ページ区切りを入れると印刷時に反映され、区切りから後が2ページ目になります。
ページ区切り

Text(テキスト挿入)

テキスト部分を編集したり、要素の前後に新しいテキストを挿入できます。
テキスト挿入

Undo(元に戻す)

編集作業を一つ前の状態に戻します。

Undo All(全て元に戻す)

編集作業を全て無かったことにして最初の状態に戻します。
※ただし、一度【 Save(保存) 】した後だと、保存後の状態までしか戻せません。
 保存後に最初からやり直したい場合は、元ページからやり直す必要があります。

Save(保存)

WebページをHTMLファイルとして保存します。

Text Pieces(テキスト編集)

テキスト部分の選択と編集を可/不可を切り替え。

Web Style(CSS編集)

CSS印刷スタイルシートの適用/除外を切り替え。

Preview(印刷プレビュー)

印刷用ウィンドウを開きます。

Close(閉じる)

編集画面を閉じます。

 icon-move マウスでより便利に操作

 移動 ;ハイライトボックスを移動して要素を強調表示
 クリック ;強調表示された要素を選択または選択解除
 右クリック ;強調表示された要素の書式プロパティを確認
 ドラッグ ;キャプチャボックス内のすべての要素を選択
 Shift +ドラッグ ;Shiftキーを押しながらドラッグで、キャプチャボックス内のすべてのグラフィック要素を選択
 Ctrl +ドラッグ ;Ctrlキーを押しながらドラッグで、キャプチャボックス内のすべての要素の選択を解除

 icon-move キーボードのショートカット機能

ショートカットキー(マウスではなくキーを押すことでメニュー操作すること)でも
簡単にメニュー操作ができるので、よく使う機能はキーを覚えておくと便利です。

 ] ;全ての選択を解除
 [ ;先に選択していた要素を再選択???
 Up ;ハイライトボックスを展開
 Down ;ハイライトボックスを縮小
 Enter ;強調表示された要素を選択または選択解除
 Insert ;選択した要素を非表示に
 Delete ;選択した要素を削除
 Backspace ;一つ前に戻す
 #(ハッシュ) ;選択した要素の前にページ区切りを適用
 Escape ;編集ページやメニューを閉じる
 Ctrl+A ;CtrlとAを同時押しで全ての要素を選択
 Crtl+P ;CrtlとPを同時押しで印刷プレビューウィンドウを開く
 Ctrl+S ;CtrlとSを同時押しでHTMLファイルとして保存
 Ctrl+Z ;CtrlとZを同時押しで一つ前に戻す


印刷サイズについて

Print Edit WE を使用して印刷する際に、想定よりも
文字サイズ等が大きかったり小さかったりすることがあります。
何度か使っていると自分のプリンタ環境などとの兼ね合いで
丁度良いところが分かってくるかと思いますので、アドオンのプレビュー画面のサイズ変更の他、
印刷時のプリンタ詳細設定(プロパティ)で倍率のパーセンテージを変更してください。
Print Edit WEで印刷
と思っていたら、アドオンの更新が入ってからは100%で丁度良くなっていました。
アドオン作者さんが細かい調整をしてくださったのかもしれませんね。ありがたい。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket