新サイト(はてなブログ)

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

IEによる印刷プレビューイメージ サーバ移転に伴う更新第1弾として、以前から声があがっていた、「このサイトを印刷したい」
という課題に挑戦してみました。ここを印刷までして読んで頂いている方が結構いるらしいのです(泣
会社でしかPCを見ることが出来ない方にはWEBサイトを印刷するという事は日常茶飯事な事なのかもしれませんね。
IE、NNなどで、「印刷プレビュー」なるものがあるので、実行してみて下さい。
サイドバーなど、余計なものが印刷時には含まれていません。これはCSSを調整するだけで割と簡単に導入できるのです。例を挙げて解説してみます。


<link rel="stylesheet" href="styles-site.css" type="text/css">
このようになっているCSSの記述を
<link rel="stylesheet" href="styles-site.css" type="text/css"
media="screen,tv" />
<link rel="stylesheet" href="styles-print.css" type="text/css" media="print" />
このように変更し、styles-print.cssを新たに作ります。
通常用スタイルシートは
@media screen{
}
印刷用は
@media print{
}
と記述し、カッコ内にそれぞれの記述をするように変更すると、印刷時にはこのCSSファイルを読み込んで印刷してくれます。
これだけ!
えっと、ここはMovabletype(以下MT)で作成されているので、もうちょっと簡単に作成できる方法を解説します。他のweblogツールの方でも参考になるかと思います。
MTの管理画面 → テンプレートの編集 → 新しいインデックステンプレートを作る
で、新しいテンプレートを作成します。
テンプレートの名前:Styleprint
出力ファイル名:print-site.css
自動的に再構築:OFF
リンクするファイル:空白
テンプレートの中身はウチで使っているものをサンプルとして。
こちらからDLできます。
自作する方は印刷したくないクラスを
.side{ DISPLAY:none }
のように指定するだけで余計なサイドバー等を印刷しない事ができます。逆に印刷時だけに出力する項目は、スクリーン用CSSを「none」にすれば良いのですね。
とりあえず、暫定UPなので表示が上手くいってない個所は後ほど修正します。
それに合わせて、個別記事の下に「このサイトを印刷」ボタンを加えました。これでそのページを印刷できるという便利な代物です。いかがでしょうか?
この印刷ボタン(リンク?)は、
windows.print()
というメソッドを使用しているんですが、プレビューのメソッドがどうしても見つかりませんでした。どなたかご存知の方はいらっしゃいませんか?
ブラウザ独自の機能だからなさそうだなあ。
【ネタ元】
印刷用スタイルシートのススメ(コビット)