印刷ページの作成にチャレンジしてみました。
ブログの表示画面上に「印刷画面を表示」を表示させ、クリックするとナビゲータを外したコンテンツのみの印刷用ページを表示します。この画面を印刷すると不要なナビゲータがないすっきりした印刷物となります。
作り方：
画面表示用ＣＳＳと印刷用ＣＳＳを準備します。画面表示用スタイルシートはＭＴが準備した基本ＣＳＳはそのままにして、３カラムへの変更や個人の趣味に合うよう細かくカスタマイズします。この追加のスタイルをスタイルシート１として保存します。次にこのカスタマイズしたスタイルシートを印刷用スタイルシートにコピーして、印刷専用を作成します。
エントリー・アーカイブ・テンプレートにスタイルシートを追記し、スクリプトも併せて追加します。
エントリー・テンプレートの例（一部）
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" media="print,screen,tv" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-disp.css" type="text/css" media="screen,tv" />
<script><!--
var mode = location.search.substring(1);
if (mode == "print") {
document.write('<link rel="stylesheet" href="<$MTBlogURL$>styles-print.css" type="text/css" />');
}
//-->
</script>
<NOSCRIPT><link rel="stylesheet" href="<$MTBlogURL$>styles-print.css" type="text/css" media="print"/></NOSCRIPT>
styles-print.css の例（一部）
この内容は styles-disp.css をコピーし、一部を修正したものです。
#banner { display: none; } /* トップバナーの非表示 */
.layout-three-column #alpha { display : none; } /*左メニューを非表示 */
.layout-three-column #beta {
width: 650px; /* 印刷用紙サイズに合わせて縮める */
margin: 0 ;
}
.layout-three-column #gamma { display: none; } /* 右メニューの非表示 */
.entry {
position: static;
overflow: visible ; /* Firefox でコンテンツ表示が２ページのみに表示されて切れる問題を修正 hidden から visible へ変更 */
clear: both;
width: 100%;
margin-bottom: 20px;
}
コメントする