microCMSの記事内にhtmlを直接貼り付ける方法

Next.js

microCMS

2025/10/13

2026/01/31

PRを含みます

ゴールのイメージ
カスタムフィールドの追加手順
繰り返しフィールドでHTMLを参照できるように設定
繰り返しフィールドに反映されているか確認
コンポーネントからhtmlのカスタムフィールドを呼び出せるようにカスタマイズ
フリーHTMLエリアテスト
まとめ

microCMSでブログを運営していると記事内にhtmlを直接貼り付けたくなる場面があると思います（広告や埋め込みリンクなど）本記事ではhtml形式で編集する方法を紹介します。

ゴールのイメージ

ブログの記事を投稿しているAPIにフリーhtmlエリアを追加することをゴールとします。リッチエディタを使いつつ、一部はhtmlでも投稿できることを想定しています。本ブログはNext.jsで構築していて、Next.jsでの実装方法になります

カスタムフィールドの追加手順

画面右上の「カスタムフィールド」を選択。「＋追加」を選択

「カスタムフィールド名」と「カスタムフィールドID」を入力する。自分はフリーHTMLエリアとして使いたかったので、「HTML」、「html」と入力した。入力が完了したら画面右下の「次へ」を選択する。

次に「フィールドID」、「表示名」、「種類」を選択する。自分は以下のようにした。

html（フィールドID）
HTML（表示名）
テキストエリア（種類）

レイアウトは１カラムにした。問題なければ「完了」を選択

カスタムフィールドにHTMLが追加されていればOK

繰り返しフィールドでHTMLを参照できるように設定

記事投稿用のAPIの本文エリアの繰り返しフィールドにHTMLを表示できるように設定するために、右上の詳細設定を選択。

右側からメニューが表示されるので、先ほど作成したカスタムフィールドの「HTML」のチェックボックスをONにする

最後に「変更する」を選択して、設定を反映することができる。

繰り返しフィールドに反映されているか確認

画面下部の「＋」ボタンを押下すると繰り返しフィールドでカスタムフィールドを選択することができる。先ほど追加した「HTML」が表示されていればOK

HTMLを選択すると、このような１カラムのフリーテキストエリアが表示されるはず。

コンポーネントからhtmlのカスタムフィールドを呼び出せるようにカスタマイズ

カスタムフィールドを追加したので、記事に表示できるようにカスタマイズを行う。自分は記事部分をarticleコンポーネントにしているのでその前提でカスタマイズを進めていく。以下の記述を追加した。

  const mainContent = data.main
    .map((block) => {
      switch (block.fieldId) {
        case "main_text":
          return block.editor;
        case "html":　//追加
          return block.html;
        default:
          return "";
      }
    })
    .join("");

～～～（中略）～～～
{/* コンテンツエリア */}
case "html":
 return (
  <div
   key={`html-${index}`}
   dangerouslySetInnerHTML={{ __html: block.html }}
   className={styles.content}
  />
);
～～～（中略）～～～

あとはmicrocm.tsに以下の一文を追加

export type Main = {
  fieldId: string;
  editor: string;
  html: string; //追加
  };
};

フリーHTMLエリアテスト

部署・役職・入社年を示すサンプルデータ
#	氏名	部署	役職	入社年	メール
1	田中太郎	開発部	リードエンジニア	2018	[email protected]
2	鈴木花子	デザイン部	シニアデザイナー	2020	[email protected]
3	佐藤次郎	営業部	営業	2016	[email protected]
4	高橋さくら	人事部	マネージャー	2019	[email protected]

    <table class="sample-table" role="table" aria-describedby="sample-table-desc">
      <caption id="sample-table-desc" style="display:none">部署・役職・入社年を示すサンプルデータ</caption>
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">氏名</th>
          <th scope="col">部署</th>
          <th scope="col">役職</th>
          <th scope="col">入社年</th>
          <th scope="col">メール</th>
        </tr>
      </thead>
      <tbody>
        <tr tabindex="0">
          <td data-label="#">1</td>
          <td data-label="氏名">田中 太郎</td>
          <td data-label="部署">開発部</td>
          <td data-label="役職">リードエンジニア</td>
          <td data-label="入社年">2018</td>
          <td data-label="メール"><a href="mailto:[email protected]">[email protected]</a></td>
        </tr>
        <tr tabindex="0">
          <td data-label="#">2</td>
          <td data-label="氏名">鈴木 花子</td>
          <td data-label="部署">デザイン部</td>
          <td data-label="役職">シニアデザイナー</td>
          <td data-label="入社年">2020</td>
          <td data-label="メール"><a href="mailto:[email protected]">[email protected]</a></td>
        </tr>
        <tr tabindex="0">
          <td data-label="#">3</td>
          <td data-label="氏名">佐藤 次郎</td>
          <td data-label="部署">営業部</td>
          <td data-label="役職">営業</td>
          <td data-label="入社年">2016</td>
          <td data-label="メール"><a href="mailto:[email protected]">[email protected]</a></td>
        </tr>
        <tr tabindex="0">
          <td data-label="#">4</td>
          <td data-label="氏名">高橋 さくら</td>
          <td data-label="部署">人事部</td>
          <td data-label="役職">マネージャー</td>
          <td data-label="入社年">2019</td>
          <td data-label="メール"><a href="mailto:[email protected]">[email protected]</a></td>
        </tr>
      </tbody>
    </table>

表示されましたでしょうか？うまく行っていれば表の部分はちゃんと表として描画されていると思います。