[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

2022.03.27

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。

これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。

特に、このホームページでは、多くのアイコンリスト、ラベルボックスを「枠なし」「薄い背景色」で設定しています。印刷時に、背景色がなくなってしまうと、構造がわかりにくくなってしまうのです。

そこで、設定した背景色をもとに、枠（濃いめ）をつけるようにしました。

WordPressの設定の「テーマエディタ」から「style.css」に追加しました。

/*** 印刷時のアイコンリスト・ラベルボックスの枠*/

@media print {
  .iconlist-box.blank-box.has-watery-blue-background-color, html .body .label-box.has-cocoon-white-border-color.has-watery-blue-background-color .box-content {
    border: 2px solid #56C1FF;
    background: transparent;
  }
  .iconlist-box.blank-box.has-watery-green-background-color, html .body .label-box.has-cocoon-white-border-color.has-watery-green-background-color .box-content {
    border: 2px solid #8EFA00;
    background: transparent;
  }
  .iconlist-box.blank-box.has-watery-yellow-background-color, html .body .label-box.has-cocoon-white-border-color.has-watery-yellow-background-color .box-content {
    border: 2px solid #FEAE00;
    background: transparent;
  }
  .iconlist-box.blank-box.has-watery-red-background-color, html .body .label-box.has-cocoon-white-border-color.has-watery-red-background-color .box-content {
    border: 2px solid #FF968D;
    background: transparent;
  }
}