制作の裏側 2026.10.20

管理画面に入って、はじめての記事を公開する【AI 初心者でもわかる エムダッシュの作り方 #4】

管理画面に入って、はじめての記事を公開する【AI 初心者でもわかる エムダッシュの作り方 #4】

公開日:2026-10-20 / 最終更新日:2026-10-20

第2回で自分のパソコンに立てたエムダッシュ(EmDash)に、今回は管理画面から記事を1本書いて、公開画面に出すところまで進めます。やることは「書く → 保存 → 公開」の3つです。ただ、保存しただけではサイトに出ないなど、最初につまずきやすい所が2つありました。

この記事で分かること

  • 管理画面のどこに何があるか(ダッシュボードと記事の一覧)
  • 記事の書き方と、見出しや箇条書きを早く入れるコツ
  • 「保存」と「公開」の違い、URL(スラッグ)を英語にしておく理由

管理画面に入る

第2回の最後で作ったパスキーができると、「Passkey created」の画面になります。「Open the dashboard」を押すと管理画面に入れます。

パスキー作成完了の画面。「Open the dashboard」のボタン

次からは、サイトを起動して http://localhost:4321/_emdash/admin を開き、パスキー(Mac なら Touch ID)で入ります。

ダッシュボード:サイトの今が1枚で分かる

最初に出るのがダッシュボードです。下書きの数、画像の数、ユーザーの数と、最近更新した記事が並びます。サイトを作る時に「Sample content(見本の記事入り)」を選んだので、英語の見本記事が最初から入っています。

ダッシュボード。下書き・メディアファイル・ユーザーの数と、最近の更新の一覧

左のメニューは WordPress とよく似ています。「Posts」が投稿、「Pages」が固定ページ、「メディア」が画像です。画面は日本語と英語がまざっていますが、これはエムダッシュの翻訳がまだ途中だからで、使うのに困るほどではありません。

記事を書く

左のメニューの「Posts」を押すと、記事の一覧が出ます。右上の「新規追加」で、新しい記事の画面を開きます。

Posts の一覧。右上に「新規追加」のボタン

記事の画面は、左に本文、右に設定が並ぶ作りです。上から「Title(タイトル)」「Featured Image(アイキャッチ画像)」「Content(本文)」「Excerpt(一覧に出す短い紹介文)」の順です。

新しい記事の画面。タイトル、アイキャッチ画像、本文の入力欄と、右側の設定

タイトルに「はじめての記事」、本文に1行書いてみます。ここで便利なのが、行の頭に記号を打つと形が変わる仕組みです。

行の頭に打つもの なるもの
## (# を2つと空白) 見出し
- (ハイフンと空白) 箇条書き
/(スラッシュ) 入れられる物の一覧(画像・表など)

これは Markdown(マークダウン)という書き方で、AI に文章を頼んだ時に返ってくる形と同じです。AI が書いた下書きを、ほとんどそのまま流し込めます。

本文に1行と、見出し「今日やったこと」、3つの箇条書きを書いた画面

つまずきそうな所1:URL(スラッグ)が日本語になる

右側の「識別名(スラッグ)」は、記事の URL の最後の部分です。タイトルを入れると、ここに同じ「はじめての記事」が自動で入ります。

日本語のままでも動きますが、URL をコピーして人に送ると %E3%81%AF… のような長い記号の列になります。hajimete のように英数字に書き換えておくのがおすすめです。こうすると記事の URL は /posts/hajimete になります。

つまずきそうな所2:「保存」しただけでは、サイトに出ない

右上の「保存」を押すと、記事は保存されます。ただ、右側の「公開」の欄を見ると「Draft version(下書き)」「This version is not visible on the site(サイトには出ていません)」と書いてあります。保存は、下書きとしてしまっておくだけです。

保存した後の画面。右側に「Draft version」と、右上に「Publish now」のボタン

サイトに出すには、右上の青いボタン「Publish now(今すぐ公開)」を押します。押すと「すぐにサイトに表示されます」という確認が出るので、もう一度「Publish now」を押します。

「Publish now?」の確認。キャンセルと Publish now のボタン

右側が「Live version(公開中)」に変わり、「コンテンツを公開しました」と出れば公開できています。公開日時もここに入ります。

公開後の画面。右側に「Live version」と公開日時、右下に「公開済み」の通知

やめたくなったら、右上の「Postを非公開にする」で下書きに戻せます。「予約公開」を使えば、日時を決めて公開することもできます。

公開画面で確かめる

http://localhost:4321/ を開くと、「Latest posts(新しい記事)」の一番左に「はじめての記事」が出ています。

サイトのトップページ。新しい記事の一番左に「はじめての記事」

開くと、本文の見出しと箇条書きがそのまま出ます。右側の「ON THIS PAGE」には、見出しから作った目次が自動で入っています。

記事のページ。タイトル「はじめての記事」、本文、見出し、箇条書きと、右側の目次

画面の下に出ている黒い「EmDash / Edit mode」のバーは、ログインしている人にだけ見えるものです。ログインしていない状態で開くと出ないことを確かめました。

AI に頼むならこう聞く

エムダッシュ(EmDash)のブログに載せる記事を書きます。テーマは「〇〇」です。見出しは「## 」、箇条書きは「- 」の Markdown で、800字くらいで下書きしてください。URL に使う英数字のスラッグの案も3つください。

まとめ

  • 管理画面は /_emdash/admin。「Posts」→「新規追加」で記事を書く
  • 本文は ## で見出し、- で箇条書き。AI の下書きをそのまま流し込める
  • スラッグは英数字に書き換えておく
  • 「保存」は下書きのまま。「Publish now」を押して、はじめてサイトに出る

次回は、記事に画像を入れて、カテゴリとタグで整理します。

出典

  • EmDash 公式ドキュメント「Create your first EmDash site」 https://docs.emdashcms.com/getting-started/
  • 画面と手順は、EmDash 1.3.1 をブログの見本(Sample content)で立てて、2026-10-20 に確かめたもの

更新履歴

  • 2026-10-20 公開

書いた人:寺延 啓太(teraone) 制作会社さまの外部コーディングパートナー。Figma からのコーディングと WordPress の実装・保守を受けています。

ホームページの「困った」、聞かせてください

お見積もりは無料です。内容が固まっていなくても大丈夫。