第3回：静的HTMLをテーマとして設定する
この章でやること
サンプルHTMLをTwigテーマとして配置し、a-blog cmsで表示できる状態にする
管理ボックスをテンプレートに組み込む
デバッグモードを有効にして、実装中のエラーをすぐに確認できるようにする
まだCMS化はしない――「HTMLがa-blog cmsを経由して処理される」状態を確認する
この章の終わりには、見た目はサンプルの静的サイトそのままで、a-blog cmsが裏側で動いている状態が完成します。
部分的に CMS 化ができる a-blog cms ですが、まずは どこも更新できない状態のまま 、サンプル一式を CMS のテーマとして設定 するところから始めます。最初の目的は、既存の HTML を崩さずに a-blog cms のテーマとして正しく認識させることです。
1. テーマ(themes)ディレクトリに全てのファイルをコピーする
a-blog cms では、themes/ ディレクトリの中にあるフォルダを テーマ として認識します。まずは、用意したサンプルサイト一式（ルート相対パス版）を以下のようにコピーしてください。
/themes/sample/
├── index.html
├── news/
├── service/
├── contact/
├── css/
└── images/2. テーマの設定を変更します
a-blog cms にログインします。
（管理ページ）のボタンをクリックして管理画面に入ります。
左メニューの「テーマ設定」から既存の「Develop 基本テーマ」 をクリックします。
「テーマディレクトリ名」の SELECTメニューに「sample」を選択してください。
保存してください。
次にテンプレートファイルの設定を変更します。
トップページ | _top.twig |
|---|---|
一覧ページ | index.twig |
詳細ページ | _entry.twig |
エラーページ(404 Not Found) | 404.twig |
変更後は保存してください。
a-blog cms ではテンプレートの基本的なファイル名にルールがあり、 テーマ管理の画面（上記キャプチャ）でもそのルールが設定されている ことが確認できます。必要に応じて変更することも可能です。
3. ファイルを .twig 形式にリネームする
一般的には、トップページは _top.twig、一覧ページは index.twig、詳細ページは _entry.twig として作成するのが基本です。今回のチュートリアルでも、このルールに沿ってサンプルの HTML を活用していきます。
/themes/sample/
├── _top.twig ← index.html をリネーム
├── news/
├── service/
├── contact/
├── css/
└── images/index.html を _top.twig にリネームすることで、a-blog cmsがトップページテンプレートとして認識します。
4. 表示を確認しましょう
これで https://ablogcms-tutorial.ddev.site/ にアクセスすると、まだ CMS を利用して更新できる状態にはなっていませんが、画像やページ遷移なども リンク切れになることなく、既存の HTML サイトがそのまま表示される ようになります。
さらに、CSS や JavaScript の読み込みについては a-blog cms によって以下のように書き換え処理が行われます。
<!-- 書き換え前 -->
<link rel="stylesheet" href="/css/custom.css">
<!-- 書き換え後（a-blog cmsによる自動処理） -->
<link rel="stylesheet" href="/themes/sample/css/custom.css?date=20250817215109">/themes/sample/ が追記されて正しいテーマの場所を参照
?date=… が付加され、キャッシュバスティング によりブラウザキャッシュを回避
画像も同様にパスが補完され、リンク切れを防ぎます。
<img src="/themes/sample/images/main_visual.jpg" alt="美味しそうな料理のメインビジュアル" class="w-full h-full object-cover" >また、HTML の <head> タグの直前には、a-blog cms が生成していることを示す meta タグが自動的に追記されています。
<meta name="generator" content="a-blog cms" />このタグが出力されていれば、サンプル HTML が単なる静的ファイルとして表示されているのではなく、a-blog cms を経由して処理されている ことが確認できます。
5. 管理用UIの設置を最初にする
テーマを切り替える前は、トップページに表示されていた （管理ページ） ボタンから管理画面へアクセスできていました。新しいテーマに切り替えたことでこの導線が消えています。運用時に困らないよう、先に管理用ボックスを設置 しておきます。
設置場所の目安
_top.twig の <section id="about" ...> の上に以下を追加してください。
@include("/admin/action.html")この状態で https://ablogcms-tutorial.ddev.site/ にアクセスすると、管理用 CSS が未読込のためレイアウトが崩れて表示 され、操作しづらいはずです。正常に表示できるよう、<head> タグ内に 管理 UI 用のリソース を追加します。
<link rel="stylesheet" href="/css/acms-admin.min.css">
{% set js = module('V2_Js') %}
<script src="{{ JS_LIB_JQUERY_DIR }}jquery-{{ JS_LIB_JQUERY_DIR_VERSION }}.min.js" charset="UTF-8"></script>
<script src="{{ ROOT_DIR }}acms.js{{ js.arguments }}" charset="UTF-8" id="acms-js"></script>1行目 : a-blog cms の管理用 CSS
3行目 : a-blog cms で必要な jQuery のバージョンを読み込み
4行目 : a-blog cms の管理用 JavaScript
これで、ページ上部に管理ボックスが正しく横並びで表示され、ページから直接「新規投稿」「管理画面へ移動」 「ログアウト」といった操作などが行えるようになります。
7. デバッグモードを有効にする（推奨）
次の章からテンプレートの実装を進めると、Twigの構文エラーや変数の参照ミスが発生することがあります。デバッグモードを有効にしておくと、エラーメッセージやインクルード先のパスが表示され、原因の特定がしやすくなります。
管理ユーザーごとにデバッグモードを有効にできます。管理画面の「ユーザー管理」から該当ユーザーを編集し、「デバッグモード 」を選択して保存してください。開発環境・本番環境を問わず、そのユーザーでログインしているときだけ有効になるため、本番環境でも安全に試せます。
デバッグモードを有効にするとキャッシュが効かなくなり、エラーメッセージも表示されます。開発中は有効にしておくことを推奨しますが、本番公開時には無効にしてください。
まとめ
この章でやったこと：
サンプルHTMLを
themes/sample/にコピーし、テーマとして認識させたindex.html→_top.twigにリネームし、Twig テンプレートとして設定したa-blog cmsによるパス自動補完とメタタグ出力で「CMSを経由している」ことを確認した
管理UI（
@include("/admin/action.html")）と管理UI用リソースを_top.twigに追加した
まだCMS化はしていませんが、HTMLがa-blog cmsを経由して処理される状態が整いました。次の章からいよいよ実装を始めます。最初のターゲットは、更新頻度が高く効果を実感しやすい「お知らせ一覧」のCMS化です。