コメントスキンを作る

コメント欄の見た目を、CSS 1枚で変える素材です。使う人は〔配信画面一括設定〕の〔コメント表示〕でスキンを選び、 あなたが用意した「つまみ」で色や形を変えられます。

入れるもの

skin.css は配信画面に読み込まれ、下の要素に当たります。同じ zip に入れた絵（png など）やフォント（woff2 など）は、 url(mark.png) のようにファイル名だけで指せます。

当てられる要素

コメント1件は、次の要素でできています。状態（配信者・初見・投げ銭など）は、行の data- で分かります。

配信画面が渡す変数

利用者がコメント表示の設定で決めた値です。スキンの中で使えます（同じ名前を自分で決めないでください）。

つまみ（params）

meta.json の params に書くと、コメント表示の設定（スキンを選んだ下）にその欄が出ます。key は -- で始まる CSS の変数名で、 利用者が動かした値がその変数に入ります。動かすまでは何も入らないので、既定の値は skin.css の :root に書いておきます。

label（と英語の labelEn）が欄の名前になります。presets は「色の見本」です。押すと、そこに書いた変数の値がまとめて入ります。値は "#fff0f4" のように文字で書いてください。

見本

次の見本は、もりあげログで実際に入れて、配信画面に描かれることを確かめたものです。これを土台に作り始めるのがおすすめです。

meta.json

{
  "format": 1,
  "kind": "comment-skin",
  "id": "sample-card",
  "name": "見本のカード",
  "nameEn": "Sample Card",
  "version": "1.0.0",
  "author": "Lino Labs",
  "license": {
    "text": "作り方の見本です。改変も再配布も自由です。ご自分の素材の土台にしてください。",
    "url": "https://lino-labs.com/docs/creators/"
  },
  "description": "左に線の入った、四角いカード。色・角の丸み・影・書体を変えられます。",
  "descriptionEn": "A square card with a line on the left. You can change the colours, corner radius, shadow and font.",
  "tags": ["見本", "シンプル"],
  "tagsEn": ["Sample", "Simple"],
  "params": [
    { "key": "--card-bg", "type": "color", "label": "カードの色", "labelEn": "Card colour", "default": "#1f2a44" },
    { "key": "--card-accent", "type": "color", "label": "線と名前の色", "labelEn": "Line and name colour", "default": "#9fe1cb" },
    { "key": "--card-radius", "type": "range", "label": "角の丸み", "labelEn": "Corner radius", "min": 0, "max": 24, "step": 1, "unit": "px", "default": 10 },
    { "key": "--card-shadow", "type": "select", "label": "影", "labelEn": "Shadow", "default": "none",
      "options": [
        { "value": "none", "label": "なし", "labelEn": "None" },
        { "value": "0 4px 14px rgba(0,0,0,.45)", "label": "あり", "labelEn": "On" }
      ] },
    { "key": "--skin-font", "type": "font", "label": "書体", "labelEn": "Font" }
  ],
  "presets": [
    { "name": "夜", "nameEn": "Night", "--card-bg": "#1f2a44", "--card-accent": "#9fe1cb" },
    { "name": "桜", "nameEn": "Sakura", "--card-bg": "#fff0f4", "--card-accent": "#e86a92" }
  ]
}

skin.css（あなたが書く部分）

/* 見本のカード（コメントスキンの作り方の見本・https://lino-labs.com/docs/creators/comment-skin/）
   配る skin.css は、この中身のうしろに「どのスキンにも要る土台」（build/skins/_common.css）を貼ったもの。 */

/* つまみの既定の値。つまみを動かすまでは、ここの値が使われる */
:root{
  --card-bg:#1f2a44;
  --card-accent:#9fe1cb;
  --card-radius:10;
  --card-shadow:none;
  --skin-font-fallback:"Yu Gothic UI","Hiragino Kaku Gothic ProN",sans-serif;
}

/* 1件のコメント。アイコンと中身を横に並べる */
.comment{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:6px 0;
  font-family:var(--skin-font, var(--font, var(--skin-font-fallback)));
}
.comment .comment-icon img{
  width:var(--avs, 36px);
  height:var(--avs, 36px);
  border-radius:50%;
}

/* 名前 */
.comment .comment-name{
  color:var(--card-accent);
  font-size:calc(var(--nms, 14px) * 1);
  font-weight:700;
  margin-bottom:2px;
}

/* 本文のカード。角の丸みは単位の無い数で届くので、1px を掛ける */
.comment .comment-block{
  background:var(--card-bg);
  color:#ffffff;
  border-left:4px solid var(--card-accent);
  border-radius:calc(var(--card-radius) * 1px);
  box-shadow:var(--card-shadow);
  padding:8px 12px;
  font-size:var(--fs, 18px);
  line-height:1.5;
}

/* 同じ zip に入れた絵は、ファイル名だけで指せる（skin.css と同じ場所から読まれる） */
.comment .comment-block{ position:relative; }
.comment .comment-block::after{
  content:"";
  position:absolute;
  right:6px;
  top:6px;
  width:10px;
  height:10px;
  background:url(mark.png) center/contain no-repeat;
}

/* 配信者・モデレーター・初見（状態は行の data- で分かる） */
.comment[data-owner="true"] .comment-name::after{ content:" ★"; }
.comment[data-moderator="true"] .comment-name::after{ content:" 🔧"; }
.comment[data-first="true"] .comment-block{ border-left-color:var(--first-color, #1ecf73); }

/* 投げ銭・ギフトの行（行に comment-gift が付く。金額は .gift-amount） */
.comment.comment-gift .comment-block{
  background:linear-gradient(135deg, #f6c445, #f08a24);
  color:#2a1600;
  border-left-color:#ffffff;
}
.comment.comment-gift .gift-amount{
  margin-left:.5em;
  font-weight:800;
}