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): 印刷用ページを作るには
関連
[]
トラックバック
[]