2012年7月11日水曜日

ウェブページを印刷する前に不要な部分を削除する - Firefox の Print Edit と、Google Chrome の Live Page Editor

1. 不必要な部分を印刷前に削除したい

ウェブページを印刷する前に、不必要な情報を削除したい。

ブラウザにデフォルトで用意されている方法は、

  1. 印刷したい範囲を選択する。
  2. 印刷ダイアログで、印刷範囲において「選択した部分」を選択し、印刷する。SnapCrab_NoName_2012-7-9_23-46-3_No-00

1ページの中に印刷したい箇所が複数に分かれている場合、対象を選択する操作を行うときに、Ctrl キーを押しながら選択すると、複数の部分を選択できる。

この方法の問題点は、微調整がしにくいこと。

 

2. Firefox の Print Edit を利用する

これに対して、Firefox では、アドオン Print Edit を利用すると、プリントする前に不要な部分を素早く削除することができる。

アドオンをインストールした後、印刷したいウェブページを開き、

  • Firefox ボタン > 印刷 > Print Edit

を選択すると、編集画面が表示される。

a. ウィンドウの幅を広げておく

編集画面は、ウィンドウの幅が狭いと、Print Edit のメニューが全部表示されない。

幅を広げて、右端が「閉じる」ボタンであることを確認しておく。

SnapCrab_NoName_2012-7-8_3-54-9_No-00

 

b. 要素の選択方法

ウェブページの必要な部分を選択する方法は、

  • 要素をクリック
  • 範囲選択(クリックした後、ドラック)

要素をクリックするときは、文字のない適当な場所を選ぶと、必要な部分を上手く選択できる。

 

c. 印刷までの手順

Print Edit の典型的な使い方は、

  1. Print Edit を起動する。
  2. 必要な範囲をクリックして選択する。
  3. 他の要素を削除」ボタンを押す。
    SnapCrab_NoName_2012-7-8_3-55-39_No-00

これにより、余白ができた場合、印刷対象の幅を調整する。そのために、

  1. 余白部分をクリックし、「フォーマット」ボタンを選択。
  2. コンテンツに合わせる」ボタンを押し、
  3. Flags の「入れ子のサブ要素に適用」にチェックを入れ、OK ボタンを押す。
    SnapCrab_NoName_2012-7-8_3-56-37_No-00

後は、残りの不要な要素を選択して「削除」し、最後に「プレビュー」ボタンを押して、印刷画面を表示する。

 

d. 背景も印刷する

印刷したいページの画像が編集対象になってない場合、

  • Firefox ボタン > 印刷 > ページ設定

を選択し、「書式とオプション」タブのオプションの「背景色と背景画像も印刷」にチェックを入れておく。

SnapCrab_NoName_2012-7-9_23-47-7_No-00

 

3. Google Chrome の Live Page Editor を利用する

Google Chrome の場合、Live Page Editor を利用する。

  1. Live Page Editor の Edit This Page ボタンを押す。
  2. 不必要な部分を選択し、Delete キーを押す。

ただし、Firefox の Page Edit のように余白の調整はできないようだ。

 

4. 開発ツールを使う

上記以外に、Firefox, Google Chrome の開発ツールを利用すると、表示しているページを編集できる。

Firefox の場合、

  1. ウェブページで右クリック > 要素を調査
  2. 表示される HTML の要素を右クリック > ノードを削除

特に、3D ビュー モードで表示すると、要素を特定しやすい。

Google Chrome の場合、

  1. 右クリック > 要素を検証
  2. 表示される HTML の要素を右クリック > Delete Node

大抵、印刷対象のメインコンテンツの id, class には main… と名前が付けれている。それ以外は、header, footer, sidebar などの名前がついていることが多い。これを目安に要素を特定する。

サイドバーなどを削除すると、その部分に余白ができる。この余白をなくすには、必要なコンテンツの幅の調整をするために、対象要素の CSS を表示し、width 属性のチェックを外せば良いことが多い。

 

5. 印刷用の CSS が定義されているサイト

ところで、サイトによって印刷プレビューを確認すると、表示のされ方が違う。メインコンテンツを印刷用にデザインにしてくれるサイトから、印刷することを全く想定していないサイトまで様々。

例えば、マイナビニュースInfoQTechCrunch Japan などのサイトは、記事を印刷すると、コンテンツだけ印刷される。

これは CSS で印刷用のデザインが定義されているため。

情報を提供するサイトは、ブラウザで表示されるだけではなく、印刷されることも想定して欲しい。

1コメント:

Unknown さんのコメント...

よろしくお願いします。
最近、PrintEditのことを知りました。これから重宝しそうです。

余白の件で質問させてください。

私の場合、ソフトのバージョンが違うのでしょうか。管理人さんのご説明のものと手順は同じでしょうか。
https://gyazo.com/cd9218780a3a039ec6d45c3d1f8e926a

ApplyまたはOKをクリックすると、下記のようになりました。
https://gyazo.com/58713b2bf44e34a40b74a8f062bdbf5b

余白が縮小されません。なにか手順が抜けているのでしょうか。