MTで印刷用ページを作成するには？

Movable Typeで、印刷用ページを作成する方法を紹介します。
（Movable Typeを使っていなくても、CSSを使っていれば同様のことができます。）

次の画面のようなWebページをそのまま印刷すると、不要なものが印刷されたり、用紙からはみ出てしまう場合があります。

そこで、印刷の時だけ印刷用のページ レイアウトで表示するようにします。
次の画面は、その例です。余分な項目は削除され、固定幅だとはみ出る場合があるので、固定幅が解除されています。

（なお、今、参照している本サイトのページを印刷プレビューすると、印刷ページとWebページのレイアウトの違いを実際に確認できます。）

印刷用のページ レイアウトを作成するのはとても簡単です。

Movable Typeは、もともと「データのXHTML」と「デザインのCSS（スタイルシート）」が分離されています。
よって、既存のWebページを印刷用表示に切り替えるには、この「デザインのCSS」を印刷用のものに切り替えるだけです。

具体的には、HTMLコードの、CSSへのリンク タグ（<link rel="stylesheet" />）で、メディア タイプ（media="･･･"）に、画面(screen)か印刷(print)を指定します。
サンプル：

<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-site.css」と印刷用のスタイルシート「styles-print.css」を用意しておく必要があります。また、「media="screen,tv"」の「tv」はテレビ画面のことです。

既存のコード修正としてはこれだけです。

あとは印刷用のスタイルシート（CSS）を用意します。

印刷用のスタイルシートでよく使うコードは、「この部分を印刷しない」という指定ですが、これをするには、「display: none;」を指定してください。

印刷用スタイルシートについての詳細は次のサイトが役立ちます。
●ALT="Something Alternative" - CSS: 印刷用スタイルシートのススメ
●Academic HTML - CSS: 5.5 メディアへの対応