Substackの記事作成で時間がかかりやすいのは、エディタ上での装飾作業です。見出し・太字・マーカー・リストを1つずつ手動で設定していくと、本文を書く以上に時間がかかることもあります。
そこでおすすめなのが、HTMLを活用した方法です。HTMLで本文を作成し、ブラウザで表示したものをリッチテキストとして貼り付けると、装飾をまとめてSubstackに反映できます。この記事では、その方法と装飾の設計ルールをまとめています。
なお、HTMLは自分で書く必要はありません。AIに音声やメモを渡せば、装飾済みの本文HTMLを自動で作れます。
書き始める前に構造を整理する
いきなりSubstackエディタで書き始めるやり方は、頭の中で全体構造を先に組み立てられる人向けです。書きながら迷いが出る人の場合、そのままエディタで書き進めると非常に非効率になります。
事前に「何を伝えたいか」「記事のゴールは何か」を整理してから本文に入ると、書き直しが減ります。
音声メモ、箇条書き、過去記事の要点など、書きたいことが分かる材料をまず出しておく——それが最初のステップです。
HTMLをブラウザで表示し、装飾を保持したままSubstackに貼り付ける方法
Substackのエディタ上で1文ずつ装飾していく作業は、思いのほか時間がかかります。見出しを付け、太字にし、マーカーを引き、リストを整える——この手動の装飾作業を効率化するのが、HTML経由での貼り付けです。
ここで言う「HTML」は、プログラミングのような難しい話ではありません。見出し・段落・色マーカー・リストなど、記事の見た目と構造をまとめた本文データのことです。これをブラウザで開いてコピーし、Substackエディタに貼り付けると、装飾ごと反映されます。
- HTML形式で本文を作成する（※自分で書く必要はありません。AIに作らせることができます）
- ブラウザで開く
- 本文を全選択してコピーし、Substackエディタに貼り付ける（Ctrl+V）
エディタ上で1つずつ装飾していく手間を大幅に省けます。特に見出し・マーカー・リストが多い記事ほど、この方法の恩恵が大きくなります。
HTMLから貼り付けたときに反映されるもの・されないもの
HTMLからリッチテキストでコピーすると、次の要素はSubstack本文に反映されます。
貼り付けると反映されるもの
- 見出し（
h2h3） - 段落（
p） - 太字・斜体・取り消し線（
strongems） - 色マーカー（黄・緑・青・ピンクの
mark） - リスト（
ulolli） - 引用（
blockquote） - 区切り線（
hr） - リンク（
a） - コード表示（
codepre）
タイトルはSubstack側のタイトル欄に入れる前提なので、本文HTMLでは原則 h1 を使いません。
反映されないもの・Substack側で入れるもの
table— 貼り付けで保持されないため、箇条書きや見出し構成で代替するimg— HTML埋め込みではなく、Substackエディタから画像を挿入するiframescriptstyle— 本文では使わない- カスタムCSS付き
div、外部CSS — コピペ時に落ちるか崩れる spanによる文字色指定 — 本文では使わない。色はmarkで表現する- Paywall、ボタン、投票、脚注、LaTeX など — Substackのネイティブ機能。エディタから配置する
反映されるものと、Substack側で追加するものを分けて整理しておくことで、公開時の手戻りがなくなります。
AIにHTMLを作らせる具体的な方法はこちら
本文中で触れたように、HTMLはAIに作らせることができます。どんな素材を渡せばよいか、どんなHTMLが出力されるか、実際のツールと使い方をBrain記事でまとめています。
コメント