KRICHANNEL

• Web制作

【a-blog cms】初心者がオリジナルテーマ作成でぶつかった「ブロックエディターのスタイル」の壁と解決策

はじめに

この記事はa-blog cms Advent Calendar 2025の18日目の記事です。

今回はWebサイトのリニューアルを機に、a-blog cmsのオリジナルテーマ作成に初挑戦しました。 この記事では、その際に参考にした教材と、初心者の私がぶつかった「ブロックエディターの表示崩れ」と、その解決方法について共有します。

参考にした教材

今回、ゼロから作るにあたって、たにぐちまことさんのUdemy講座を参考にさせていただきました。

困ったこと：ブロックエディターの見た目が反映されない？

講座のおかげで順調に進んでいたのですが、途中で困ったことがありました。 それは、「ブロックエディターで入力した記事本文に、スタイルが当たらない」という問題です。

管理画面のエディター上では見出しやリストなど綺麗に見えているのに、いざブラウザで表側のページを確認すると、文字の装飾や余白がなく、のっぺりとした表示になってしまっていました。

困って社内のエンジニアさんに相談してみたところ、以下のことを教えてもらいました。

  • デフォルトの状態: 通常は .acms-entry というクラスに対してCSSが書かれており、それでスタイルを当てている。
  • Developテーマの場合: 公式テーマの「Develop」では、Tailwind CSS Typography用の .props というクラスを使っている。

私が作っていたテーマはゼロから作成していたため、これらどちらのスタイル指定も存在しておらず、その結果「のっぺり」した表示になっていたのです。

適用前

（before）スタイルが当たっていない

解決策：Tailwind CSS Typography を導入する

今回は、教えてもらった Developテーマ（.props）のやり方を参考に、Tailwind CSS Typography を導入することにしました。 これを使うと、記事本文の親要素にクラスをつけるだけで、見出しやリストに一括で綺麗なスタイルを当てることができます。

実際の実装手順

今回は本番公開を見据えて、CDNではなくnpmを使ったビルド環境で構築しました。 （ビルドも何もなんのこっちゃよく分かってなかった私ですが、Geminiさんにたくさん相談してなんとかできました…いい時代です）

1. プラグインのインストール

ターミナルで、Tailwind CSS本体と、Typographyプラグインをインストールします。

npm install -D tailwindcss @tailwindcss/typography
npx tailwindcss init

2. tailwind.config.js の設定

プラグインを入れただけでは動かないので、設定ファイル（tailwind.config.js）に記述を追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.{html,php,js}",
    "!./node_modules/**/*",
  ],
  // 念のため prose クラスを消さないように指定
  safelist: [
    'prose',
  ],
  theme: {
    extend: {},
  },
  plugins: [
   // ↓ これを追加しないと動きません
    require('@tailwindcss/typography'),
  ],
}

3. CSSファイル（入力用）の準備

ビルド元となるCSSファイル（例: input.css）には、Tailwindのおまじないを書いておきます。

@tailwind base;
@tailwind components;
@tailwind utilities;

4. テンプレートへの記述

記事詳細のテンプレート（entry.htmlなど）で、記事本文のユニットを出力している箇所を proseクラスで囲みます。

<div class="prose lg:prose-xl">
     @include("/include/unit.html")
</div>
  • prose: これをつけるだけでスタイルが一括適用されます。
  • lg:prose-xl: クラス名を変えるだけで大きさや色まで変えられるのでとっても楽ちんです。今回は「画面幅が大きい時（lg）に、文字サイズを大きく（xl）する」ためにこのクラスを指定しました。

最後に、headタグ内でビルドされたCSSファイルを読み込むのをお忘れなく。

5. ビルド実行

コマンドを実行してCSSを生成します。

npx tailwindcss -i ./input.css -o ./style.css --watch

※パスは環境に合わせて変更してください。

これで無事、ブロックエディターで書いた記事が、表側の画面でも綺麗にスタイルされて表示されるようになりました！

適用後

（適用後）スタイルがあたり綺麗に表示されるようになりました

まとめ

オリジナルテーマ作成はハードルが高いと思っていましたが、Udemyの教材と、社内のエンジニアさん、AIのおかげで、なんとか形にすることができました。 デザインはまだ荒削りなので、今後はもう少しコネコネしてブラッシュアップしていきたいと思います！初心者の参考になれば幸いです。

ablogcms

関連記事