小粋空間  -  a cheap joke and a play on words site

印刷用スタイルシート

	印刷用スタイルシートにより出力の最適化を行うカスタマイズです。 左上の画像は通常のブラウザによる表示で、同じページを印刷すると左下のような出力になります（画像はブラウザの「印刷プレビュー」を選択したものです）。具体的には、印刷用のページはタイトルやサイドバー等の不要な項目を表示しないように最適化して、本文のみ印刷できるようにしています。 以下設定方法です。

１．印刷用スタイルシート追加

管理メニューの「テンプレート」をクリックし、次のページの「インデックス・テンプレート」の右側にある「新しいインデックス・テンプレートを作る」をクリック。次のページで下記をそれぞれ設定します。

• テンプレートの名前：スタイルシート・印刷用（なんでもいいです）
• 出力ファイル名：print.css
• 再構築オプション：チェックを外す
• このテンプレートにリンクするファイル：（空白）
• テンプレートの中身：スタイルシート（styles-site.css）の中身を丸ごとコピー

２．印刷用スタイルシートの修正

１項でコピーしたスタイルシートから、印刷に不要なIDセレクタおよびクラスセレクタ（サイドバー等）のプロパティを

display:none;

に変更します。公開テンプレートを例に挙げると、左カラム全体の指定は通常のスタイルシートでは

#links-left-box {
    float: left;
    width : 185px ;
}
 
#links-left {
    color: #ffffff;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

となっていますが、#links-left-box の指定を display プロパティだけに置き換えて、

#links-left-box{
    display:none;
} 

とします。#links-left は #links-left-box の内側にある要素で、表示されなくなるため削除します。そのまま残していても問題ありません。注：以前のテンプレートには #links-left-box はありませんので、#links-left に display プロパティを与えてください。
これと同じ要領で印刷時の表示が不要なものについて display プロパティを与えます。

３．テンプレートに link 要素追加

各テンプレートに印刷用の link 要素を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="<$MTBlogURL$>print.css" type="text/css" media="print" />

上記リストのように、現在の link 要素（rel 属性が stylesheet となっているもの）に青色部分を追加し、印刷用スタイルシートの link 要素を1行追加します。
スタイルシート切り替えのカスタマイズを行っている場合の link 要素追加も同様で、既存の link 要素に media="screen,tv" を追加して新しい link 要素を追加します。

４．色要素を変更

白黒でプリントする場合、色で表示の見栄えを指定している部分は出力に反映されません。このような指定を行っている場合は併せてスタイルシートを変更すると良いでしょう。例えばこのサイトではカスタマイズ記事のリストで赤色と青色を使っていますので、それぞれ下線および二重下線に変更しています。

以上です。２項のスタイルシートの修正はブラウザの「印刷プレビュー」で確認しながら少しずつ修正されることをお勧めします。