ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。
しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。
Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。

灰 | 青 | 緑 | 黄 | 赤 | |
---|---|---|---|---|---|
鮮やか | 949495 | 2BAAE2 | 3DB471 | FED900 | E60033 |
薄い色 | F7F9F9 | F3FBFF | EAF9F4 | FFF7CB | FEF2F2 |
濃い色 | CCDADA | A3C6DA | ADD8CA | CDCC9A | D8B0AC |
今までは、彩度の大きめの色だったのですが、ちょっと派手な印象でした。
今回は少し落ち着いた色にそろえてみました。
こちらもどうぞ。

[Cocoon] ブログカードをラベルボックスのように表示するCSS
カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さ...

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
公開したブログ内の表の枠の色が、なぜか黒に変わっていました。 原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。 サイトの表の枠の色がおか...

[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
最近は、表のデザインで、縦の枠線を付けないことが多いようです。 Spotifyの「支払いに問題がある」?【クレジットカード情報の更新】より 確かに、スッキリした印象になります。 ブログ内の表を CSS を変更してみました。 「border-...
QRコードを読み込むと、関連記事を確認できます。
![[CSS] 印刷用のラベルボックスの枠線の色を渋めにした](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2023-04/css-dark-color-list/)