印刷用のスタイルシートを作る（media別css）

　このブログは、パソコンで読むだけではなく、印刷して活用してもらいたいと常々考えていました。パソコンで読む（見る）際には、コメントの投稿フォームやトラックバックのurl、ナビゲーションやロゴ、カレンダー、検索窓など様々な便利な機能が付いています。しかし、これを印刷させると非常に邪魔くさいことも事実です。また、私のブログのように、横幅をブラウザ全面に展開するような仕様になっていると、Ａ４の用紙に印刷がうまく納まらない場合もあります。
　そこで、印刷用のスタイルシートを作ることができないか、色々と調べてみました。当初は、スタイルシートそれ自体を切り替えることを考えていましたが、[software linkage]の「メディア別スタイルシートを作ろう！（print編）」を参考に、htmlのlink要素にmedia属性を指定して、cssを読み込む方式を取り入れてみました。
　livedoorの場合、[ブログの設定／管理]->[デザインの設定]->[スタンダード]->[CUSTOM]で今使っているテンプレートのhtmlを編集します（http://blog.livedoor.com/cms/theme/custom）。テーマの読み込みから、使っているテンプレートを呼び込みます。そのhtmlのトップページ、個別記事、カテゴリ別アーカイブ、月別アーカイブの４種全ての冒頭に、以下のように赤字で表示した一行を付け加えました。その後、変更したhtmlを保存して、CUSTOMテンプレートを選択・有効にし、ブログ全体を再構築します。

　media=”print”が魔法の呪文です。このmedia属性によって、印刷するとき（印刷のプレビューも含めて）は、print.cssというスタイルシートが適用されるようになります。パソコンのディスプレーに表示されるときは、通常のsite.cssというスタイルシートが適用されます。
　livedoorブログでは、有料版（pro版）ではスタイルシートもアップロードできますので、任意のディレクトリーにprint.cssを作ってアップロードすればよいわけです。
　私は、ブログの横幅が決められているテンプレートのスタイルシートを加工して、print.cssを作成しました。

　こんな乱暴なやり方ですが、少なくてもWindowsXP版のI.Eで問題なくきれいに印刷できています。残念ながらMozilla Firefoxなどではうまくいっていないようです。試しにこのページを印刷してみてください。
参考：「メディア別スタイルシートを作ろう！」