2003/11/24 16:31 【カテゴリ:Movable Type関連,スタイルシート】 (更新:2006/04/08 23:26)
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 メディアへの対応
一色さんの説明を参考にさせていただき、CSSをいじって individual page の印刷用ページレイアウトを作りました。 自分の書き込みといただいたTrackBack とコメントは印刷、コメント書き込み...
→ “印刷用ページの作成”の続きを読む
世間的には三連休明けで、カッタルさを感じつつ仕事をされているのでしょうね。 祝日が関係ない我が社では、土曜日が振り替え出勤だったので、三連休どころか単休でした。 という...
→ “印刷用スタイルシートの導入”の続きを読む
「印刷用CSS」について参照させていただきました。
→ “print this page”の続きを読む
MovableType のウェブログで、個別記事の印刷用ページを作ることを考える。印刷用ページには、記事の日付や内容を表示し、それ以外のサイドバーやメニューなどは表示ないようにする。#BL...
→ “印刷用ページを作るには”の続きを読む
次は何をカスタマイズしようかな〓?と アチコチブログの旅をしていたら・・・ Ma...
→ “MTで印刷用のデザインを用意してみた”の続きを読む
MT(Movable Type)で印刷用ページを作成する
→ “MT(Movable Type)で印刷用ページを作成する”の続きを読む
http://www.masahiko.info/blog/mt-tb.cgi/626







