スクリーン用と印刷用のCSS

ブラウザーで見てくれているときには「メニュー」はあった方が良い。
が、
もしも、もしも僕のサイトを印刷して見てくれる人がいるとしたら、そのときには「メニュー」は邪魔だよね。記事をページの幅いっぱいに出力される方が良いよね。
どうすればいいかな～？
その方法には複数の選択肢があるようだが、僕はスタイルシートを画面用と印刷用の２つ用意する方法にした（１つのスタイルシートで画面用、印刷用に対応することも可能なようだ）。

まず、「index.html」の中の最初の方にあるスタイルシートの部分を２つ用意する。

<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” media=”screen, handheld”/>
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site-p.css” type=”text/css” media=”print”/>

ごらんのように「media」という属性で制御する。「screen,handheld」が画面用。「print」が印刷用だ。
さて、上記のようにしたら、元々あるスタイルシート「styles-site.css」を同じ内容で「styles-site-p.css」の様に印刷用を作ります。
続いて、印刷用のスタイルシートの中で、メニューで使っている部分を表示しないように設定するわけです。

#links {
    display: none;
    ……
    }
#menu {
    display: none;
    ……
    }

上記のように、メニューで主に使っている「links」や「menu」といったカテゴリーに「display:none;」という記述を追加します。これだけで、印刷時にはメニューが印刷されなくなります。
ここまでの設定を実施して、やってみてくださ～い。