chara set

parts

ホームページのデザインを崩さず、ほぼコーピー&ペーストでキャラクター展示を実現するデザインCSS。

キャラクターの展示だけでなく、プロフィール欄にも。

設置方法

  1. <head>~</head>の間で「chara-set.css」を読み込みんでください
    href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="chara-set/chara-set.css">
  1. ドキュメント(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件)追加

ドキュメント

次のページにドキュメントをご用意しています。

タイトルとURLをコピーしました