Webページを印刷すると見た目が崩れる・・・ Webページの印刷についてあれこれ

Pocket
LINEで送る

Webページの印刷がうまく出来ない

 

僕はWebページを印刷して読むって事は、ほとんどないんですけど、年配の方などでは、とにかく印刷して紙で読まないと気が済まないなんて方も、いらっしゃいます。

そこで、よく出てくるのが、Webページがうまく印刷できない!ってやつです。一昔前だと、端が切れるとか、背景が印刷されないとか、そんなもんだったんですけど、最近では、幅広のレスポンシブルデザインのサイトが増えている為、印刷すると、見た目と全く違ったレイアウトになったり、ひどく崩れたりなんて事が往々にしてあります。

サイト側も、大抵は、スタイルシートが印刷の際にも適用されるようにしてあります。それで、基本は、なからに印刷できるんですけど、それでも、印刷しようとすると大きく崩れる時は崩れます。

サイト側として、完璧に印刷してもらおうとすれば、印刷用のスタイルシートを別に作成して、それをページに読み込ませておく必要がありますが、そもそもWebページは印刷物ではないわけで、よほど特殊な事情でもない限り、そこまで用意するサイトはないんじゃないかと思います。

つまり、印刷しようとすると、大きく崩れるWebページは、見た目の通り印刷しようとしても、どうしようもないわけで、なから見た目通りに印刷しようとすれば、スクリーンショットを使うしかないように思います。

スクリーンショットってのは、画面に写っている物をそのまま画像にしちゃうやつです。
よくキーボードの「PrtSc」キーを使って、スクリーンショットをとりますけど、これだと、下にスクロールしていかないと、全て見れないWebページの場合は、役に立ちません。

そこで今回は、Google Chrome で、その拡張機能の「Awesome Screenshot」を使ってスクリーンショットをとり、そのまま印刷する方法を書いてみたいと思います。

 

ということで、まずは、Awesome Screenshot をGoogle Chrome に追加します。
いちおう、その追加方法を下に書いておきます。もし、他の拡張機能を追加したい場合もやり方は一緒です。

Google Chromeの画面右上をクリックし、その他ツールから拡張機能をクリックします。

Google Chrome 拡張機能をクリック

 

開いて来た画面一番下の「他の拡張機能を見る」っていうリンクをクリックします。

「他の拡張機能を見る」をクリック

 

開いて来たChrome ウェブストアの画面で、「awesome screenshot」と入力して検索し、拡張機能にチェックを入れます。あとは、Awesome Screenshot の「CHROMEに追加」ボタンをクリックして終了です。

Awesome Screenshotの追加

 

使い方もいたって簡単で、Awesome Screenshot が追加されると、Google Chrome の右上にAwesome Screenshot のアイコンが表示されるので、印刷したいページを表示した状態で、それをクリックし、「Capture entire page」をクリックします。すると自動的にキャプチャーが始まります。

Awesome Screenshotキャプチャー方法

 

別タブでキャプチャーされた画面が開いてくるので、上部の「Done」をクリックします。

Awesome Screenshot のキャプチャー画面でDoneをクリック

 

「Done」をクリックした後は、下の図のようにプリンターボタンを押してもらえれば、そのまま印刷ができますし、そのままページ全体を画像として保存する事もできます。

Awesome Screenshotから印刷

まあ、このサイトみたいに背景全体に画像が入ってる場合は、印刷したら、インクの使用量が半端なく、洒落にならないと思いますけど、どうしてもって時には有効な手段だと思います。

 

ちなみに、こちらのサイトは、Google Chrome から直接印刷しても、それほど崩れず、ほぼ見た目通りの印刷が可能です。しかし、下図のようにPCから印刷してるにも関わらず、上部にはスマホ用のメニューまで印刷されてしまいます。

Google Chromeから直接印刷

 

上図のように、Google Chrome から直接印刷しても、背景も印刷してしまえば、膨大なインクを消費してしまうことになります。ですから通常は、オプションの「背景のグラフィック」のチェックを外し、背景を印刷する事はないかと思います。しかし、最近のWebページでは、あちこちの背景に画像を指定している所も多く、背景を印刷しないと、下図のように見た目は悪くなったりします。

背景画像を印刷しない場合

 

でも、文章部分を読む為に印刷するんでしたら、これで十分ですよね。いずれにしても、Webページを印刷する場合は、全体を印刷するのではなく、目的に応じて、部分を印刷した方が良いかもしれません。Google Chrome の拡張機能には「PrintWhatYouLike」なんていう、Webページの印刷する部分を細かく選択できるものも有るので、そんなのを利用してみてもいいかもしれませんね。

まあ、僕はWebページを印刷する場合は、直接印刷がいまいちな場合は、必要な部分だけをコピーしてワードとかに貼り付けて印刷しちゃう事が多いですけど・・・。(^^;

 

逆にサイトの作り手として、印刷を意識するんでしたら、それを予めスタイルシートで記述しておくって感じだと思います。例えば、このサイトであれば、直接印刷しても、レイアウトは崩れません。上図のように、スマホ用のメニューが表示されるのと、全体の背景画像を外せば、そこそこに見れる状態で印刷できると思います。そんな場合は、ちょっとだけメディアクエリを追記しとけばOKです。まあ、僕は、そこまで印刷にこだわってないので、追記してませんけど・・・。(^^;

例えばこのサイトであれば、スマホメニューと全体の背景画像を印刷時に非表示にする場合は、以下のような感じになります。

@media print{#mbtmenu{display:none}} 
@media print{body{background-image:none}}

 

また、なんらかの事情により、完璧な印刷をしてもらいたい場合は、やはり別に印刷用のスタイルシートを作って、それを読み込ませることになります。

	<link rel="stylesheet" href="print.css" type="text/css" media="print" />

 

もし、WordPressで、テーマディレクトリのCSSというディレクトリに印刷用のPrint.cssを設置する場合は、以下のような感じですね。

	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/CSS/print.css" type="text/css" media="print" />

 

まあ、ここまでやっているところは少ないんでしょうけど・・・。(^^

 

 

Pocket
LINEで送る

YASUKE YAMURA

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ツールバーへスキップ