【スポンサーリンク】

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。
しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。

Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした
鮮やか9494952BAAE23DB471FED900E60033
薄い色F7F9F9F3FBFFEAF9F4FFF7CBFEF2F2
濃い色CCDADAA3C6DAADD8CACDCC9AD8B0AC

今までは、彩度の大きめの色だったのですが、ちょっと派手な印象でした。
今回は少し落ち着いた色にそろえてみました。

こちらもどうぞ。

[Cocoon] ブログカードをラベルボックスのように表示するCSS
[Cocoon] ブログカードをラベルボックスのように表示するCSS
カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。 「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。 こちらがスタイルシートです。不要な項目を非表示(display: non...
[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
公開したブログ内の表の枠の色が、なぜか黒に変わっていました。 原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。 サイトの表の枠の色がおかしい? 表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。 どうも、デフォルトの色に戻ってしまっているようです。 Cocoonの表の枠の色 Cocoonでは、テーマで選んだ色(サイトキーカラー)がス...
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
最近は、表のデザインで、縦の枠線を付けないことが多いようです。 Spotifyの「支払いに問題がある」?【クレジットカード情報の更新】より 確かに、スッキリした印象になります。 ブログ内の表を CSS を変更してみました。 「border-width: 2px 0px;」という箇所が肝。横線(border-top, border-bottom)は 2px縦線(border-left, border-right)は 0px に指定されます。 /** 表の枠の色(縦線なし) 20...
QRコードを読み込むと、関連記事を確認できます。

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした
【スポンサーリンク】
タイトルとURLをコピーしました