2007_08_23　記

[序論]

MovableTypeで印刷用ページを作成する。
二つの方法を発見した。

ひとつはスタイルシート(CSS)へのリンクを、ディスプレイで表示するものと印刷プレビュー用のものをそれぞれ作り印刷するときは印刷用スタイルシートで印刷する方法。

もうひとつはjavascriptを使って印刷用のスタイルシートに切り替える方法。

そして、最終的にはこれらの方法をコンボしてみた。

[方法A]

[参考]MTで印刷用ページを作成するには？ ? #BLOG
上記のページを参考にする。

注)私のMTのバージョンは「Movable Type 3.33-ja」である。

スタイルシートへのリンクに手を加える。
デフォルトならば、

これを、

と書き換える。
「media=""」で選択された状況の時に、リンクされたスタイルシートが使われる。screenはスクリーン,tvはテレビ画面,printはプリントするときである。
ディスプレイ上で表示するときは「styles-site.css」を使い、プリントプレビュー画面では「styles-print.css」が読み込まれる。

二行目にhrefで「styles-print.css」を呼んでいるので、当然ながら「styles-print.css」という名前のスタイルシートを作らなくてはいけない。

Movable Type 3.33-jaのバージョンならば「テンプレートの新規追加」でテンプレート名(適当),出力ファイル(styles-print.css)とすれば大丈夫なはず。

ファイルの内容は基本的に「styles-site.css」と同じにして、不必要な部分を「 display: none;」で表示しないようにする。

たとえば、コピーアンドペーストで内容を貼り付けた最後の行に

をつけると、印刷プレビューでbeta,comments,content-nav,trackbacksに関連するものが表示されなくなる。

注)ただし、Firefoxの場合、長い文章を印刷しようとすると印刷プレビューで1ページ分だけ表紙された後、文章が切れてしまうバグがある。
これについては後日。

[方法B]

これは以下のページに紹介された方法。
javascriptを使って切り替えている。
[参考]nlog(n): 印刷用ページを作るには

上記のページを読んだほうが丁寧だとおもう。

[方法AとBのコンボ]

方法Bは非常に優れた方法だと思う。
しかし、javascriptを無効にされるとどうしようもない。
そこで、苦肉の策を考えてみた。

まず、個別エントリー用のスタイルファイルの中の

を

に書き換え、その下に

を挿し込む。

これは、javascriptが無効のときによってstyles-site.cssから要らない部分を削るstyle-print.cssを読み込むようにしている。
ベースになるスタイルシートは「styles-site.css」内にあるので、「style-print.css」の中身は

など、あるいはさらに変更したい部分を書き加える。
あとは、方法B と同様にして、個別エントリー用のスタイルファイルの本文中の任意の場所に

を挿し込む。

何をやっているのかをまとめると、

あまり美しくないが、これでjavascriptが無効になっていてもプリントできるのではないかと思う。

ちなみに、firefoxで印刷が1ページ分で切れるのは（いろいろ原因があるようだが、）
私が確認した範囲では、スタイルシート内の
「overflow: hidden;」が関係している様子。
これは「overflow: auto;」でも「/* overflow: auto; */」とコメントアウトしてもだめだったが、
「overflow: visible;」で取り合えず表示されるようになった。

参考
[]MTで印刷用ページを作成するには？ ? #BLOG
[]nlog(n): 印刷用ページを作るには
関連
[]
トラックバック
[]