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

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

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

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

1. 印刷したい範囲を選択する。
2. 印刷ダイアログで、印刷範囲において「選択した部分」を選択し、印刷する。

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

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

 

2. Firefox の Print Edit を利用する

Print Edit via kwout

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

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

• Firefox ボタン > 印刷 > Print Edit

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

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

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

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

 

b. 要素の選択方法

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

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

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

 

c. 印刷までの手順

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

1. Print Edit を起動する。
2. 必要な範囲をクリックして選択する。
3. 「他の要素を削除」ボタンを押す。
   

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

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

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

 

d. 背景も印刷する

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

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

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

 

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

Live Page Editor via kwout

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 が定義されているサイト

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

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

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

• cf. CSS 概説 | Media Types in CSS

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