教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。
すべてのページではなく、特定の記事だけで起こりました。
・保護者の「承認」がないとアプリをインストールできないようにするには?【Google ファミリーリンク】 – スマホ教室ちいラボ
プリンタの問題ではなかった
はじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。
ページ切替えの一番上に画像があったときに、直後の文章の位置が上がっていて、結果として重なっているようです。


PCのChromeブラウザの「検証」で、レンダリングのメディアタイプを「印刷」にします。


画面で見る分には、文字は重なっていません。
画像に関するCSSのオン・オフを変更してみると、いろんな条件で、重なりが解消しました。


どちらか一方の設定だけでも重ならなくなりました。
ここで、気になったのが、displayです。
というのも、「継承」したCSSが適用されていないからです。


@media print .wp-block-image, .size-large {
display: inline !IMPORTANT;
}
上書きしているCSSを見てみると、
.wp-block-image img {
display: block;
}
です。
そこで、style.cssに
@media print {
.wp-block-image img {
display: inline !IMPORTANT;
}
}
を追加してみます。
無事に重ならずに印刷できました。




どうして、今回、特定のページでだけ、この現象が発生したのか不思議です。
CSSクラスの”.size_large”などは、別のページでも使っていたのですが……。
こちらもどうぞ


ブログの印刷時のスタイルを変更する〜@media print
スタイルシートは表示画面だけではなく、印刷時のスタイルを指定することもできます。今回は、先日(2020年6月1日)更新した。追加スタイルシートの中身をまとめておきます。追加CSSの中身このブログは冊子印刷でA4に2ページ分...


[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】
ウェブページには、リンクをたどっていくことができるメリットがあります。教室では、ちいラボのブログ記事を冊子印刷にしてお渡ししているのですが、紙媒体では 関連する記事を読むことができません。そこで末尾にQRコードをつけて、ス...


DokuWikiの印刷用CSSを変更する 〜 userprint.css
印刷時のCSSを変更することができることがわかったので、教室内の情報共有ウィキ(DokuWiki)の印刷用CSSも変更することにしました。userprint.cssを作成するDokuWikiの場合は、confフォルダにus...


フチなし印刷で色が薄くなる? 【顔料インクと染料インク】(Canon G5030の場合)
こんにちは。チラシの印刷でフチなし印刷をしてみたら、おんなじデータなのに全然色が違ってびっくりしました。ポイント「フチなし印刷」にすると、「染料インク」を選択され、黒が薄くなって印刷される。印刷プレビューで比べてみると...
QRコードを読み込むと、関連記事を確認できます。