印刷用スタイルシート

印刷用スタイルシート

Posted at September 20,2005 9:20 PM
Tag:[CSS, Customize, Print]
ブラウザでの表示

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

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

以下設定方法です。

印刷時の出力

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

印刷用スタイルシート作りました from やむやむ
小粋空間 さん : 印刷用スタイルシート を真似して、やむやむでも 印刷用のスタ... [続きを読む]

Tracked on September 21, 2005 3:23 PM

隠居のBlog備忘録: MT4.1 で エントリー部分のみを印刷する from Atelier
 友人から、ブログのヘッダー部分や右サイドメニューを外して、エントリー部分のみを... [続きを読む]

Tracked on August 24, 2008 5:55 PM
コメント

おはようございます。
スタイルシートに #links-left-box の項目がないのですが、
#links-left #links-right を ゴッソリ消しちゃえばいいのでしょうか?

[1] Posted by さえら : September 21, 2005 6:02 AM

なぁ??んとなくわかりました。消しちゃダメですね。
#links-left {
display:none;
}
にしないと・・・
まだすっきりスタイルともいえないんだけど、印刷用のスタイルシートができました。
だけど、公開テンプレートには やっぱり #links-left-box ってのは ないですよね?

[2] Posted by さえら : September 21, 2005 11:16 AM

いつも一度で質問がまとまらなくてすみません。
IEでは 通常のと 印刷用と じょうずに見た目をわけることができたんですけど
Firefoxで見ると 中央カラムが 横いっぱいに広がってしまっています。
どこをどう修正すればいいのかわからず困っています。

[3] Posted by さえら : September 21, 2005 12:46 PM

ホント何度もすみません。直りました。
ていうか、どうして直ったのかわからないんです。
Firefox って スタイルシートがちゃんと認識されるのに時間がかかる・・・?
な??んてことないですよねぇ?だけど、なにもしてないのに直ったんです。不思議・・・

[4] Posted by さえら : September 21, 2005 2:55 PM

>さえらさん
こんばんは。
ご利用&トラックバックありがとうございます。
推測ですが、Firefoxで直ったのはキャッシュに残っていたCSSが更新されたからではないでしょうか。

あと、公開テンプレートの旧バージョンのスタイルシートには #links-xx-box の指定がないので追記しておきました(IE6の後方互換モード対策で途中から追加したセレクタです)。

なにはともあれうまくできてよかったです。

[5] Posted by yujiro : September 22, 2005 2:17 AM

display:none;をclassに指定することはできないのでしょうか?
どうも効かなくて・・・

[6] Posted by いちご : August 8, 2008 8:15 PM

>いちごさん
こんにちは。
ご質問の件ですが、class に指定するのであれば、(X)HTMLマークアップの該当の要素に class 属性を追加してはいかがでしょうか。
それではよろしくお願い致します。

[7] Posted by yujiro logo : August 11, 2008 4:11 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)