左側の「見出しID」に、見出しを識別する名前を付けます。例としてtitleを使います。英小文字・数字・ハイフン・アンダースコアが使えます。

調整できたら上部の「JS一式を保存（ZIP）」を押し、sweet-type-h.zipを展開してください。

sweet-type-h-engine.js

見出しの文字組みを適用する共通エンジン。

sweet-type-h-data-title.js

見出しIDがtitleの場合の設定データ。ファイル名は見出しIDに応じて変わります。

sample.html

見出しのHTMLと、必要なJSを読み込む実例。

sweet-type-h-settings.json

本文・設定・スナップショットなどをエディタへ戻すための編集データ。

まずsample.htmlをブラウザで開いて確認します。自分のHTMLでは、対象の見出しにdata-sweet-type-h-titleを付け、共通エンジン → 見出し別データの順でJSを読み込みます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1 data-sweet-type-h-title>文字を、丁寧に。</h1>
  <script src="sweet-type-h-engine.js"></script>
  <script src="sweet-type-h-data-title.js"></script>
</body>
</html>

見出しIDをmain-titleにした場合は、HTMLの属性もdata-sweet-type-h-main-title、データファイル名もsweet-type-h-data-main-title.jsに揃えます。この属性は、HTMLの通常のidとは別のものです。

複数の見出しを別々に組む場合は、見出しごとに異なるIDで書き出します。共通エンジンは1回だけ読み込み、その後に各見出しのデータJSを読み込んでください。

Webフォントを指定した場合は、そのフォントの読み込みも必要です。ZIPのsample.htmlやアプリの「埋め込みコード」を参考に、<head>へフォントのCSSリンクを追加してください。ファイルを別フォルダへ移したときは、srcのパスも変更します。

1. 上部の「JSONを保存」でsweet-type-h-settings.jsonを保存します。ZIP内の同名ファイルも使えます。
2. 次に編集するときは、見出し版の「JSONを読み込み」から、そのJSONを選びます。
3. 見出しの文字・ID・文字組み設定・スナップショットなどを読み込み、編集を続けられます。
4. 編集後は再び「JS一式を保存（ZIP）」で書き出し、サイト側のデータJSを更新します。

同じブラウザでは自動保存した編集内容が次回に読み込まれます。ブラウザのデータを消す前や、別の端末へ移すときはJSONを保存してください。

JSONが手元になくても、アプリの「書き出したコードから再現」を開き、以前の埋め込みコード、またはsweet-type-h-data-title.jsなどのデータJSの内容を貼り付けて、「コードを読み込む」で設定を戻せます。

見出しのHTMLまで含む埋め込みコードなら、文字も一緒に読み込めます。データJSだけでは文字自体は戻らないため、掲載先と同じ文字を「文字」欄へ入力してください。スナップショットも含めて編集環境を戻すには、JSONから読み込む方法を使います。

設定は文字の順番に対応しています。見出しの文字数や順番を変えたら、プレビューで位置・字間を確認してから書き出し直してください。

公開ページには、見出しのHTML・共通エンジン・見出し別データJSを配置します。sweet-type-h-settings.jsonは再編集用なので、公開ページから読み込む必要はありません。

JSONを読み込んで編集しただけでは、公開中のサイトのJSは更新されません。調整後に書き出し直し、サイトへ反映してください。本文版のJSONとは別形式なので、見出し版で読み込みます。