ブログを印刷するためのスタイルシート変更

謹賀新年

---

　御覧の皆様、明けましておめでとうございます。m(_ _)m
　昨年末は年賀状をプリンタで印刷しようということになって、どのプリンタを買ったら良いか検討し、安売りされていたbrotherのDCP-155Cを買ったのですが、このプリンタにはカードスロットがあって、SDカードリーダーとしても使えるということで、携帯電話で撮影した画像を印刷したりパソコンに移したりすることにして、どのmicroSDカードをどの店で買うかも検討し、さらにはスキャナがついていてコピー機としても使えるしOCRソフトも付いているということで使い方を勉強し、年賀状を印刷したけれど、ふちなし印刷をしたら両端や上下が切れてしまったのでどうしたら良いかを検討し、フリーウェアを探して使い方を勉強するなど、いろいろと忙しくなってしまいました。何をどこで買うか検討するのに時間がかかったり、買った製品や手に入れたソフトを使いこなそうとして時間がかかったりするのが私の悪い癖です。録画したけれど見ていないテレビ番組も溜まってしまったので、まだまだ忙しい日が続きそうです。

　プリンタを買ったことで、各種情報が提供されているサイトを印刷することができるようになりました。たとえばＮＨＫの「ためしてガッテン」。普通に印刷すると、印刷する必要のない部分まで印刷されてしまうけれど、「ためしてガッテン」のサイトでは「印刷用ページ」が用意されています。気に入ったので、私のブログでも同じことができないか検討してみました。携帯電話用のページを流用できないかとも考えたのですが、Googleを使って探してみると、スタイルシートを使って簡単に印刷スタイルを設定できることが分かりました。そこで、私のブログでも印刷する際にサイドバーやヘッダが表示されないようにスタイルシートを変えてみました。

　まず、これまでのスタイルシートの記述を「@media all { }」で囲みます。

@charset "UTF-8";

/* \*/
@media all {
/* */

（既存の指定）

/* \*/
}
/* */

　「@media screen { }」で囲んだ方が良いのかもしれませんが、とりあえず「@media all { }」で囲みました。
　その下に、「@media print { }」で囲んで印刷用のスタイルを指定します。私のブログでは次のように指定しました。

/* 印刷用 */

/* \*/

@media print {

.sbHeader { display:none; }
#banner { display:none; }
#side-a { display:none; }
#side-b { display:none; }
.archive-title { display:none; }
.archive-bottom { display:none; }
#banner-main { display:none; }
#nice { display:none; }
#comment-write { display:none; }
#trackback-write { display:none; }
#footer { display:none; }

body { background:white !important; }
#container {
width :98%;
background:white !important;
background-image:none !important;
border:none !important;
}
#main {
float:none;
width :100%;
background:white !important;
background-image:none !important;
}
.articles {
width :100%;
background:white !important;
background-image:none !important;
}
.articles-title {
font-size:150% !important;
font-weight:bold !important;
text-decoration:underline !important;
background:white !important;
color:black !important;
}
.articles-title a:link{text-decoration:underline !important; color:black !important; }
.articles-title a:visited{text-decoration:underline !important; color:black !important; }
.articles-title a:active{ color:black !important; }
.articles-title a:hover{ color:black !important; }

}

/* */

　まずは、ヘッダやサイドバーなど印刷する必要のない部分を「display:none;」で隠し、本文の横幅が「px」で固定されていたら「width:98%;」などと「%」指定に変えて広げます。「width:auto;」の方が良いかもしれませんが、私のブログをFirefoxで見たときに少し変だったので、「%」指定にしました。他は「印刷プレビュー」で確認しながら、好みに合わせていろいろと指定します。「!important」は必要ない所もありそうですが、印刷時に印刷用のスタイルシートが優先されないと困るので念のために入れておきました。

　ただ、この方法には問題があって、ヘッダやサイドバーを印刷したい人が印刷できないなど根本的な問題の他に、私が使っているMacOS9.2.2のIE5.1.7では通常の閲覧でレイアウトが乱れてしまいます。私のブログでは印刷用のスタイルを指定するのをやめるかもしれません。このままでは悔しいので、工夫を続けそうですが…。その結果、見たい所だけ見ようと録画しておいた紅白歌合戦も見ないまま削除することになりそうで心配です。(^^;)

追記：
　MacIE5.1.7の通常閲覧でレイアウトが乱れる問題は、よくある方法（コメント行扱いさせる方法：上記には赤色で追記）でMacIE5.1.7に「@media all」と「@media all { }」を無視させることで解決しました。印刷スタイルをもっと見栄えよくするなど微修正はあるかもしれませんが、このまま継続したいと思います。

追記（2009/1/12）：
　スタイルシートを全てに適用する（media="all"）ファイルと印刷時だけに適用する（media="print"）ファイルに分けました。

追記（2009/2/7）：
　私のブログでは必要ないのですが、本文の所に背景画像を指定しているブログでは、「.articles」に「background-image:none !important;」を指定すれば背景画像が消えると思います。「#main」にも必要な人がいるかもしれません。上記スタイルシートには赤色で追記しました。
（追記：IE6では指定しなくても背景画像は印刷されないみたいです。印刷してませんが印刷プレビューで確認してみました。またFirefox3にはページ設定の「書式とオプション」に「背景色と背景画像も印刷」というオプションがあって、チェックしておかなければ背景画像が印刷されることはなさそうです。）

タグ：印刷 スタイルシート ブログ

コメント 4

はじめまして☆

さっそく、そのままコピペして使わせて頂きました（＾＾）
自分が見るだけのブログですので、コピーを手元に保存して置きたかったので助かりました。

本当にありがとうございました☆
by ゆうきCPA (2009-02-07 14:07) [id:c23108189] 

ゆうきCPA さん、コメントありがとうございました。m(_ _)m
お役に立てたのなられしいです。(^^)
ゆうきCPA さんのサイトで印刷プレビューを行ったところ、
本文の所に背景画像が残っちゃてますね。
印刷用のスタイルシートの方に
.articles {background-image:none !important;}
を入れれば消えると思います。
すでに印刷しちゃって手遅れでしたら、
返事が遅くなってしまって、ごめんなさい。m(_ _)m
by 正己 (2009-02-07 20:54) [id:c23115232] 

わざわざ更新していただいて、ありがとうございます（＾＾）
追記（2009/2/7）より、赤色部分も含め再度コピーペーストしてみましたが、どうやらハートは消えないみたいです。

私のブログのhtml編集の中で、
/head　下の
bodyの中にこのピンクハートを降らすように別サイトから受信するように書いているのですが、
<script type="text/javascript" src="http://www.image-life.com/sozai/js/heart.js"></script>

bodyの中に書き込んでいるから問題なのかもしれませんね？！
（あまりHTMLとCSS詳しくないです、すみません）（＾＾；）

今日実際にプリントアウトしてみました。
どうやらハートは印刷に入るようでした。しかしハート自体が小さいのと、ページ全体にまではハートが入らないので特別に気にはなりませんでした。

元々ブログを印刷する際に工夫したかった私の目的というのが、
ブログ横のブログパーツなどが入ってしまい、カラーコピーする際に無駄にインクを何度も使ったり、用紙を何枚も使ったりするこの2点を改善したかったので、正己さんより頂いたこの方法で、ブログを印刷するのには十分に満足しております（＾＾）

どうしても消したいと思う場合には、自分のhtml編集からこのハートのhtmlを消せばいいわけですし☆

更新までしていただき本当にありがとうございました☆　　ゆうきCPA


by ゆうきCPA (2009-02-09 00:11) [id:c23143982] 

Firefox3で見た時はハートに気付かなかったのですが、
IE6で見た時にハートが振ってきて驚きました。
IE6で印刷プレビューした時にハートが残っていたのに気付いたのですが、小さいからいいや、と私も思いました。(^^;
bodyの中に書いていたのですね。それならばスタイルシートのファイルで消すのは難しいです。bodyの中でそのJavaScriptの下に印刷時のスタイルシートを書くかJavascriptで消せると思いますが、もしも間違えたらトラブル続発で面倒なので、私なら無視しそうです。
追記したのは、Firefox3で印刷プレビューした時に残っていた畳の模様を消す方法なのです。そちらは印刷したらうざいし、インクがもったいないし、プリンタによっては文字の黒がにじむ結果になるので消した方が良いかな、と。追記に書きました通り、スタイルシートで指定しなくても印刷しない方法がありましたが…。
とにかく、インクが無駄にならない印刷ができたようで、良かったです。
報告していただき、ありがとうございました。m(_ _)m
by 正己 (2009-02-09 01:02) [id:c23144942]