[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

インターネット小話プログラミングホームページ運用
スポンサーリンク

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。

すべてのページではなく、特定の記事だけで起こりました。

保護者の「承認」がないとアプリをインストールできないようにするには?【Google ファミリーリンク】 – スマホ教室ちいラボ

スポンサーリンク

プリンタの問題ではなかった

はじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。

ページ切替えの一番上に画像があったときに、直後の文章の位置が上がっていて、結果として重なっているようです。

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

画面で見る分には、文字は重なっていません。

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

imgのCSS項目で重ならなくなったパターン
  • max-height: 450px ->100%
  • display: block -> inline

どちらか一方の設定だけでも重ならなくなりました。

ここで、気になったのが、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コードを読み込むと、関連記事を確認できます。
[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】
タイトルとURLをコピーしました