unitcell tools studio
デザイン
種類
ナビ
行頭で /(または ⌘/)で部品、]( でリンク先の候補が出ます

サイトマップをテキストで編集

1行1ページ。字下げ(スペース2つ)で階層、末尾の /about が URL です(省略可)。行を消したページは削除、ページ名か URL が同じものは本文を引き継ぎます。

DESIGN.md の読み取り結果

新規作成

作るものを選ぶと、その種類のサンプルから始まります。種類はあとから変えられません。いまの内容は消えます(残すなら先に「書き出し」)。


        

記法

部品ごとの書き方と見た目は、エディタ上部の「部品一覧」で確認できます。
エディタでは、空いた行の先頭で / を打つと部品のメニュー(続けて打つと絞り込み。⌘/ でも開く)、[文言]( まで打つとサイトマップのページから行き先を選べます。

このツール独自

![[header]]共通パーツを差し込む(左下の一覧)
![[nav]]サイトマップからグローバルナビを自動生成。形(ヘッダー/サイドバー)は上部バーの「ナビ」で切り替え
![[breadcrumbs]]パンくずを自動生成
![[children]]子ページのカード一覧を自動生成
![[sitemap]]サイト全体のリンク一覧を自動生成
[文言](/about)ページへのリンク(URL はサイトマップの値)
[お問い合わせ]文言がページ名と同じボタン・ナビ・リスト項目は自動でそのページへ
::: carouselカードのカルーセル。### ごとに1枚、最初の画像はカード上部に。::: carousel 4 で PC の表示枚数、::: carousel full で1枚ずつの大きなスライド
::: steps番号付きの流れ。### ごとに1段。PC は横並び、SP と ::: steps vertical は縦
::: news + 表表(日付|区分|タイトル、または 日付|タイトル)をニュース一覧に。タイトルにリンクを書ける
::: logosロゴ一覧。画像はロゴ枠に、- 社名 は仮ロゴ枠に。::: logos 4 で PC の列数
::: stats数字の強調。### 1,200社 の下にラベル
[確認する]* + ::: modalボタンの文言がモーダルの見出しと同じなら、押すと開く

wiremd の主な記法

[[ :logo: 社名 | [会社概要](/about) ]]ナビ(先頭はロゴ)
::: hero … :::ヒーロー帯。ほかに section card footer alert info accordion modal
::: grid-3 card3列のカード。### ごとに1枚
[送信]* [戻る]ボタン(* で主ボタン)
[[詳しく見る](/service)]{.primary}リンク付きボタン
[_______]{required}入力欄(直前の行がラベル)。[選択___v] で選択肢、{rows:5} で複数行
- [ ] 同意するチェックボックス。- ( ) でラジオ
|新着|{.primary}バッジ
![説明|4:3](https://…/a.jpg)画像(URL か相対パス)。| の後ろで比率(16:9 1:1 など。既定は 16:7)、auto(元の形のまま)、contain(切り抜かずに収める)。組み合わせ可: |1:1 contain
:home: :arrow-forward:アイコン(Material Symbols)。fonts.google.com/icons で名前を引き、_ を - に替えて書く。無い名前は赤い破線の「?」になる
> **注記:** …デザイナーのメモ(注釈として表示)

つまずきやすい点(wiremd の制約)

  • リスト項目の中のリンク・太字は文字だけになる。リンクにしたいときは、文言をページ名と同じにする
  • 同じ行にリンク付きボタン [[…](…)] と素のボタン […] を混ぜると崩れる。どちらかに揃える
  • 選択欄 […___v] の直後に続くリストは、すべて選択肢として吸い込まれる
  • アイコン名に数字は使えない(looks_3 などは書けない)。SNS ロゴ(:github: 等)と :logo: は記号のまま
DESIGN.md(.md)またはプロジェクト(.json)をドロップ