Ghost Lexicalエディタ完全ガイド——カード・埋め込み・ショートカット全部
Ghost
Ghostのエディタは、一見すると驚くほどシンプルだ。真っ白な画面にタイトルと本文だけ。WordPressのGutenbergのようにボタンが大量に並ぶこともなく、noteのように右サイドバーが主張することもない。
ただ、このシンプルさに騙されて書き始めると、Ghostが用意している機能の半分も使わずに終わる。僕自身、最初の1ヶ月は「/」キーの存在すら知らずに、ただのテキストエディタとして触っていた。
今日は、Lexicalエディタのカード・埋め込み・ショートカット・Markdownモードまで、日本語環境で詰まりやすいポイント込みで全部まとめる。
LexicalエディタとMobiledoc旧エディタの違い
まず背景から。
Ghostは5.58(2023年後半)以降、エディタのエンジンをMobiledocからLexicalに切り替えた。Lexicalは元々Meta(旧Facebook)が開発したオープンソースのエディタフレームワークで、Notion風のブロック編集・柔軟な拡張・高速なパフォーマンスが特徴だ。
Mobiledoc時代のGhostを触ったことがある人なら、カードの挙動が別物になっているのに気づいているはずだ。
- カードの出し入れがキーボードのみで完結するようになった
- インライン要素(太字・リンク・コードスパン)が自然な挙動になった
- コピー&ペースト時の書式保持が賢くなった(Word・Googleドキュメントから貼ってもほぼ崩れない)
現行のGhost 6系は完全にLexical前提で設計されている。旧Mobiledoc記事は自動的にLexicalに変換されるが、一部のカスタムカードは挙動が変わることがあるので、大規模サイトの移行時だけ注意すればいい。
基本操作——「/」と選択フォーマットでほぼ完結する
Lexicalエディタの基本は、この2つを覚えるだけで8割終わる。
スラッシュコマンド「/」
本文エリアで / を押すと、その場にブロックメニューが出る。そこから見出し・画像・引用・カード類を選ぶ。/image・/youtube・/markdown のように続けて打てば絞り込み検索になる。
選択フォーマット
テキストを選択するとポップアップが出て、太字・斜体・リンク・見出し・引用・コードスパンを選べる。マウスでもキーボードでも同じだ。
ここに出てこない機能(カラー指定・文字サイズ変更・背景色など)は、Lexicalエディタには「存在しない」。Ghostは記事を書く道具として意図的にそれらを削っている。デザインはテーマのCSSで統一する思想だ。
装飾ができないことにストレスを感じる人もいるが、僕はこの割り切りが好きだ。記事ごとに見出しの色を変えられるエディタは、結局サイト全体のデザインを崩壊させる。
カード一覧と使い分け——15種類の全貌
Ghost 6時点で使える主要カードをまとめる。
| カード名 | 用途 | スラッシュコマンド |
|---|---|---|
| Image | 画像1枚 | /image |
| Gallery | 画像ギャラリー(最大9枚) | /gallery |
| Divider | 区切り線 | /divider |
| Markdown | Markdownブロック | /markdown |
| HTML | 生HTML埋め込み | /html |
| Bookmark | リンクカード(OG画像付き) | /bookmark |
| Button | CTAボタン | /button |
| Callout | 注目ボックス(色付き) | /callout |
| Email CTA | メール購読CTA(有料メンバー向け等) | /email |
| File | ファイルダウンロード | /file |
| Audio | 音声プレーヤー | /audio |
| Video | 動画プレーヤー | /video |
| Product | 商品カード(画像+説明+ボタン) | /product |
| Toggle | 折りたたみブロック | /toggle |
| Header | 大見出し用ヒーローブロック | /header |
使い分けの勘所
- Bookmark vs 素のリンク: 他記事・他サイトを紹介する時はBookmark一択だ。OG画像・タイトル・説明が自動取得される。素のリンクは「記事中で語を自然に参照する」時だけ
- Callout vs 引用: Calloutは「今から言うことは重要だ」という合図。引用は「他人の言葉を持ってきた」合図。混同しない
- Button vs テキストリンク: 行動を強く促したい1箇所だけButtonを使う。記事中に3個も4個も置くと情報商材臭くなる
- Toggle: FAQや補足情報を畳んでおける。Ghostテーマによっては展開アニメーションが効かないことがある
- Header: 記事先頭に大きなヒーローを置く時用。使う人は限られる
日本語環境で詰まりやすい点
画像カードは「ドラッグ&ドロップ」と「クリックしてアップロード」の両方に対応している。ただし、ファイル名に日本語(「スクリーンショット 2026-04-23 10.45.21.png」のような)が含まれているとURLエンコードが走り、管理画面でファイル名が文字化けして見える。表示上は問題ないが、後から差し替えたい時に探しにくい。アップロード前に英数字リネームをクセにするといい。
埋め込みカード——URLを貼るだけで自動変換
Ghostは主要サービスのURLを貼るだけで、自動的に埋め込みカードに変換する。
対応サービス(主要)
- YouTube / Vimeo(動画)
- X(旧Twitter)※2026年時点で仕様変更の影響あり
- CodePen(コード実装例)
- Spotify(音楽・ポッドキャスト)
- Instagram(投稿・リール)
- SoundCloud(音源)
- Giphy(GIF)
- Typeform(フォーム)
使い方
新しい段落でURLをペーストして、Enterを押す。これだけだ。Ghostがoembed APIを叩いて埋め込み情報を取りに行き、自動でカード化する。
Xの埋め込みは2026年時点で要注意
2023年後半からXのoembed APIが制限され、Ghostの自動埋め込みが安定しない時期が続いた。2026年4月時点で部分的に復活しているが、タイミングによっては「埋め込みプレビューが出ない」「リンクだけのBookmarkカードになる」事象がある。
僕がよくやる回避策は、XのスクリーンショットをImageカードで貼って、Bookmarkでポスト本体にリンクを張る方式だ。見栄えも埋め込み失敗のリスクもコントロールしやすい。
YouTubeはレスポンシブで入る
YouTubeだけは埋め込みの安定度が群を抜いている。URLをペーストすれば16:9のレスポンシブプレーヤーが入る。タイムスタンプ付きURL(&t=120s)もちゃんと拾ってくれる。
Markdownカード——既存MDを最速で流し込む
ここはブログ初心者でも、既にどこかに書いた原稿を移行する人にも効く機能だ。
note・はてな・Obsidian・エディタの下書きをMarkdownで持っている場合、Lexicalエディタに直接貼るとブロック単位でバラバラに展開される。小さい記事なら問題ないが、数千字の原稿を貼ると崩れる要素が出てくる。
Markdownカードを使う手順
/markdownでMarkdownカードを挿入- カード内のテキストエリアにMarkdown原稿を丸ごとペースト
- プレビューがリアルタイムで右側に表示される
- そのまま公開しても、必要に応じて後からLexicalブロックに分解してもいい
使い分けの考え方
- 既存原稿の流し込み → Markdownカード1枚に全部入れる
- Ghost上で1から書く → Lexicalのネイティブブロックで書く
- 両方混ぜてもOK → 記事の冒頭だけLexicalブロック・本文はMarkdownカード、という構成も有効
note→Ghost移行の全体的な流れはnote→Ghost移行の手順記事にまとめた。Markdownカードはその移行フローでも中心的な役割を果たす。
限界
Markdownカードは内部的に1つのブロックとして扱われる。そのため、記事の一部をCalloutやBookmarkに差し込みたい場合は、Markdownカードを途中で分割するか、その箇所だけLexicalブロックに移す必要がある。
HTMLカードの落とし穴——kg-cardラッパーが必要な理由
ここは僕が最初の月にハマった場所だ。
アフィリエイトリンクのタグ・計測用の<img>ピクセル・独自ウィジェット——こういったHTMLをGhostで貼りたい時は、/html でHTMLカードを挿入して中に貼る。
ところが、生の<div>や<a>だけを貼ると、公開時にGhostが「ブロックに属していないDOM」と判断して一部を除去することがある。特にGhost Admin APIで ?source=html を使って投稿する場合に顕著だ。
対策: kg-card-begin/kg-card-endのHTMLコメントでラップ
<!--kg-card-begin: html-->
<a href="https://example.com/affiliate" rel="nofollow">
サンプルリンク
</a>
<img border="0" width="1" height="1" src="https://example.com/tracker.gif" alt="">
<!--kg-card-end: html-->
管理画面のHTMLカードに直接貼る場合、このラッパーが自動的に付与されるので気にしなくていい。問題になるのは、Admin API経由で外部から投稿する場合だ。ラッパーがないと、Ghostが生HTMLをスキップして消してしまう。
A8・もしも・ValueCommerceから取得したアフィリエイトタグは、特に広告計測用の<img>ピクセルを含んでいることが多い。これが消えると計測が死ぬので、APIで投稿するメディア運営者は必ずkg-cardラッパーで包む。
Ghostテーマに合わせたCSSクラス
HTMLカード内の要素にCSSを効かせたい時は、.kg-card.kg-html-card の子孫セレクタで書くと安全だ。テーマのデフォルトCSSと衝突しにくい。
キーボードショートカット一覧——僕が実際に毎日叩くやつ
ショートカットはMac基準(⌘)で書く。Windowsは⌘をCtrlに読み替えてほしい。
テキスト装飾
| ショートカット | 動作 |
|---|---|
| ⌘ + B | 太字 |
| ⌘ + I | 斜体 |
| ⌘ + U | 下線 |
| ⌘ + K | リンク挿入 |
| ⌘ + Shift + X | 打ち消し線 |
| ⌘ + Shift + K | コードスパン |
見出し・ブロック
| ショートカット | 動作 |
|---|---|
| ⌘ + Alt + 1〜6 | 見出しレベル1〜6 |
| ⌘ + Shift + 7 | 番号付きリスト |
| ⌘ + Shift + 8 | 箇条書き |
| ⌘ + Shift + 9 | 引用 |
| ⌘ + Enter | 段落を強制改行(次のブロックへ) |
エディタ全体
| ショートカット | 動作 |
|---|---|
| ⌘ + Z | 取り消し |
| ⌘ + Shift + Z | やり直し |
| ⌘ + S | 下書き保存(Lexicalは自動保存だが叩いても無害) |
| ⌘ + P | プレビュー |
| ⌘ + F | 記事内検索(ブラウザ標準) |
カード操作
| ショートカット | 動作 |
|---|---|
| / | ブロックメニュー呼び出し |
| Enter(カード選択中) | カード編集モードへ |
| Esc(編集モード中) | 選択モードへ戻る |
| ⌫(選択モード中) | カード削除 |
| ↑↓(選択モード中) | カード移動 |
Markdownショートハンド(打つだけで変換される)
これが実はLexicalの隠れた主役だ。
#(半角シャープ+スペース)→ H1見出し##→ H2見出し###→ H3見出し>→ 引用-→ 箇条書き1.→ 番号付きリスト---→ 区切り線`コード`→ インラインコード
僕は記事を書く時、ほぼこのMarkdownショートハンドだけで見出しと引用を切っている。/ メニューを出すより速い。
下書き保存・Revision履歴・Staff権限
Lexicalエディタは書いた瞬間から自動保存が走る。明示的に「保存」ボタンを押す必要はない。
Revision履歴
エディタ右上の歯車アイコン(Post settings)→「Revision history」で、過去の状態に戻せる。Ghost 6系では最大25件のリビジョンが保存される。
これが効くのは、記事を公開した後に編集して失敗した時だ。リビジョンから1つ前に巻き戻せる。Markdownカードの中身を誤って全削除した、みたいな事故にも対応できる。
Staff権限と共同編集
Ghostは複数のスタッフ(Owner / Administrator / Editor / Author / Contributor)で共同運用できる。それぞれ権限が違う。
- Owner / Administrator: 全機能
- Editor: 全記事の編集・公開、ただし決済・Staff管理は不可
- Author: 自分の記事のみ編集・公開
- Contributor: 自分の記事の下書きを提出(公開はEditor/Adminの承認後)
Lexicalエディタ自体は「同時編集」(Googleドキュメント的なリアルタイム共同編集)には対応していない。2人が同じ記事を同時に触ると、後に保存した方の内容で上書きされる。この仕様はGoogleドキュメントに慣れた人ほど地雷を踏みやすいので、編集担当を分けて運用する方が安全だ。
Preview機能と公開フロー
書き終わったら、公開前に必ずPreviewを見る。
Preview(プレビュー)
右上の「Preview」ボタンから、デスクトップ・モバイル・メールニュースレターの3ビューで確認できる。
- Desktop: 実際のテーマCSSが当たった状態で記事ページを表示
- Mobile: 画面幅を絞った状態で表示(スマホ実機での表示とは微妙に違うこともある)
- Email: ニュースレター配信時の見え方(OGP・カバー画像の見え方が確認できる)
Ghostの日本語フォント表示で違和感がある場合は、先にGhost日本語フォント設定のCSS記事を読んでおくとPreviewでの表示調整が速い。
公開フロー
- Preview で3ビューを確認
- 右上の「Publish」ボタン
- 「Continue, final review」で最終確認ダイアログ
- 「Publish」で即公開、または「Schedule」で予約公開
予約公開の落とし穴
予約公開の時刻はGhostのタイムゾーン設定(Settings → General → Timezone)基準だ。Asia/Tokyoに設定していないと、UTCで予約されて時差ぶんズレる。管理画面のタイムゾーンはGhost Pro初期設定ガイドの手順で先に揃えておく。
公開後のURL変更はSEO的に痛い
Post URL(スラッグ)は公開後にも変更できるが、既にGoogleにインデックスされた後に変えるとリダイレクトを手動で入れない限りSEO評価が切れる。公開ボタンを押す前にスラッグを英数字で確定するクセを持つといい。
まとめ
LexicalエディタはGhostの表の顔であり、実はGhostの設計思想そのものが詰まっている場所だ。
- 装飾機能を意図的に削っている → テーマ側でデザインを統一させる思想
- カードは「意味のある塊」単位 → テーマを変えても崩れない構造
- Markdownショートハンドが最速 → キーボードだけで記事が仕上がる
- APIと一貫した設計 → 管理画面で使う機能とAPIで叩ける機能がほぼ同じ
Ghostはボタンだらけのエディタではない。ショートカットとスラッシュコマンドを覚えた人から順に速くなる道具だ。
ここから始める人に、覚える順番を3段階で置いておく。
- 最初の1日: Markdownショートハンド(
#・>・-)とBookmark・Calloutカードだけ - 最初の1週間: Image・Gallery・Markdownカード・Preview機能
- 最初の1ヶ月: HTMLカードのkg-cardラッパー・予約公開・Revision履歴
この順でやれば、Ghostで記事を書くのが「WordPressより速い」と感じる日が必ず来る。
逆に言えば、Ghostを使いこなせないと感じている人の大半は、このエディタを「ただのテキストボックス」として触っている。カード機能を知らずに諦めるのは、新車を買って1速で走り続けるようなものだ。
Ghostを選んだ時点で、エディタを使いこなすコストは払う価値がある。
仕様・ショートカットは執筆時点(2026年4月)のGhost 6系を基準にした。Ghost本体のアップデートでショートカットやカード種類が変わる可能性があるため、最新情報はghost.org公式ドキュメントを確認すること。