Bootstrap で作ったサイトを見たまんま印刷したいぃぃぃ!

以前からときどき「ページの印刷がうまくいかない」場面に遭遇していました。

ここんとこ、ずっとBootstrap系のサイトばかり作成していたために、Bootstrap系じゃないサイトであれば、ブラウザの背景印刷オプション程度でそれなりに出力されるということに気がついていませんでした(;´Д`)

つまり、「ホームページの印刷はブラウザに依存するところが大きく、印刷用のスタイルシートをきっちり作らなければキレイには出せないんだ」と。

ところが、コレ。

見たまんまに印刷されないのは、Bootstrapの気遣い(おせっかい)だったんですね。知らんかったです。

画像部分に画像のURLが表示されたり、ブラウザのオプション設定しても背景が表示されなかったり、レイアウトが縦並びになったり…

それは、全て乱れてるんじゃなく、お気遣いいただいていたんですね。

 

という訳で、その余計な気遣い部分を読み込まないようにすれば良いということですね。

それは、Bootstrapのカスタマイズページでできます。

http://getbootstrap.com/customize/

ここで、Print media styles を外したBootstrapを作成し、それを読み込むようにすれば良いわけですね。

私の場合、BootstrapはCDNで読み込むことが多かったので、media=”screen”とmedia=”print”に分けて読み込むようにしてみましたが、うまくいきました。