背景・フレームを作る

背景は配信画面のいちばん奥に、フレームはいちばん手前に重なります。どちらも配信画面いっぱい（1920×1080）の大きさです。 使う人は〔配信画面一括設定〕の〔背景・フレーム〕で〔取り込んだ背景〕〔取り込んだフレーム〕を選び、一覧から選びます。

背景

bg.css は、配信画面のいちばん奥の .stage-bg に当てます。bg.css を入れずに絵（bg.png・bg.webp・bg.jpg）だけを入れると、 その絵を画面を覆うように敷きます（まん中を基準に、くり返さない）。

meta.json（sample-gradient）

{
  "format": 1,
  "kind": "background",
  "id": "sample-gradient",
  "name": "見本のグラデーション",
  "nameEn": "Sample Gradient",
  "version": "1.0.0",
  "author": "Lino Labs",
  "license": {
    "text": "作り方の見本です。改変も再配布も自由です。ご自分の素材の土台にしてください。",
    "url": "https://lino-labs.com/docs/creators/"
  },
  "description": "2色のグラデーションが、ゆっくり回ります。",
  "descriptionEn": "A two-colour gradient that slowly turns.",
  "tags": ["見本", "動く"],
  "tagsEn": ["Sample", "Animated"],
  "params": [
    { "key": "--sg-a", "type": "color", "label": "色1", "labelEn": "Colour 1", "default": "#141a33" },
    { "key": "--sg-b", "type": "color", "label": "色2", "labelEn": "Colour 2", "default": "#3a1d4f" },
    { "key": "--sg-speed", "type": "text", "label": "1回りの長さ（秒）", "labelEn": "Turn length (sec)", "default": "20s", "unit": "s" }
  ],
  "presets": [
    { "name": "夜空", "nameEn": "Night sky", "--sg-a": "#141a33", "--sg-b": "#3a1d4f" },
    { "name": "夕焼け", "nameEn": "Sunset", "--sg-a": "#ff8a5c", "--sg-b": "#6a3093" }
  ]
}

bg.css（sample-gradient）

/* 見本のグラデーション（背景の作り方の見本・https://lino-labs.com/docs/creators/stage/）
   背景は、配信画面のいちばん奥にある <div class="stage-bg"> に描く。大きさは配信画面いっぱい（1920×1080）。 */

/* つまみの既定の値（つまみを動かすまでは、ここの値が使われる） */
:root{
  --sg-a:#141a33;
  --sg-b:#3a1d4f;
  --sg-speed:20s;
}

.stage-bg{
  background:var(--sg-a);
  overflow:hidden;
}

/* 回るグラデーション。画面より大きく描いて、回しても角が見えないようにする */
.stage-bg::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(135deg, var(--sg-a), var(--sg-b));
  animation:sg-turn var(--sg-speed) linear infinite;
}
@keyframes sg-turn{ to{ transform:rotate(360deg); } }

meta.json（sample-photo・ほかには bg.png だけ）

{
  "format": 1,
  "kind": "background",
  "id": "sample-photo",
  "name": "見本の1枚絵",
  "nameEn": "Sample Picture",
  "version": "1.0.0",
  "author": "Lino Labs",
  "license": {
    "text": "作り方の見本です。改変も再配布も自由です。ご自分の素材の土台にしてください。",
    "url": "https://lino-labs.com/docs/creators/"
  },
  "description": "絵（bg.png）を1枚入れるだけの背景。CSS は要りません。",
  "descriptionEn": "A background made of just one picture (bg.png). No CSS needed.",
  "tags": ["見本", "絵"],
  "tagsEn": ["Sample", "Picture"]
}

フレーム

frame.css は、いちばん手前の .stage-frame に当てます。この要素はいつも配信画面いっぱいで、 inset などで縮めても効きません。内側に寄せて描くときは、見本のように .stage-frame::before で描きます。 frame.css を入れずに絵（frame.png・frame.webp・frame.svg）だけを入れると、その絵を画面いっぱいに引き伸ばして重ねます。

置き場所（slots）

meta.json の slots に、画面の中の置き場所を書けます。配信画面は置き場所ごとに <div class="stage-box stage-box-<key>"> を作り、rect（1920×1080 を基準にした [左, 上, 幅, 高さ]）の位置に置きます。

• key を機能の名前（コメント欄なら comments）にすると、その機能が置き場所に収まります。
• type を "text" にすると文字の置き場所になり、stage-text も付きます。中の文は配信者が設定で書きます（書いていないときは出ません）。

meta.json（sample-frame）

{
  "format": 1,
  "kind": "frame",
  "id": "sample-frame",
  "name": "見本の枠",
  "nameEn": "Sample Frame",
  "version": "1.0.0",
  "author": "Lino Labs",
  "license": {
    "text": "作り方の見本です。改変も再配布も自由です。ご自分の素材の土台にしてください。",
    "url": "https://lino-labs.com/docs/creators/"
  },
  "description": "外周に線を引き、右にコメントの置き場所、下に見出しの欄を持つフレーム。",
  "descriptionEn": "A frame with an outline, a place for comments on the right and a title box at the bottom.",
  "tags": ["見本", "型紙"],
  "tagsEn": ["Sample", "Layout"],
  "params": [
    { "key": "--sf-line", "type": "color", "label": "線の色", "labelEn": "Line colour", "default": "#9fe1cb" },
    { "key": "--sf-text", "type": "color", "label": "文字の色", "labelEn": "Text colour", "default": "#ffffff" },
    { "key": "--sf-width", "type": "text", "label": "線の太さ", "labelEn": "Line width", "default": "4px", "unit": "px" }
  ],
  "slots": [
    { "key": "comments", "label": "コメント", "labelEn": "Comments", "rect": [1340, 60, 520, 760], "type": "slot" },
    { "key": "title", "label": "見出し", "labelEn": "Title", "rect": [60, 880, 1220, 140], "type": "text" }
  ]
}

frame.css（sample-frame）

/* 見本の枠（フレームの作り方の見本・https://lino-labs.com/docs/creators/stage/）
   フレームは、配信画面のいちばん手前にある <div class="stage-frame"> に描く。
   ★ この要素は、いつも配信画面いっぱい（1920×1080）。inset などで縮めても効かない。
   　 内側に寄せて描きたいときは、::before で描く（下の外周の線のように）。 */

:root{
  --sf-line:#9fe1cb;
  --sf-text:#ffffff;
  --sf-width:4px;
}

/* 外周の線。画面の端から 20px 内側に描く */
.stage-frame::before{
  content:"";
  position:absolute;
  inset:20px;
  border:var(--sf-width) solid var(--sf-line);
  border-radius:18px;
}

/* 置き場所（meta.json の slots）。配信画面が <div class="stage-box stage-box-<key>"> を作り、場所を決める。
   ここでは見た目だけを当てる */
.stage-box{
  border:var(--sf-width) solid var(--sf-line);
  border-radius:12px;
}

/* 文字の置き場所（type が "text" のもの）には stage-text も付く。中の文は配信者が設定で書く */
.stage-text{
  color:var(--sf-text);
  font-size:40px;
  font-weight:700;
  background:rgba(0,0,0,.35);
}

つまみ（params）

背景・フレームのつまみは、type が color なら色の欄、それ以外は数の欄になります。 数の欄の値には unit が付いて入ります（見本の --sg-speed なら "20s"）。既定の値は CSS の :root に書いておきます。 presets（色の見本）の値は文字で書いてください。