はてなダイアリーの印刷用スタイルシート

このブログのスタイルシートに、印刷用の設定を追加しました。基本的に、自分用のメモです。私はスタイルシートの専門家ではありませんので、おかしなところがあるかもしれません。参考にする方は、その点に注意してください。

スタイルシートに以下の内容を追加しました。なお、確認に使ったブラウザは、「Firefox 3.6.6」と「Internet Explorer 8.0」です。

@media print {
    /* 
     * ヘッダやサイドバーなど、印刷に不要なものを非表示にする。
     * ヘッダタイプは「細いヘッダ」と「太いヘッダ」の両方に対応しておく。
     */
    #simple-header, #banner, h1, h2, 
            .calendar, .sectionheader, .sectionfooter, 
            .comment, .refererlist, .sidebar {
        display: none;
    }
    
    /* 
     * 印刷範囲の調整。
     * 基本的に左右のマージン設定用だが、一応、上下のマージンも設定しておく。
     */
    body {
        margin: 20px 0;
    }
    
    /* 
     * 枠線は不要なので消す。
     */
    .hatena-body {
        border: none;
    }
    
    /* 
     * Firefox 3.6 : 100%でもよいが、少し広すぎる気がしたので95%にした。
     * IE 8.0      : 100%だと、なぜか横幅が非常に狭くなる。
     *               しかたなくアスタリスクハックで160%に設定した。
     * その他      : 未確認
     */
    .day {
        width: 95%;
        *width: 160%;
    }
    
    /* 
     * overflowを強制的にvisibleに設定する。
     * これをしないと、Firefoxで2ページ目以降が印刷されない。
     */
    .body {
        overflow: visible !important;
    }
}