1. 不必要な部分を印刷前に削除したい
ウェブページを印刷する前に、不必要な情報を削除したい。
ブラウザにデフォルトで用意されている方法は、
- 印刷したい範囲を選択する。
- 印刷ダイアログで、印刷範囲において「選択した部分」を選択し、印刷する。
1ページの中に印刷したい箇所が複数に分かれている場合、対象を選択する操作を行うときに、Ctrl キーを押しながら選択すると、複数の部分を選択できる。
この方法の問題点は、微調整がしにくいこと。
2. Firefox の Print Edit を利用する
これに対して、Firefox では、アドオン Print Edit を利用すると、プリントする前に不要な部分を素早く削除することができる。
アドオンをインストールした後、印刷したいウェブページを開き、
- Firefox ボタン > 印刷 > Print Edit
を選択すると、編集画面が表示される。
a. ウィンドウの幅を広げておく
編集画面は、ウィンドウの幅が狭いと、Print Edit のメニューが全部表示されない。
幅を広げて、右端が「閉じる」ボタンであることを確認しておく。
b. 要素の選択方法
ウェブページの必要な部分を選択する方法は、
- 要素をクリック
- 範囲選択（クリックした後、ドラック）
要素をクリックするときは、文字のない適当な場所を選ぶと、必要な部分を上手く選択できる。
c. 印刷までの手順
Print Edit の典型的な使い方は、
- Print Edit を起動する。
- 必要な範囲をクリックして選択する。
- 「他の要素を削除」ボタンを押す。
これにより、余白ができた場合、印刷対象の幅を調整する。そのために、
- 余白部分をクリックし、「フォーマット」ボタンを選択。
- 「コンテンツに合わせる」ボタンを押し、
- Flags の「入れ子のサブ要素に適用」にチェックを入れ、OK ボタンを押す。
後は、残りの不要な要素を選択して「削除」し、最後に「プレビュー」ボタンを押して、印刷画面を表示する。
d. 背景も印刷する
印刷したいページの画像が編集対象になってない場合、
を選択し、「書式とオプション」タブのオプションの「背景色と背景画像も印刷」にチェックを入れておく。
3. Google Chrome の Live Page Editor を利用する
Google Chrome の場合、Live Page Editor を利用する。
-
Live Page Editor の Edit This Page ボタンを押す。
-
不必要な部分を選択し、Delete キーを押す。
ただし、Firefox の Page Edit のように余白の調整はできないようだ。
4. 開発ツールを使う
上記以外に、Firefox, Google Chrome の開発ツールを利用すると、表示しているページを編集できる。
Firefox の場合、
-
ウェブページで右クリック > 要素を調査
-
表示される HTML の要素を右クリック > ノードを削除
特に、3D ビュー モードで表示すると、要素を特定しやすい。
Google Chrome の場合、
-
右クリック > 要素を検証
-
表示される HTML の要素を右クリック > Delete Node
大抵、印刷対象のメインコンテンツの id, class には main… と名前が付けれている。それ以外は、header, footer, sidebar などの名前がついていることが多い。これを目安に要素を特定する。
サイドバーなどを削除すると、その部分に余白ができる。この余白をなくすには、必要なコンテンツの幅の調整をするために、対象要素の CSS を表示し、width 属性のチェックを外せば良いことが多い。
5. 印刷用の CSS が定義されているサイト
ところで、サイトによって印刷プレビューを確認すると、表示のされ方が違う。メインコンテンツを印刷用にデザインにしてくれるサイトから、印刷することを全く想定していないサイトまで様々。
例えば、マイナビニュース 、InfoQ、TechCrunch Japan などのサイトは、記事を印刷すると、コンテンツだけ印刷される。
これは CSS で印刷用のデザインが定義されているため。
情報を提供するサイトは、ブラウザで表示されるだけではなく、印刷されることも想定して欲しい。
Thunderbird でメッセージ中の選択範囲を印刷したい。
選択範囲を表示されたままの形で印刷するには、アドオン PrintingTools を利用する。
