Activity Memo: 印刷プレビューで見ると、二重刷りに見える

2003年11月24日

印刷プレビューで見ると、二重刷りに見える

[カテゴリ: MovableType関連 ]

この問題は、MovableTypeの問題ではなくて、スタイルシートの問題なのですが、とりあえず、カテゴリは「MovaleType関連」としておきます。

自宅webサーバ（windows2000pro+Apache+mysql)にMTをインストールしました。
(略)
普通に閲覧する分には問題ありませんが、印刷プレビューすると同じ画面が２重に重なって（ずれて）表示されます（ひとつの画面の上にもうひとつ重なって表示）。

気になったので、試しにこの「Activity Memo」を IE6.0 で表示させた後、印刷プレビューを実行してみると、以下のような状態になりました。

「Activity Memo」を IE6.0 で表示
印刷プレビューを実行

このように、エントリ(記事)の部分が二重刷りになります。

他の MovableType で運営しているサイトを見に行くと、以下のようなことがわかりました。

エントリ部分を左側、サイドバー部分を右側にしているところは、印刷プレビューしても問題なく表示される(IE で表示したときと、プレビュー表示したときの見え方に大きな違いがない)
エントリ部分を右側、サイドバー部分を左側にしている場合でも、Main Index 内の #links 部分が #content 部分より先に出現する場合は問題ない
(例: @ parallel minds)
エントリ部分を右側、サイドバー部分を左側にしている場合で、かつ #content 部分が #links 部分より先に出現する場合でも、margin や width の指定が px 単位だと問題ない
(例: Milano::Monolog)

「Activity Memo」の場合

エントリ部分を右側、サイドバー部分を左側にしている
#content 部分が #links 部分より先に出現する
margin や width をパーセント指定している

ことが原因で、二重刷りが発生しているようです。これは IE のスタイルシートの解釈部分の問題のような気がするのですが、とりあえず、以下のような方法で解決することができました。

その解決法とは、画面表示時と印刷時とで適用するスタイルシートを使い分けることです。具体的には、#content 部分および #links部分のスタイルを画面表示用、印刷用の2つ用意するということです。

変更前:

#content {
    position: absolute;
    background: #EEC;
    margin-left: 30%;
    margin-bottom: 20px;
    padding: 5px;
    width: 65%;
}

#links {
    width: 28%;
    margin-right: 5px;
}

変更後：

@media screen {
    #content {
        position: absolute;
        background: #EEC;
        margin-left: 30%;
        margin-bottom: 20px;
        padding: 5px;
        width: 65%;
    }
}
@media print {
    #content {
        position: absolute;
        background: #EEC;
        margin-left: 185px;
        margin-bottom: 20px;
        padding: 5px;
        width: 420px;
    }
}

@media screen {
    #links {
        width: 28%;
        margin-right: 5px;
    }
}

@media print {
    #links {
        width: 180px;
        margin-right: 5px;
    }
}

他の解決法としては、

(1) 素直に #content 部分を左、#links部分を右に表示するようにする(#content の position: absolute; をやめて、#links を float: left; にする)
(2) パーセント指定をやめる
(3)Main Index の #content 部分と #links 部分の出現順序を逆にする

の3つがあるのですが、

#links 部分が左、#content 部分が右にあった方が読みやすい(気がする)
いろんなウィンドウサイズで表示してもそれなりに見えるようにしようとするとパーセント指定は外せない
SEO を考慮すると #content 部分が先に出現した方が有利

という理由で、上記3つの対策は不採用としました。

スタイルシートの書き換えにより、以下のように、きちんと印刷プレビューできるようになりました。スタイルシート修正後の印刷プレビュー実行結果

11月24日 2時43分追記

「解決しました」と書きましたが、A4 1ページにおさまらないとき、 2ページ目以降がおかしくなりますね。

これは、みらのさんのところ(Milano::Monolog)でも印刷プレビューの2ページ目以降が二重刷り(多重刷り)になることから、「absolute を使う」と(IE での)印刷プレビューがおかしくなる、ということになりそうです。

解決法は absolute をやめるしかないのかもしれません。

11月25日 0時15分追記

結局、@media print では、#coment 部分を左側、#links 部分を右側に表示するようにしました。とりあえず、これで多重刷りは起きません。

投稿者: tsupo 投稿時刻: 2003年11月24日 01:52

コメントを投稿する

コメント投稿時に Internal Server Error と表示されることがありますが、ほとんどの場合、コメントの投稿はうまくいっています。このエラーが出たときは無視してください。

Access Count:
Last Modified: Friday, 18-Apr-2008 05:27:50 JST