Webサイトを印刷するときに広告を表示するとページングがずれてしまうため、印刷時だけ広告を非表示にしてみました。その時の方法を紹介します。

CSSで印刷時に非表示にする

CSSで@media printを指定してdisplay: noneとすることで、プリント時に非表示とするスタイルを作ることができます。ここではno-printという名前のクラスを作って囲っています。

@media print {
  .no-print {
    display: none;
  }
}

非表示にしたいエリアをpタグやdivタグで囲いここで定義したスタイルを適用します。これで完成です。

<p class="no-print">
      <!-- adsense 広告 -->
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4394143721990901"
        crossorigin="anonymous"></script>
      <!-- そろばん -->
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4394143721990901" data-ad-slot="8716646899"
        data-ad-format="auto" data-full-width-responsive="true"></ins>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      <!-- adsense 広告 ここまで-->
    </p>