いっしきまさひこBLOG

AI・機械学習関連、Web制作関連、プログラミング関連、旅行記録などなど。一色政彦。

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

Movable Typeで、印刷用ページを作成する方法を紹介します。

(Movable Typeを使っていなくても、CSSを使っていれば同様のことができます。)

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

printpage1.gif

そこで、印刷の時だけ印刷用のページ レイアウトで表示するようにします。

次の画面は、その例です。余分な項目は削除され、固定幅だとはみ出る場合があるので、固定幅が解除されています。

printpage2.gif

(なお、今、参照している本サイトのページを印刷プレビューすると、印刷ページと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 メディアへの対応