WYSIWYG
デザインのまま、
文字だけを変える。
プレビューの見出しを押すと、右にその見出しの欄が開きます。書き換えると、プレビューがその場で変わります。レイアウトや部品の組み立ては、開発者とデザイナーが決めたまま。担当の方がさわれるのは、さわってよい所だけです。
Try it
さわってみてください。
左の一覧か、プレビューのブロックを押して選び、右の欄を書き換えます。幅の切り替えと「確認を頼む」も動きます。
家族の今日を、
一枚に。
七五三・成人式・家族写真。神戸の小さな写真館です。
撮影を予約するお知らせ
- 11 月の撮影会のお知らせ
- 年末年始の営業日
まずは、お気軽にご相談ください。
お問い合わせメインビジュアル
お知らせはコンテンツコレクション news から並んでいます。記事のタイトルを直すと、一覧にも反映されます。
変更はまだありません
※ 動きのイメージです（実際の画面ではありません）。
Page builder
ページは、
ブロックの木で。
ページのビルダーは、左にブロックの木、中央にプレビュー、右に選んだブロックの欄、という作りです。ブロックは上へ・下へ・複製・削除ができ、プレビューの幅はパソコン・タブレット・スマホで切り替えられます。
保存するのは、変えたバイトの範囲だけ
.astro を作り直して書き出すのではなく、元のソースの該当する位置だけを後ろから置き換えます。値はエスケープするので、欄からコードは入りません。
公開の前にもう一度くらべる
下書きの元にしたソースのハッシュと GitHub のいまのファイルを比べ、誰かが先に変えていたら止めます。
くり返しの並びは「表」に
カードやスタッフ紹介のように同じ形が並ぶ所は、行の追加・並べ替え・削除ができます。
1---2interface Props {3 /** 見出し。2 行にしたいときは改行を入れる */4 title: string;5 lead?: string;6 buttonText?: string;7 buttonHref?: string;8 coverImage?: string;9 tone?: 'light' | 'dark';10}11const { title, lead, buttonText = '予約する', buttonHref = '/contact', coverImage, tone = 'light' } = Astro.props;12---13<section class:list={['hero', tone]}>14 <h1>{title}</h1>15 {lead && <p>{lead}</p>}16 <a href={buttonHref}>{buttonText}</a>17</section>Props の型と既定値を読んで、欄の種類を決めます。Cocoro CMS のための書き方は、ありません。
Article editor
記事は、
ワープロのように。
お知らせ・ブログ・事例などのコンテンツコレクションは、記事のエディタで。左に記事の一覧と見出し、中央に本文、右に frontmatter の欄が並びます。
見たまま ⇄ Markdown
書き慣れたほうで。切り替えても中身は同じ Markdown のファイルです。
自動で下書き
0.7 秒ごとに下書きへ保存。保存のボタンを探す必要がありません。
frontmatter はフォームで
タイトル・日付・カバー画像などは、スキーマから作った欄で。YAML のコメントやキーの順はそのまま残します。
必須の欄
optional でも default でもない欄は「必須」。空のまま確認を頼めません。
画像は候補から
image() の欄は、サイトの画像やライブラリから選べます。
書いてはいけないもの
script・iframe・on〜 の属性・javascript: などは、保存のときに断ります。MDX の import・export・{式} も編集者には書かせません。
Site map
サイトの全体を、
木で見る。
ページ、コンテンツの種類、部品。Cocoro CMS が読み取ったサイトの構成を、1 つの木で見られます。どのページに編集できる所がいくつあるかも、ここでわかります。
Review
直したら、
「確認を頼む」。
書き終えたら「確認を頼む」を押します。承認する人には、何が変わったかが行ごとに、変わった文字に印を付けて見えます。いくつかの下書きをまとめて 1 回のリリースにしたり、日時を決めて予約したりもできます。
Cocoro CMS
伝えたいことを、
伝えたいときに。
Astro のサイトを、だれでも安全に更新できるように。フリープランは 1 サイト・2 人まで、ずっと無料です。