印刷機能改善
印刷機能を改善し、よりきれいに印刷ができるようになりました！
改善前
改善後
プログラムの解説
エンジニアの方に向けて、追記したCSSを紹介します。
このhtmlに適用されているcssの最後に、以下のコードを追加します。
@media print {
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
まず、@media print で印刷時に設定されるCSSとして設定します。
次に、(-webkit-)print-color-adjust: exact; で要素の背景色などを強制的に反映させるよう設定します。
参考にさせていただいたサイトはこちらです。
[blogcard url=https://ensei1375.com/print-background/#toc1]
“【2023.10.29】印刷機能を改善しました！（背景色等を印刷に反映）” への5件のフィードバック
こんにちは！
家族の旅行に先立って、しおりを作ってプレゼントしたいと思いタビカンジ様のサイトを利用させていただいております。
日程を簡単に増やせるのがとても使いやすいと思います♡
行程をすべて打ち込んで、さぁ印刷だ！と思って、更新ボタンを押すとなぜか行程表がなくなり表紙とQRコードだけになってしまいます。
印刷もその形(表紙とQR)でしか印刷できません。
当方の操作ミス、やり方を見逃しているのでしょうか？
紙に印刷して渡したいと思っております。
また、オプション設定のアイコンも印刷できるようにするにはどのようにしたらよいでしょうか？
お手数おかけしますがご指南いただけましたら嬉しいです。
お問い合わせありがとうございます。
原因を探りましたが、具体的にはわかりませんでした💦
Google Chromeアプリでは正常に印刷機能が作動することが確認できていますが、Safari等ほかのブラウザアプリでは確認出来ておらず、印刷機能に対応していない可能性があります。
お手数ですがPCのGoogleChromeやEdge、またはChromeアプリから利用していただけると幸いです。
もしも、これらのブラウザサービスを利用しているのにも関わらず、うまく印刷ができない場合は、ご連絡いただけると幸いです。
家のプリンター
CanonTS8130で
印刷できなくなりました。
一昨日、一度はちゃんとできたのに、編集を何度もしてから再度印刷してみると突然できなくなりました。
解決法はありますか？
他のものはきちんと印刷できるので壊れたとかでは、ないです。
お問い合わせありがとうございます。
原因を探りましたが、具体的にはわかりませんでした💦
解決方法として、pcから印刷リンクを押し、新しいウィンドウが開いた後に、右クリック→印刷 を押してみてください。
もしも、印刷リンクを押しても、何も表示されない、白紙のページが表示されるといった不具合があればご連絡いただけると嬉しいです。
完全な解決に至らず申し訳ありません。
ご返答ありがとうございました。
数時間おいてから再度トライしてみたところ、普通に印刷できました。
一体何が原因だったのでしょうか。おそらくこちら側の何かしらの不手際と推測します。
少し様子を見るべきだったと反省しています。
申し訳ありませんでした。