印刷用CSS(スタイルシート)・weblog（ブログ）の印刷　

【はてなﾌﾞｯｸﾏｰｸ】： 　【カテゴリ】：[ MT ]

サーバ移転に伴う更新第１弾として、以前から声があがっていた、「このサイトを印刷したい」

という課題に挑戦してみました。ここを印刷までして読んで頂いている方が結構いるらしいのです（泣
会社でしかPCを見ることが出来ない方にはWEBサイトを印刷するという事は日常茶飯事な事なのかもしれませんね。

IE、NNなどで、「印刷プレビュー」なるものがあるので、実行してみて下さい。

サイドバーなど、余計なものが印刷時には含まれていません。これはＣＳＳを調整するだけで割と簡単に導入できるのです。例を挙げて解説してみます。

このようになっているCSSの記述を

このように変更し、styles-print.cssを新たに作ります。

通常用スタイルシートは

印刷用は

と記述し、カッコ内にそれぞれの記述をするように変更すると、印刷時にはこのCSSファイルを読み込んで印刷してくれます。

これだけ！

えっと、ここはMovabletype（以下MT）で作成されているので、もうちょっと簡単に作成できる方法を解説します。他のweblogツールの方でも参考になるかと思います。

で、新しいテンプレートを作成します。

テンプレートの中身はウチで使っているものをサンプルとして。
こちらからＤＬできます。

自作する方は印刷したくないクラスを

のように指定するだけで余計なサイドバー等を印刷しない事ができます。逆に印刷時だけに出力する項目は、スクリーン用CSSを「none」にすれば良いのですね。
とりあえず、暫定UPなので表示が上手くいってない個所は後ほど修正します。

それに合わせて、個別記事の下に「このサイトを印刷」ボタンを加えました。これでそのページを印刷できるという便利な代物です。いかがでしょうか？

この印刷ボタン（リンク？）は、

windows.print()

というメソッドを使用しているんですが、プレビューのメソッドがどうしても見つかりませんでした。どなたかご存知の方はいらっしゃいませんか？
ブラウザ独自の機能だからなさそうだなあ。

【ネタ元】
印刷用スタイルシートのススメ(コビット)

【PR】BTOパソコンの先駆者 FRONTIER