実は半年前からこのブログでは「印刷用スタイルシート」を導入している。つまりこのブログを印刷する場合、プリンターに適した形で出力されるような仕掛けをしてあるのだ。
「ほとんど文字ばかりのページに印刷用の仕掛けはいらないだろう」と思うかもしれないが、ある日、自分のページの記事を資料として使おうと印刷したところ、行の右端の文字が切れて印刷されてしまった。このような場合、用紙を横向きにして印刷し直すことで、完全に印刷出来るようにはなるのだが、ファイルに綴じたときには文字方向が違うため不格好である。そこで印刷用スタイルシートを追加した。
このブログで使っているMovable Typeではもともと印刷用スタイルシートはない。もしMovable Typeで印刷用スタイルシートを使いたい場合は、以下の手順で追加する必要がある。
- CSSファイルを追加
- Movable Typeの管理画面から「テンプレート」の画面に入る
- 「インデックス」の「スタイルシート」のリンクを開き「テンプレートの内容」をコピーする
- また「テンプレート」の「インデックス」画面に戻り、右上の「テンプレートの新規作成」のリンクを開き、下記項目を入力する
- テンプレート名 = 印刷用スタイルシート
- 出力ファイル名 = 何でもよいが、当サイトでは「styles-print.css」にしている
- このテンプレートにリンクするファイル = 空白
- テンプレートの内容 = 上記2でコピーした「テンプレートの内容」を貼り付ける
- これらが入力できたら「保存」ボタンを押す。その後、再構築を促すメッセージが出る場合があるが、ここでは何もしない
- 「テンプレート」の「インデックス」画面で「印刷用スタイルシート」の項目があれば、第一段階は終了
- テンプレートの書き換え
- 各テンプレートでスタイルシートを参照しているテンプレートがあれば、
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
の部分を<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" media="screen,tv" />
に書き換える
<link rel="stylesheet" href="<$MTBlogURL$>styles-print.css" type="text/css" media="print" /> - テンプレートによっては再構築を求めるメッセージが表示される場合があるが、ここでは再構築しない
- 印刷用スタイルシートの編集
- 「テンプレート」の「インデックス」画面で「印刷用スタイルシート」のリンクを開き「テンプレートの内容」を下記の点に注意しつつ編集する
- 文字の色は出来る限り黒1色にする...家庭でも職場でもカラープリンターが普及していることから、無駄にインクを消費させない設計にするのが望ましい。またリンクの色もリンク先の訪問の有無に関係なく、すべて黒1色にする
- 印刷に不要な項目は下記のスタイルを適用し、印刷させないようにする...たとえば当ブログの場合、トップページの右側にあるリンクのリストなどは紙に印刷しても無意味なことから印刷されないように設定している。
{ display: none; }
- どんなサイズの用紙にも印刷できるようにするため、ページの横幅を指定しない
- ここまで出来れば「サイト再構築」から「すべてを再構築」を行う
ちなみに印刷用テンプレートの仕上がりを確認する場合はブラウザの「印刷プレビュー」機能を使うとよい。また、レンタルサーバーを利用している場合は、サーバー上で再構築を繰り返すとサーバーに負荷がかかるため、印刷用テンプレートの項目が出来た時点で、HTMLファイルと印刷用スタイルシートをパソコンにダウンロードし、ダウンロードしたスタイルシートを編集するのがよいだろう。ただしHTMLファイルのソースのスタイルシートの部分は、通常、フルパスで入っていることから、この部分を修正して編集作業を行う。そして完成すれば、管理画面上でスタイルシートを書き換えて再構築する。
※Movable Typeのテンプレートを編集するついでにシックスアパート社から告知されている「Atomフィードの不具合」を修正しておくこともお勧めします