ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。
しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。
Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。
灰 | 青 | 緑 | 黄 | 赤 | |
---|---|---|---|---|---|
鮮やか | 949495 | 2BAAE2 | 3DB471 | FED900 | E60033 |
薄い色 | F7F9F9 | F3FBFF | EAF9F4 | FFF7CB | FEF2F2 |
濃い色 | CCDADA | A3C6DA | ADD8CA | CDCC9A | D8B0AC |
今までは、彩度の大きめの色だったのですが、ちょっと派手な印象でした。
今回は少し落ち着いた色にそろえてみました。
こちらもどうぞ。
[Cocoon] ブログカードをラベルボックスのように表示するCSS
カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。 「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。 こちらがスタイルシートです。不要な項目を非表示(display: non...
[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
公開したブログ内の表の枠の色が、なぜか黒に変わっていました。 原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。 サイトの表の枠の色がおかしい? 表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。 どうも、デフォルトの色に戻ってしまっているようです。 Cocoonの表の枠の色 Cocoonでは、テーマで選んだ色(サイトキーカラー)がス...
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
最近は、表のデザインで、縦の枠線を付けないことが多いようです。 Spotifyの「支払いに問題がある」?【クレジットカード情報の更新】より 確かに、スッキリした印象になります。 ブログ内の表を CSS を変更してみました。 「border-width: 2px 0px;」という箇所が肝。横線(border-top, border-bottom)は 2px縦線(border-left, border-right)は 0px に指定されます。 /** 表の枠の色(縦線なし) 20...
QRコードを読み込むと、関連記事を確認できます。