EmDashの記事に「吹き出し」「注意箱」を足す方法｜プラグインで自分だけの部品を作る

WordPressとの違い：装飾は「自分で作る」

WordPressでは、SWELLやCocoonなどのテーマに吹き出しやボックスが最初から入っています。ボタンを押せば、すぐに使えます。

EmDashには、そうした装飾の部品がまだありません。管理画面で使えるのは、見出し・箇条書き・画像・表・コードなど基本のものだけです。

EmDashの「プラグイン」の仕組みで、自分用の部品を作りました。作ってしまえば、管理画面から選ぶだけで入れられます。

作った部品は3つ

この記事の中でも、3つとも使っています。上の「この記事でわかること」が箱、読者とリスの会話が吹き出しです。

部品づくりの流れ

順番に見ていきます。

① どんな部品が欲しいかを決める

最初に、「どの場面で」「何を入力するか」を決めます。上の表がそれです。

ここを決めずに作り始めると、入力する項目が増えすぎて使いにくくなります。このブログでは、参考にしたブログの記事を見て「よく出てくる装飾」を3つに絞りました。

② 部品を登録するファイルを作る

プラグインのファイルに、部品の名前と入力する項目を書きます。吹き出しなら、次のような形です（実際のコードを短くしたもの）。

{
  type: "dn_balloon",
  label: "吹き出し",
  fields: [
    { type: "select", action_id: "speaker", label: "話す人",
      options: [
        { label: "読者", value: "reader" },
        { label: "リス：説明", value: "typing" },
      ] },
    { type: "text_input", action_id: "text", label: "せりふ", multiline: true },
  ],
}

• label：管理画面に出る名前
• fields：入力する項目。選ぶもの（select）・文字（text_input）・数字・画像などが使えます

③ 部品の見た目のファイルを作る

管理画面で入力した内容を、ページにどう表示するかを書くファイルです。Astro（EmDashの土台の仕組み）の書き方で、部品ごとに1つ作ります。

このブログでは、次の点に気をつけました。

• 入力が空の項目は表示しない（見出しなしの箱なども作れるように）
• リスの画像には「リス」という説明を付ける（画像が出ないときや、読み上げのため）
• スマホでも吹き出しが窮屈にならない幅にする

④ サイトの設定にプラグインを追加する

サイトの設定ファイル（astro.config.mjs）に、作ったプラグインを1行足します。

plugins: [anonCommentsPlugin(), dongriBlocksPlugin()],

追加したら、手元で確かめてから本番に公開します。

⑤ 管理画面で入れてみる

管理画面で記事を開き、本文の中で「/」を入力すると、部品の一覧が出ます。「どんぐりノート」のグループから選び、項目を入力すれば完成です。

AIに頼むときの伝え方

このブログの部品は、AI（Claude Code）に作ってもらいました。頼むときは、次の3つを伝えるとスムーズです。

1. 部品の一覧（上の表のように、場面と入力する項目）
2. 見た目の参考（参考ブログのURLや、スクショ）
3. 「EmDashのプラグインで、管理画面から挿入できる部品にしたい」

作ること自体はAIに任せられます。ただ、出来上がったら「管理画面で入れられるか」「スマホで崩れないか」は、自分の目で確かめてください。

まとめ

• EmDashには装飾の部品がまだないので、プラグインで自分で作る
• 先に「場面と入力する項目」を決めると、使いやすい部品になる
• ファイルは「登録」「見た目」「設定への追加」の3種類
• 難しく感じたら、AIに頼むか、制作を依頼するのも一つの方法

次に読むなら

• EmDashブログのデザインを作り直した記録
• EmDash入門 完全ガイド