ホームページのデザインを崩さず、ほぼコーピー&ペーストでキャラクター展示を実現するデザインCSS。
キャラクターの展示だけでなく、プロフィール欄にも。
設置方法
<head>~</head>の間で「chara-set.css」を読み込みんでください
（href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください）
<link rel="stylesheet" href="chara-set/chara-set.css">- ドキュメント（2ページ目にあります）に沿って、HTMLファイル内にタグを記述してください
サイトのデザインに合わせて設定する
このデザインCSSでは以下のカスタムプロパティを変更することでデザインの変更が可能です。
| カスタムプロパティ | 概要 | 初期値 |
|---|---|---|
--ecs-gap-pc | 要素間余白（PC） | 20px |
--ecs-gap-sp | 要素間余白（スマホ） | 10px |
--ecs-list-border-width | リスト要素の線幅 | 1px |
--ecs-list-border-color | リスト要素の線色 | #333333 |
--ecs-list-border-radius | リスト要素の角丸サイズ | 5px |
--ecs-list-bg-color | リスト要素の背景色 | #ffffff |
--ecs-list-btn-count-pc | ボタンリスト要素の1行の個数（PC） | 6 |
--ecs-list-btn-count-sp | ボタンリスト要素の1行の個数（スマホ） | 2 |
--ecs-list-img-count-pc | 画像リスト要素の1行の個数（PC） | 6 |
--ecs-list-img-count-sp | 画像リスト要素の1行の個数（スマホ） | 3 |
--ecs-span-bg-color | 準備中の背景色 | #333333 |
--ecs-span-tx-color | 準備中のテキスト色 | #ffffff |
--ecs-data-border-width | データ要素（項目名）の線幅 | 1px |
--ecs-data-border-radius | データ要素（項目名）の角丸サイズ | 5px |
--ecs-data-border-color | データ要素（項目名）の線色 | #333333 |
--ecs-data-bg-color | データ要素（項目名）の背景色 | #333333 |
--ecs-data-text-color | データ要素（項目名）のテキスト色 | #ffffff |
--ecs-history-border-width | 履歴要素の線幅 | 8px |
--ecs-history-border-color | 履歴要素の線色 | #cccccc |
--ecs-history-circle-color | 履歴要素の丸の色 | #333333 |
--ecs-img-sm-width | 画像（小）の幅 | 100px |
--ecs-img-border-width | 画像の線幅 | 0 |
--ecs-img-border-color | 画像の線色 | #ffffff |
--ecs-img-border-radius | 画像の角丸サイズ | 0 |
更新履歴
- 2022.11.18公開・配布開始
- 2023.01.27画像要素の追加
プロフィール利用時のサンプル追加- 円形画像のレイアウト追加
- 正方形・円形（小）のレイアウトを追加
- 画像設定関係のカスタムプロパティ（4件）追加
ドキュメント
次のページにドキュメントをご用意しています。
