しくみ
- HTML に
data-cms属性を付けます。要素の中にもともと書いてある文言が既定値です - 何を直せるかは schema.json で宣言します。管理画面には、宣言した項目だけが出ます
- 値は配信の前に文字として差し込まれるので、検索エンジンにも更新後の内容が届きます。入力された値が HTML やスクリプトとして動くことはありません
- CMS に届かないときは、HTML に書いた文言がそのまま出ます。CMS のせいでサイトが止まることはありません
手順
1. script タグを入れる
<script src="https://cdn.siteon.dev/sitekit.js" data-site="hanaya" defer></script>2. 直せる箇所に印を付ける
<dl>
<dt>営業日</dt>
<dd data-cms="hours.days">月〜土</dd>
<dt>営業時間</dt>
<dd data-cms="hours.time">10:00 - 18:00</dd>
</dl>
<!-- お知らせの一覧: template の中身が記事の数だけ繰り返される -->
<ul class="news">
<template data-cms-list="news" data-cms-limit="3">
<li>
<time data-cms="date">2026-01-01</time>
<span data-cms="title">記事のタイトル</span>
</li>
</template>
<template data-cms-empty="news"><li>お知らせはまだありません。</li></template>
</ul>3. schema.json で項目を宣言して反映する
{
"locales": ["ja"],
"groups": [
{ "key": "hours", "label": "営業時間", "fields": [
{ "key": "days", "label": "営業日", "type": "text" },
{ "key": "time", "label": "営業時間", "type": "text" }
] }
]
}お知らせのような一覧は collections で宣言します(schema.json の書き方)。
siteon schema push --site hanaya4. 公開して、お店の人を招待する
siteon deploy ./dist --site hanaya管理画面で、お店の人をそのサイトのスタッフとしてメールで招待します。スタッフが直せるのは自分のサイトの中身とお問い合わせの確認だけで、請求やほかのサイトは見えません。
値の届け方は3つ
| Siteon のホスティング | Cloudflare Pages の中継 | ほかのホスティング(data-embed) | |
|---|---|---|---|
| 値を入れるとき | 配信の前 | 配信の前 | 表示の後にブラウザで |
| 直してから反映まで | 15秒以内 | 最大1分 | 最大1分 |
| 記事ごとのページ・タグのページ | 使える | 使える | 使えない |
料金
| Free | Lite | Standard | Business | |
|---|---|---|---|---|
| 月額(税抜) | 0円 | 500円 | 1,480円 | 4,980円 |
| CMS の記事 | 通算 20件 | 100件 | 1,000件 | 1万件 |
| 写真 | 100MB | 1GB | 5GB | 20GB |
| AI の翻訳・文章 | お試し 3回 | なし | 月 30記事 | 月 150記事 |
編集する人の数では料金がかかりません。Free では、編集は開発・プレビュー用のドメインと、Siteon のホスティングのサブドメイン(<名前>.siteun.com)で使えます。独自ドメインは有料プランです。
できないこと・近日の機能
- 直せるのは印を付けた箇所だけです。レイアウトやデザインの変更はコードで行います
data-embedは読み込み後にbodyの中身を入れ替えるので、独自の JavaScript があるサイトでは避けます(Siteon のホスティングか中継を使います)- Siteon のホスティングでの独自ドメイン近日
関連するドキュメント
- 直せる箇所の印(CMS): 文言・写真・一覧・記事ページ・多言語
- schema.json の書き方
- ホスティングと配信