TopCSS > 2005年9月
2005年9月20日

印刷用スタイルシート

September 20,2005 9:20 PM
Tag:[, , ]
Permalink
ブラウザでの表示

印刷用スタイルシートにより出力の最適化を行うカスタマイズです。

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

以下設定方法です。

印刷時の出力

1.印刷用スタイルシート追加

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

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

2.印刷用スタイルシートの修正

1項でコピーしたスタイルシートから、印刷に不要な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 プロパティを与えます。

3.テンプレートに 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 要素を追加します。

4.色要素を変更

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

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

Comments [7] | Trackbacks [2]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3