印刷編
《注意》当印刷のCSSは HAIK v7.2.1以降は使用しないでください。HAIKの印刷機能が改善されています。(2018.02.24追記)
haikで画面の印刷を行うと、想像していたものとかなり異なる結果になり、びっくりする人が多いでしょう。
そこでなるべく画面表示に近い印刷ができるようにスタイルシートを改造してみます。
改造前のhaikの印刷の結果は、以下のようにリンク先のURLがぞろぞろと表示されます。また、見出しなどの文字がやたらと大きかったりします。
アイキャッチ画像は印刷されません。
デフォルト状態で印刷した画面
CSSを改造して印刷した画面
また用紙のサイズと縦置き、横置きにより印刷結果が異なります。
haik_seed（メニューあり）で作成した当サイトで確認した結果。
(Windows 10, Chrome, CubePDFでPDF出力)
| 用紙サイズ | 縦・横 | 結果 | 備考 |
|---|---|---|---|
| A5 | 縦 | スマホの画面表示 | |
| A4 | 縦 | スマホの画面表示 | ※FireFoxはPCの画面表示 |
| A4 | 横 | PCの画面表示 | |
| A3 | 縦 | PCの画面表示 | |
| A3 | 横 | PCの画面表示 |
これは、ブラウザ、プリンタ、PCなどの環境により結果が異なります。
以下のスクリプトをフッター内にコピペします。
// 印刷用のCSS
#beforescript{{
<style type="text/css">
<!--
@media print {
#toolbar_upper_max {
display:none;
}
#shortcut_list {
display:none;
}
a[href]:after {
content: "";
}
abbr[title]:after {
content: "";
}
/* 大見出し h1 */
.haik-headcopy h1 {
font-size: 11px;
}
/* メニューの見出し h2 */
.haik-palette-orange .haik-menu h2, .haik-palette-orange .haik-article- menu h2 {
font-size: 16px;
font-weight: bold;
}
/* メニューの見出し h3 */
.haik-palette-orange .haik-menu h3, .haik-palette-orange .haik-article- menu h3 {
font-size: 12px;
}
/* コンテンツの見出し h2 */
.haik-palette-orange .haik-container h2 {
font-size: 22px;
}
/* コンテンツの見出し h3 */
.haik-palette-orange .haik-container h3 {
font-size: 20px;
}
}
/* @media print */
-->
</style>
}}
これで、少しは画面表示に近いものが印刷されるようになります。
ナビがまだ横に並ばないのは気になっていますが...
ご意見箱
皆様のご意見をお待ちします。
- さっそく使ってみました。haikのデフォルトよりずっと良くなりました。
ただ用紙サイズでA４縦だとスマホ用レイアウトになってしまうのは相変わらずですね。
印刷出力もレスポンシブなんでしょうけど、画面表示と違う印刷結果になるのはどうかなあと思います。
-- うみほし 2016-11-26 (土) 16:11:34 - 印刷テスト続報。このスクリプトを使っても、
Qblogの印刷では、サムネイル画像が文字になってしまいます。
これも何とかならないかなと思います。
HAIKの印刷はなかなかにやっかいな問題です。 -- うみほし 2016-11-26 (土) 21:12:15 - うみほしさん
ブラウザによっても結果が異なるようです。
Qblogの印刷で、サムネイル画像が文字になる？
よくわかりません。私のサイトではブログのサムネイ画像は表示されますが... -- tomzo 2016-11-28 (月) 01:09:03 - 環境によって違うんですね。
この点は謎です。他のサイトではサムネイルは印刷されるんですが、自分のサイトはダメですね。
-- うみほし 2016-11-28 (月) 07:39:12 - マイクロソフトのEdgeではA4縦でも印刷時に縮小するとPC画面通りになりました。
ただブログのサムネイル画像が表示されないのは同じでした。
-- うみほし 2016-11-28 (月) 10:34:13 - その後判明した結果です。
tomzoさんのブログではサムネイル画像の印刷ができました。
私のサイトとの違い表示方法だけなので、seedのテーマ編集で、ブログの表示をグリッドからリストに変えたところ、サムネイル画像が印刷できました。
どうやらグリッド表示ではサムネイル画像が印刷されないようです。どういう仕様なのか謎です。
-- うみほし 2016-11-28 (月) 16:02:17 - そうですね。グリッド表示のサムネイルが印刷されないようです。
ちょっと見てみましたが、グリッドのときは画像がCSSで背景画像となっているので印刷されないようです。
通常のブログの画像は、背景画像にはなっていません。
これは、アイキャッチが印刷されないのと原因は同じではないかと思われます。
うみほしさんのサイトを当サイトの「相互リンク」に追加させていただきました。これでよろしいですか？
-- tomzo 2016-11-28 (月) 23:00:41 - リンクありがとうございます。
アイキャッチとサムネイルが背景画像扱いとしても、クロームの印刷オプションで「背景のグラフィック」をチェックしても効果が無いですね。
-- うみほし 2016-11-29 (火) 08:39:44 - この印刷のTipsすごいですね。私にとっては、It's like a magicでした。ありがとうございました。 -- shigeuchino 2017-05-23 (火) 18:19:45
- shigeuchino さん
少しはお役に立てたようでうれしいです。
-- tomzo(管理人) 2017-05-25 (木) 00:13:51