a-blog cms のCSS設定、Geminiで深みにはまる

Geminiのアドバイスに従ったら、設定の深みにはまってしまいました。

当初、a-blog cmsのCSSは dest フォルダ内の bundle.css を直接編集すれば良いと考えていました。しかし、２台のパソコンで共同作業を行う場合は、src フォルダ内のSCSSを編集し、ビルドツールを介して dest へ反映させるのが良いとのことでした。

a-blog cmsのブログテーマの CSSは、developer テーマのsrc/style/main.scssを参照していると教えてくれて、そこには、SCSSをコンパイルするための設定が最初から備わっているとのことで、src/style/main.cssに「h1の文字色を赤にする」という記述をGeminiの指示通りに追加しましたが、反映されませんでした。

さらにGeminiは、「最新のTailwind CSSベースの構成である」と教えてくれて、developer フォルダ内の vite.config.js をGeminiの提案通りの内容に全面的に書き換えたところ、テーマのレイアウトが激しく崩れるなど、収集がつかない状態になってしまいました。

追記　a-blog cmsに含まれる .gitignore ファイルが、アップロード済みの画像などをGitHubへ送信しないように設定されているとは知りませんでした。
そのため、デスクトップからノートパソコンへ media フォルダを同期させるには、GitHub経由ではなくAirDropなどを利用することになります。
また、エントリーを追加した場合は、ターミナルでデータベースを書き出し、それをインポートする手順が必要になります。これについては、いささか手間がかかると感じています。

追記　vite.config.js にはビルドに必要な設定が記述されているのですね。Geminiから「この記述に差し替えてください」と提案されましたが、a-blog cms側であらかじめ用意されている設定を上書きしてしまっても良いのかと疑問に思いました。

a-blog cmsのテーマ「blog」のCSSは dest/bundle.css を参照しており、通常は destと同じ階層にあるsrc/scss/ 内のファイルを修正してビルドすれば反映されると個人的には思っています。しかし、Geminiからはthemesフォルダーの中のdevelopフォルダーの「/src/style/ 内のCSSを編集するように」との指示があり、さらに vite.config.js も提案内容に差し替えるよう言われたため、手順が違うんじゃないかと戸惑ってしまいました。

投稿：2026年３月22日
安藤秀樹