隠居のPC備忘録：ブログ記事を印刷する
ブログ記事をパソコンの画面だけではなく、ハードコピーにして残しておきたいという要求もある。私たちのテンプレート（スタイル）では、画面に表示されているそのまま印刷すると右サイドカラムやヘッダー・フッターが印刷されることになる。
MT7にバージョンアップする前には、本文の記事と写真サムネイルだけをプリントあるいは PDF化しておくことができるようにカスタマイズしていたが、バージョンアップしてから、そのときのカスタマイズがなくなってしまっていた。どうしてやったのかと過去のブログの記録を探してみたが、見つからなかった。ちゃんと記録しておかなったようだ。
それで、新たにググッてみると、以前に実施した思える方法が見つかった。Print 用の CSS を作成し、印刷するときには、その CSS を使用するように、HTML のコードに指示すればいいことがわった。
これで、右サイドカラムやヘッダー・フッターが印刷されることはなくなったが、ただブラウザごとに異なる結果となる。特に、初めて print用カスタマイズを設置したときには存在していなかった Microsoft Edge での印刷が一番芳しくなく、Internet Explorer がもっとも良い結果であった。
参照例：印刷時にのみ有効となるスタイルシートを設定する方法
ただ、この方法で右サイドカラムやヘッダー・フッターが印刷されることはなくなったが、印刷時に、適切な位置でページ替えをする方法が見つからなかった。このような事案の解決は、Web ページの先進国である英語圏のページでヒットすることが多い。
[CSS for print] というようなフレーズでググッてみると、以下のような英語のページがヒットした。
How to Create Printer-friendly Pages with CSS
このページに、求めていた記述があった。【Page Break】の部分である。
表を印刷するとき、表の途中で印刷が切れてしまわないようにするには、次のような CSS を記述すればよいことがわかった。実際に、print 用 CSS に記述してみると表の印刷前にページ替えが実行される。
table {
page-break-inside: avoid;
break-inside: avoid;
}
私達のブログでは、表の中で、左に（あるいは右に）サムネイル写真、その隣に写真の説明文といった構成で一枚づつの写真を行替えしていることが多い。それで、上述の CSS を真似て、table 要素を table の子要素である tr にしてみるとテーブル内の行替えでページ印刷されるようになった。Page Break を十分に理解はできていないが、とりあえず満足している。
今の所、Google chrome が一番期待に答えてくれている。
現在、導入している CSS は以下のようなものである。
/* print.css */
header, footer, aside, nav, form, iframe, .menu, .hero, .adslot {
display: none;
}
tr {
page-break-inside: avoid;
break-inside: avoid;
}
ができる。
