futuremix

このサイトは Movable Type を利用しています。ウェブログサイトなどでは、左または右にスペースを作って、メニューや記事一覧、広告などを表示しているのを多く見かけます。このサイトもその一例です。

ところが印刷すると、本文は用紙1枚に収まるのに、横のメニューだけが2ページ目まで続いているということがよくあります。なんとも勿体ない話です。そもそも横のメニューはナビゲーションのために存在するので、印刷結果では不要な場合がほとんどです。

そこで、右側に並んでいるメニューや、広告類が印刷されないようにしてみました。トップページなどで「印刷プレビュー」してみるとわかると思います。

これはスタイルシートを使ってデザインしているサイトなら簡単にできます。Movable Type のデフォルトテンプレートの場合は、スタイルシートの末尾に

  @media print {
      #links {
          display:none;
      }
      div#content {
          margin-left:0;
          width:auto;
      }
  }

という記述を加えるだけです。カスタマイズしていたり、他のテンプレートを利用している場合は、それに合わせて書き換えてください。

他にもこのサイトでは印刷時に、広告を非表示にしたり、ブラウザが対応してればリンクの URI を括弧付きで後ろに印刷するようにしています。