microCMSのカスタムclassを活用して記事を装飾する

microCMS

Next.js

2026/02/08

PRを含みます

microCMSにはカスタムclassという機能が備わっており、ブログで記事を書いたりするときにより柔軟にリッチな表現をすることができる。今回はカスタムclassを使ってmicroCMSのリッチエディタに始めから備わっている装飾以外に、新しいパターンを追加して記事を装飾する表現を増やしてみたいと思う

リッチエディタのAPIスキーマにアクセス

ぱっと見でどこを編集すればよいかわかりにくかったので編集する画面までのフローを備忘録的に残しておく

管理画面右上のカスタムフィールドを選択

リッチエディタを選択

サイドメニューのスキーマを選択。リッチエディタの「詳細設定」を選択する

メニューが表示されるのでその最下部のカスタムclassの項目から追加することができる

追加したいカスタムclass

今回自分は以下の公式ブログの記事を参考にした。

自分は「marker」と「point」を追加してみた。最後に忘れずに保存をしておく

リッチエディタの「カスタム」というプルダウンを選択して、先ほど追加したマーカーとポイントが追加されていれば、microCMS側の設定は完了。

Next.jsのCSSにカスタムclassを追加する

microCMS側の設定は完了したので、次にNext.js側の対応を行う必要がある。今回のリッチエディタのカスタムclassは自分の環境では、articleコンポーネントにあたっていればよいので、articleコンポーネントのcssを修正する

①「マーカー」のカスタマイズ

最終的に蛍光ペンで強調するような「マーカー」表示をしたい。参考にした記事を元にindex.module.cssに以下を追加した

:global(.marker) {
  font-weight: bold;
  background: linear-gradient(
    transparent 50%,
    #fcff52 60%,
    #fcff52 90%,
    transparent 90%
  );
}

②「ポイント」のカスタマイズ

以下のようなポイント表示をしたい

CSS Modules環境では、:global セレクタを正しく使うことでCMS側のカスタムクラスを確実に反映できます。

自分は以下のようにカスタマイズしてみた

:global(.point) {
  display: flex;
  align-items: flex-start;
  padding: 1.3rem;
  border-radius: 8px;
  font-size: 16px;
  margin: 1.5em 0;
  line-height: 1.6;
  background-color: #e8f3d6;
  color: #2d3e10;
}

:global(.point)::before {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 14px;
  background-image: url("/icon_point.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

アイコンはbootstrap iconsを利用させてもらった。ファイル名をicon_point.svgにリネームしているが、好みのものを利用して適宜置き換えてもらえばと