ラベルボックス

[CSS]ラベルボックスをスライド画像風にした プログラミング

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。 まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。 ラベルボックスのスライド化 枠線を半透明のグレーに設定 ラベル背景色を明るいベージュに変更 要素の幅を内容に合わせて自動的に調整 要素の左右の余白を自動的に調整 これをカスタムクラス「slide」に追加します。 ラベルボックスのスライド化 枠線を半透明のグレーに設定 ラベル背景色を明る...
2024.06.17 2024.08.18
プログラミングホームページ運用
[CSS] 印刷用のラベルボックスの枠線の色を渋めにした とりあえずのメモ

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

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。 Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。 灰青緑黄赤鮮やか9494952BAAE23DB471FED900E60033薄い色F7F9F9F3FBFFEAF9F4FFF7CBFEF2F2濃い色CCDADAA3C6DAADD8CACDCC9AD8B0AC 今までは、彩度の大きめの色だ...
2023.04.03 2023.07.11
とりあえずのメモニッチな話題ホームページ運用
[Cocoon] ブログカードをラベルボックスのように表示するCSS プログラミング

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。 「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。 こちらがスタイルシートです。不要な項目を非表示（display: non...
2023.03.25 2023.03.26
プログラミングホームページ運用