静的HTMLサイトの「お知らせ」を部分的に CMS化してみよう

Ver. 3.2.x 対応版

a-blog cms では、既存の静的 HTML を取り込み、必要な部分だけを CMS化 できます。これにより、デザイン → マークアップ → CMS実装 という分業フローに無理なく組み込めるのが特徴です。

近年、WordPress などでは フルサイト編集（FSE） が普及し、コードを書かずにブロックを配置してサイトを構築する流れも広がっています。
しかし、デザインやマークアップ、そしてアクセシビリティを尊重した従来のフローを活かしたい現場 にとっては、静的 HTML をベースに CMS 化するアプローチが依然有効です。

さらに、a-blog cms の実装にあたっては、PHP や JavaScript を書く必要はありません。 既存の HTML に少しタグを加えるだけで完結します。ヘッドレス CMS のように複雑な環境構築も不要 で、HTML の基礎的な知識さえあれば、実装もメンテナンス も可能です。

それでは実際に、静的HTML を どのように CMS化するのか を見ていきましょう。

今回はもっともシンプルな例として 「お知らせ一覧を表示するトップページ」と「お知らせ詳細ページ」 を CMS 管理に置き換える手順を紹介します。まずは小さな部分から始めることで、CMS 化の流れを無理なく体験できるはずです。

1. サンプルのウェブサイトを確認します

ここからは実際に、静的HTML を CMS化する手順を進めていきます。最初に、チュートリアルで使用するサンプルのウェブサイトを確認しましょう。

今回のチュートリアルでは、HTML ファイル 15枚 からなる静的なウェブサイトをサンプルとして使用します。デザインは Tailwind CSS を用いてスタイルを定義しており、メニューなどの動きには Alpine.js を利用しています。

実際のサンプルサイトを確認

サイトの構成は以下のようになっています。

index.html（トップページ。メインビジュアルとサービス紹介があり、下部に「お知らせ一覧」が掲載されています）
news/
- index.html（お知らせ一覧ページ）
- page2.html（お知らせ一覧の 2 ページ目）
- 20250710.html 〜 20250807.html（5 つのお知らせ詳細ページ）
service/
- index.html（サービス一覧ページ）
- catering.html, cooking-class.html, private-chef.html（各サービス紹介ページ）
contact/ （フォームは画面の遷移のみで動作していません）
- index.html（お問い合わせフォーム）
- confirm.html（確認画面）
- thanks.html（送信完了画面）
css/custom.css（Tailwind のカスタマイズや追加スタイルをまとめた CSS）
images/（サイト内で使用するメインビジュアルや記事用画像が格納されています）

チュートリアルでは、このうち トップページの「お知らせ一覧」とお知らせの詳細ページ（news フォルダ内の HTML） を題材に、静的 HTML を CMS 管理に置き換える流れを学びます。まずは 「お知らせ部分を CMS化する」 ことで、手軽に「できた！」という達成感を体験しましょう。

サンプルファイルのダウンロード (3MB)

相対パスとルート相対パスについて

HTML を CMS のテーマとして利用する際、画像や CSS へのパス指定方法によっては、表示が崩れることがあります。ここでは、相対パスとルート相対パスの違いを確認しておきましょう。

サンプルファイルには、相対パス版のファイルとルート相対パスの両方が同梱されています。

相対パス (sample-relative-path)

現在のファイルを基準にして、そこから見た相対的な位置を指定する方法です。

<link rel="stylesheet" href="../css/custom.css">
<img src="./images/logo.png">

../ は「1つ上の階層」を意味します。
ページの階層が深くなると、../../ のように複雑になりやすい。
パソコンでファイルを直接閲覧可能です。

ルート相対パス (sample-root-relative-path)

サイトのルート（ドメイン直下 /）を基準にして指定する方法です。

<link rel="stylesheet" href="/css/custom.css">
<img src="/images/logo.png">

どのディレクトリにあるページからでも同じ指定が使える。
CMS 化したときに、テンプレートの場所に関わらず一貫して参照できるのでおすすめ。
ウェブサーバーのドキュメントルートにアップロードして閲覧が可能になります。

既存の静的 HTML サイトを CMS 化する場合、すでに用意されている HTML は相対パスで書かれているケースが多いと思われます。
a-blog cms では相対パスでも動作しますので、どちらを使っても問題ありません。

ただし、これから新しくコーディングを行うサイトであれば、担当者には「ルート相対パスでお願いします」と伝えておくことをおすすめします。

ルート相対パスを使うことで、テンプレートの階層や呼び出し場所に依存せず、どのページからも一貫して正しく参照できるだけでなく、後からファイル構成を整理して階層を移動した場合でもパスが変わってしまう心配が少なくなり、のちのち実装が楽になります。

2. 動作環境を用意します

このチュートリアルでは、a-blog cms Ver. 3.2.x の環境で、beginner テーマを新規インストールしたところから始める 前提で説明しています。

本文中の例では http://localhost/ での利用を想定していますが、2-2 の ablogcms.io（無料お試し環境） や 2-3 の レンタルサーバー を利用する場合でも問題ありません。その際は、以下のフォームで利用する URL を設定し、（変更する）ボタン をクリックしてください。

ページ内のリンク先が localhost から指定した URL に書き換わり、クリックするとその環境に対応したページを開けるようになります。

2-1. ローカル環境に新規にインストールする

Windows なら XAMPP、Mac なら MAMP などのアプリケーションをインストールすることで PHP + MySQL の動作するサーバーを準備することが簡単にできます。

次に、a-blog cms をインストールするフォルダに 「簡単セットアップ」用の PHP ファイル （約 30KB の setup.php）を置きます。

簡単セットアップ ( setup.php ) ダウンロード

3.2 正式版リリースまでは、setup.php 13行目の先頭の # を削除して、ご利用ください。

# $ablogcmsVersion = '3.2.0-rc.0';

ブラウザで http://localhost/setup.php にアクセスすると、セットアップが開始されます。

あとは画面の指示に従って進め、必要な情報を入力しながらインストールを完了してください。途中で テーマの選択画面 が表示されますので、必ず「beginner」を選択してください。

2-2. 無料のお試しサーバー ablogcms.io を利用する

CMS を試しに触れる際に一番のハードルになるのは、動作環境の準備 です。この点をクリアするために、開発元では 30日間限定の無料お試しサーバー環境 を用意しています。

SFTP 接続が可能 ：テーマファイルを編集してカスタマイズできます。
PHP のアップロードは不可 ：カスタマイズはテーマファイルに限られます。
メール送信には注意 ：フォームなどからのメール送信を行う場合は、SMTP 設定が必要です。
完全無料 ：お試し後に課金されることはありません。
30日で環境は自動削除 ：期限が過ぎると利用できなくなります。
繰り返し利用可能 ：必要であれば新しい環境を再度申し込むことができます。

インストール作業を省略して、すぐに a-blog cms を試したい方におすすめの方法 です。

https://www.ablogcms.io/v32-rc/

2-3. レンタルサーバーにインストールする

実際に公開を前提としたウェブサイトを構築する場合は、レンタルサーバーへのインストールが一般的です。a-blog cms は PHP + MySQL が利用できる多くの国内レンタルサーバーに対応しています。

動作環境

PHP 8.1.x - 8.4.x
MySQL 5.x - 8.4.x ( MariaDB対応 )

なお、正式なライセンスを設定するまでは開発版として動作 します。

そのため、学習や検証の段階ではライセンス登録をせずに利用可能ですが、本番環境での公開や継続的な運用にはライセンスの設定が必要 です。

3. テーマとして設定します

部分的に CMS 化ができる a-blog cms ですが、まずは どこも更新できない状態のまま 、サンプル一式を CMS のテーマとして設定 するところから始めます。最初の目的は、既存の HTML を崩さずに a-blog cms のテーマとして正しく認識させることです。

3-1. テーマ(themes)ディレクトリに全てのファイルをコピーする

a-blog cms では、themes/ ディレクトリの中にあるフォルダをテーマとして認識します。まずは、用意したサンプルサイト一式（ルート相対パス版）を以下のようにコピーしてください。

/themes/sample/
  ├── index.html
  ├── news/
  ├── service/
  ├── contact/
  ├── css/
  └── images/

3-2. テーマの設定を変更します

a-blog cms にログインします。
（管理ページ）のボタンをクリックして管理画面に入ります。
左メニューの「テーマ設定」から既存のテーマセット Beginner基本テーマをクリックします。
「テーマディレクトリ名」の SELECTメニューに「sample」を選択してください。
（保存）してください。

補足

このチュートリアルの手順には、ページ名に 直接アクセスできるリンク を設定しています。
すぐに目的の画面を開きたい場合はリンクをクリックすれば移動できますが、学習のためには実際に管理画面のボタンやリンクをクリックして画面遷移を体験することをおすすめします。

a-blog cms ではテンプレートの基本的なファイル名にルールがあり、 テーマ管理の画面（上記キャプチャ）でもそのルールが設定されている ことが確認できます。必要に応じて変更することも可能です。

一般的には、トップページは _top.html、一覧ページは index.html、詳細ページは _entry.html として作成するのが基本です。今回のチュートリアルでも、このルールに沿ってサンプルの HTML を活用していきます。

/themes/sample/
  ├── _top.html （変更）
  ├── news/
  ├── service/
  ├── contact/
  ├── css/
  └── images/

このように、サンプルサイトの index.html を _top.html にリネーム してください。これで、a-blog cms がトップページとして正しく認識できるようになります。

3-3. 表示を確認しましょう

これで http://localhost/ にアクセスすると、まだ CMS を利用して更新できる状態にはなっていませんが、画像やページ遷移などもリンク切れになることなく、既存の HTML サイトがそのまま表示されるようになります。

さらに、CSS や JavaScript の読み込みについては a-blog cms によって以下のように書き換え処理が行われます。

<link rel="stylesheet" href="/css/custom.css" >

↓

<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 を経由して処理されていることが確認できます。

ここまでで、サンプルサイトを a-blog cms のテーマとして設定し、正しく表示されることを確認できました。まだどこも CMS で管理されていませんが、HTML が a-blog cms を経由して処理されていることは確認できています。

それでは、ここから CMS の実装を進めていきましょう。最初のステップは、もっともシンプルな題材である「お知らせ一覧」と「お知らせ詳細」の CMS 化です。

4. 管理用ボックスの設置を最初にする

テーマを切り替える前は、トップページに表示されていた （管理ページ） ボタンから管理画面へアクセスできていました。新しいテーマに切り替えたことでこの導線が消えています。運用時に困らないよう、先に管理用ボックスを設置 しておきます。

設置場所の目安

配置場所は任意ですが、以下を参考にしてください。

_top.html : <section id="about"> の上

@include("/admin/action.html")

この状態で http://localhost/ にアクセスすると、管理用 CSS が未読込のためレイアウトが崩れて表示 され、操作しづらいはずです。正常に表示できるよう、<head> タグ内に 管理 UI 用のリソース を追加します。

<link rel="stylesheet" href="/css/acms-admin.min.css">
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js --><script src="%{ROOT_DIR}acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

1行目 : a-blog cms の管理用 CSS
2行目 : a-blog cms で指定した jQuery のバージョンを読み込み
3行目 : a-blog cms の管理用 JavaScript

これで、ページ上部に管理ボックスが正しく横並びで表示され、ページから直接「新規投稿」「管理画面へ移動」「ログアウト」といった操作などが行えるようになります。

5. トップページの「お知らせ一覧」を CMS 化する

トップページに配置されている「お知らせ一覧」は、更新頻度が高い部分であり、ここだけ更新できれば十分という案件も実際には少なくありません。

そのため、まずはこの「お知らせ一覧」を CMS 化することで、運用側にとっても制作者側にとっても大きなメリットを感じやすくなります。

5-1. 前提を確認する

このチュートリアルでは、最初に Beginner テーマ を選択して進めています。

そのため「お知らせ」用のカテゴリー（コード：news）があらかじめ作成されており、サンプルとしていくつかのお知らせ記事が登録済みになっています。

ここからは、その既存データを使って、トップページの「お知らせ一覧」を CMS で出力できるようにする作業を進めます。

対象となる HTML は、トップページ内の <section id="news"> です。

<section id="news" class="py-14 sm:py-20 bg-white">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center mb-12 mt-2">News</h2>
<ul class="border-t border-gray-200">
    
<li>
<a href="/news/20250807.html" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
<time datetime="2025-08-07" class="flex-shrink-0 text-sm text-gray-500">2025.08.07</time>
<span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">新商品</span>
<span class="font-medium text-gray-800 truncate">新しい季節限定メニューが登場しました</span>
</a>
</li>
    
...
    
</ul>
<div class="mt-8 text-center">
<a href="/news/" class="inline-block font-semibold text-sky-600 hover:text-sky-700 transition-colors">
お知らせ一覧へ &rarr;
</a>
</div>
</div>
</section>

このうち <li> 〜 </li> 部分を CMS に置き換えて出力できるようにします。

5-2. Entry_Summary モジュールのスニペットを貼ってみよう

a-blog cms では、テンプレートの中にモジュールタグを書き込むことで、記事一覧や検索などの機能を呼び出します。

「お知らせ一覧」を CMS 化するには、記事の要約リストを出力できる Entry_Summary モジュールを利用します。

まずは次のような基本形を _top.html の <section id="news"> の <ul class="border-t border-gray-200"> の下に貼ってみましょう。

<!-- BEGIN_MODULE Entry_Summary -->

  <!-- BEGIN entry:loop -->

　　　<!-- 一覧表示の繰り返し部分 -->
    
  <!-- END entry:loop -->
 
<!-- END_MODULE Entry_Summary -->

まずは、 のところに、元々の HTML にあった <li> 〜 </li> の部分をコピペします。

<li>
<a href="/news/20250807.html" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
<time datetime="2025-08-07" class="flex-shrink-0 text-sm text-gray-500">2025.08.07</time>
<span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">新商品</span>
<span class="font-medium text-gray-800 truncate">新しい季節限定メニューが登場しました</span>
</a>
</li>

ここで、一旦 http://localhost にアクセスして確認してみましょう。トップページの「お知らせ一覧」には、「新しい季節限定メニューが登場しました」が繰り返し表示されているはずです。

これはまだ固定の HTML を繰り返し出力しているだけなので、同じ内容が並んでいます。次のステップでは、この部分を CMS のデータに置き換えて、実際のお知らせ記事が表示されるようにしていきます。

5-3. 変数に置き換えてみよう

ここでは、タイトル・日付・リンクの 3 点だけを CMS の変数に置き換えます。HTML の構造やクラスはそのまま活かし、固定値だけを差し替えます。

置き換え内容

リンク先 : /news/20250807.html → {url}
日付 : 2025年8月7日 → {date#Y}年{date#m}月{date#d}日
カテゴリー名 : 新商品 → {fieldCategoryName}
タイトル : 新しい季節限定メニューが登場しました → {title}

<!-- BEGIN_MODULE Entry_Summary -->

<!-- BEGIN entry:loop -->
<li>
<a href="{url}" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
<time datetime="{date#Y}-{date#m}-{date#d}" class="flex-shrink-0 text-sm text-gray-500">{date#Y}.{date#m}.{date#d}</time>
<span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800"><!-- BEGIN categoryField -->{fieldCategoryName}<!-- END categoryField --></span>
<span class="font-medium text-gray-800 truncate">{title}</span>
</a>
</li>
<!-- END entry:loop -->
 
<!-- END_MODULE Entry_Summary -->

ここで、もう一度 http://localhost にアクセスして確認してみましょう。

今度はトップページの「お知らせ一覧」に、 beginner テーマの記事が表示されているはずです。

表示を確認できたら、元々サンプル HTML に書かれていた「新しい季節限定メニューが登場しました」以下の静的な <li> 部分は削除しておきましょう。

これで、一覧はすべて CMS から出力された内容だけが表示されるようになります。

5-4. テンプレートにモジュールID を設定しよう

トップページの News は「お知らせ」カテゴリーの記事だけを表示したいのですが、現在の状態では採用情報など他のカテゴリーも混ざって表示されています。

このように 表示条件（カテゴリー、件数、ソート順など）を制御するため には、モジュールに ID を設定する必要があります。モジュール ID を付与すると、管理画面から対象モジュールごとに条件を細かく設定できるようになります。

コード上では、以下のように BEGIN_MODULE Entry_Summary の後に id="news_top" を追記します。

<!-- BEGIN_MODULE Entry_Summary id="news_top" -->
  <!-- BEGIN entry:loop -->
    ...
  <!-- END entry:loop -->
<!-- END_MODULE Entry_Summary -->

これで管理画面に「news_top」というモジュール ID が認識され、対象カテゴリーを「お知らせ」に限定できるようになります。

5-5. 管理画面にモジュールID を作成する

先ほどコードに id="news_top" を追加しましたが、実際に機能させるには管理画面から モジュールID を登録し、条件を設定する必要があります。

トップページの管理ボックスにある（管理ページ）ボタンをクリックして管理画面に移動します。
右側のメニューから「モジュールID」を選択してください。
画面右上の緑色の（モジュールIDを追加）ボタンをクリックします。
以下のように設定を行います。

条件設定

モジュール : サマリー ( Entry_Summary )
モジュールID : news_top
名前 : お知らせトップ用
引数カテゴリーID : お知らせ

※ カテゴリーの設定は（ID参照）ボタンをクリックするとカテゴリーの選択肢が表示されます。

5-6. モジュールID の表示設定を確認する

先ほどの手順でモジュール ID を作成すると、条件設定タブ の横に 表示設定タブ が追加されます。ここでは、記事の並び順や件数を設定できます。

表示設定

表示順 : 日付 (降順)
表示件数 : 5

この設定を行うことで、トップページの「お知らせ」には 新しい記事から 5 件 が表示されるようになります。

これにより、当初の目的である「お知らせ一覧を CMS 化する」というゴールが1つ達成できました。

5-7. セクション全体を CMS 管理の対象にする

今回、初めてのモジュール ID を設定するにあたり、5-2 ではできるだけシンプルに 「繰り返し部分のみ」 にモジュールを記述しました。しかし、実際には セクション全体を囲む形でモジュールを書くことが推奨 されています。

<!-- BEGIN_MODULE Entry_Summary id="news_top" -->
<section id="news" class="py-14 sm:py-20 bg-white">

    (略)
    
</section>
<!-- END_MODULE Entry_Summary -->

このように記述することで、該当セクション全体が CMS 管理の対象となり、記事が存在しない場合の表示制御 や 出し分け処理 などを柔軟に行えるようになります。

さらに、<section> の直後に以下のインクルード文を追加してください。

@include("/admin/module/setting.html")

これを追加すると、http://localhost/ の該当モジュールにマウスをホバーした際、右上に 「編集」リンク が表示されます。クリックするとモーダルウィンドウが開き、モジュール ID の設定画面に直接アクセスできるようになります。

6. 詳細ページを表示できるようにする

一覧ページから記事タイトルをクリックした際に、記事の詳細ページへ遷移できることは CMS における基本的な動作の一つ です。

ここからは、トップページで記事一覧を表示できるようになった流れを受けて、個別記事の本文や関連情報を表示するための 詳細ページのテンプレート を整えていきます。

現在は、トップのお知らせ一覧からリンクをクリックしても 「404 Not Found」 になります。これは、 詳細ページ用のテンプレートファイルが存在しない ためです。

6-1. テンプレートを準備する

「404 Not Found」になる原因としては、_entry.html が存在しないからです。そこで、まずは既存の静的ページをひな形にしてテンプレートを作ることから始めます。

news/20250807.html をコピーして news/_entry.html を作成します。ファイルの中身は、そのままで構いません。

/themes/sample/
  ├── _top.html 
  ├── news/
  │   └── _entry.html （追加）
  ├── service/
  ├── contact/
  ├── css/
  └── images/

これで http://localhost/ にアクセスすると、「404 Not Found」にはならず、20250807.html の内容がそのまま表示されます。どのお知らせをクリックしても同様に、同じページが表示されるはずです。

6-2. Entry_Body モジュールのスニペットを貼ってみよう

次は、お知らせの本文が表示できるようにしていきます。

news/_entry.html のコードを確認すると、<article> 〜 </article> の内側が、今回の Entry_Body モジュールのスニペットを貼る場所になります。

まずは以下のスニペットを <article> の内側に貼ってみます。

<!-- BEGIN_MODULE Entry_Body -->

  <!-- BEGIN entry:loop -->

  <h1>{title}</h1>
  <!-- entry header contents -->

  <!-- BEGIN unit:veil -->
  @include("/include/unit.html")
  <!-- END unit:veil -->
  
  @include("/admin/entry/action.html")
  
  <!-- END entry:loop -->

<!-- END_MODULE Entry_Body -->

トップページ http://localhost/ の「お知らせ一覧」から一番上のお知らせ記事をクリックすると、既存の静的 HTML のお知らせコンテンツの上に、CMS によって出力された「お知らせ本文」が表示されることを確認できます。

この時点では、ほとんど CSS が効いていないプレーンな状態 ですが、一覧ページから詳細ページへの遷移が成立し、CMS らしい動作がひとつ実現できた ことになります。

6-3. Entry_Body にもモジュールID を設定する

5-4 で Entry_Summary にモジュール ID を設定したように、基本モジュールをテンプレートに設置するときは毎回 ID を付ける ことを習慣化しましょう。
詳細テンプレートでは、Entry_Body にも ID（ id="news_body" ）を付けておきます。

<!-- BEGIN_MODULE Entry_Body id="news_body" -->


<!-- END_MODULE Entry_Body -->

テンプレートにモジュールを設置した際には、管理画面にモジュールID の設定を行います。5-5 で Entry_Summary を追加したように、ここでは Entry_Body モジュール を選択し、モジュールID は news_body で作成します。

ここで重要なのが、管理画面のモジュールID 設定にある引数のチェックです。URL で渡ってくる値を、このモジュールID に受け渡す ための設定で、詳細表示が正しく切り替わるかに直結します。

この設定を行うことで、一覧から詳細ページへ遷移した際に、URL の eid が Entry_Body（news_body） に正しく渡り、クリックした記事本文が表示されるようになります。

http://localhost/ でいくつかのお知らせをクリックし、該当記事が表示されることを確認してみましょう。

6-4. Entry_Body モジュールで「記事ヘッダー情報」を整える

記事本文に先立ち、タイトルや公開日、カテゴリー、タグといった「記事ヘッダー情報」を整えていきます。

先ほどのスニペットでは以下のように記述していました。

<h1>{title}</h1>
<!-- entry header contents -->

この部分を、実際の HTML レイアウトに合わせて、a-blog cms の変数を用いて置き換えていきます。

変換前の静的 HTML

<p class="text-base font-semibold text-sky-600 text-center"><time datetime="2025-08-07">2025年8月7日</time></p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">新しい季節限定メニューが登場しました</h1>
<div class="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
    <a href="#" class="bg-sky-100 text-sky-800 text-sm font-semibold px-3 py-1 rounded-full">新商品</a>
    <a href="#" class="text-sm text-gray-500 hover:text-gray-700">#季節限定</a>
    <a href="#" class="text-sm text-gray-500 hover:text-gray-700">#夏メニュー</a>
</div>

置き換え内容

日付 : 2025年08月07日 → {date#Y}年{date#m}月{date#d}日
タイトル : 新しい季節限定メニューが登場しました → {title}
カテゴリー名 : 新商品 → {fieldCategoryName}
タグ : #季節限定 #夏メニュー →  〜省略（下のコードを）〜

<p class="text-base font-semibold text-sky-600 text-center"><time datetime="2025-08-07">{date#Y}年{date#m}月{date#d}日</time></p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">{title}</h1>
<div class="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
    <a href="/%{CCD}/" class="bg-sky-100 text-sky-800 text-sm font-semibold px-3 py-1 rounded-full"><!-- BEGIN categoryField -->{fieldCategoryName}<!-- END categoryField --></a>
    <!-- BEGIN tag:loop --><a href="{url}" class="text-sm text-gray-500 hover:text-gray-700">#{name}</a><!-- END tag:loop -->
</div>

カテゴリーのリンク先が # で未設定でしたが、/%{CCD}/ とする事で、今いるページのカテゴリーコードが編集されます。

6-5. Entry_Body モジュールで「本文(ユニット)」を整える

記事ヘッダーの次に、本文の表示部分 を整えていきます。
a-blog cms では本文を ユニット単位 で管理できるため、テキスト・画像・動画などを組み合わせて柔軟にレイアウトすることが可能です。

エントリー本文を表示するためには、以下のコードを記述します。

<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<!-- END unit:veil -->

このスニペットを配置することで、管理画面で登録した本文ユニットが順番に出力 され、ニュース記事の内容が実際にページ上に表示されるようになります。

ただし、このままでは CSS が効いていないプレーンな状態 です。そのため、元の HTML にあった スタイル用のラッパー で囲みましょう。

<div class="mt-12 prose prose-lg max-w-none prose-sky">
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<!-- END unit:veil -->
</div>

こうすることで、Tailwind Typography プラグインのスタイルが適用 され、本文が見やすいデザインで表示されるようになります。

ここまで出来たら、<article> 〜 </article> の中の 静的なコンテンツは削除 してしまいましょう。恒例の http://localhost/ を確認して、管理画面で入力した本文ユニットが正しく表示されているかチェックしてください。

現在のサンプルデータには、お知らせにタグが設定されていません。そのためタグが表示されません。 次のバージョンのサンプルデータには含めます。現状では（編集）ボタンをクリックしてタグを設定してみてください。

6-6. 詳細ページでも「管理ボタン」を整える

トップページで管理ボックスを設置しましたが、詳細ページにも同様に設置 しておきましょう。これにより、記事詳細ページを見ている状態から 新規エントリー追加 が可能になり、また 運営者がログイン状態か非ログイン状態か を簡単に判別できるようになります。

設置場所の目安

_entry.html : <article> の直前

@include("/admin/action.html")

このコードを追加することで、記事本文を見ながらすぐに投稿や編集操作へ移れるようになります。

ここで http://localhost/ にアクセスすると、スタイルが適用されていない管理ボックスのパーツが縦に並んでしまい、分かりにくい表示 になっているはずです。

これは、管理 UI用の CSS がまだ適用されていない ために起こります。<head>内に以下のコードを追加します。

<link rel="stylesheet" href="/css/acms-admin.min.css">
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js --><script src="%{ROOT_DIR}acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

これで、管理ボックス が本来のデザインで横並び表示され、記事本文の下側にも CSS が適用されたことで エントリー編集ボックス が現れます。

このエントリー編集ボックスは、以下のインクルードによって呼び出されています。

@include("/admin/entry/action.html")

これは 6-2 のコードにすでに含まれていたため、追加作業をしなくても表示されています。ただし、エントリー編集ボックスは必ず、  〜  の中に記述する必要があります。

そのため、例えば  のすぐ下にもうひとつ配置することも可能です。標準テーマでも、利便性を高めるために 記事の上下両方にエントリー編集ボックスを設置 しています。

6-7. パンくずリストを調整する

本文の表示部分の Entry_Body モジュール については実装を完了しましたが、その上にあるパンくずリスト（トピックパス）に表示されている記事タイトルは、まだ静的 HTML のままになっています。

このままでは、どの記事を開いても同じタイトルが表示されてしまう ため、CMS 側の変数を使って記事ごとに正しいタイトルが出力されるように修正していきます。

<li>
  <span class="flex items-center">
    <svg class="h-5 w-5 flex-shrink-0 text-gray-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" /></svg>
    <span class="ml-2 text-sm font-medium text-gray-500" aria-current="page">
    新しい季節限定メニューが登場しました</span>
  </span>
</li>

これまで学んできたところで、最初に思いつくところとしては、「新しい季節限定メニューが登場しました」を {title} に置き換えることです。

しかし、残念ながら、a-blog cms の変数 {title} は、 〜  の中に記述しないと機能しません。

いくつかの方法がありますが、今回は「お知らせ」のみを CMS 化するという前提ですので、簡易的な実装で進めます。

a-blog cms の変数には、その URL コンテキストで生成される グローバル変数 があり、波カッコの前に % を付けて表現します。タイトルは %{ENTRY_TITLE} と書きます。

http://localhost/ にアクセスし、いくつかの「お知らせ」記事をクリックしてみてください。正しくタイトルが表示されることを確認できるはずです。

これで、詳細ページの実装は完了です。

一覧ページから記事をクリックすると記事本文が正しく表示され、CMS としての基本的な動作が整いました。

7. 一覧ページも用意してみよう

a-blog cms のテンプレートは、トップページ・一覧ページ・詳細ページの 3つのメインテンプレートで構成されています。ここまででトップページと詳細ページを整えてきましたので、最後に「一覧ページ」を用意してみましょう。

/themes/sample/
  ├── _top.html 
  ├── news/
  │   ├── _entry.html 
  │   └── index.html （今回の対象）
  ├── service/
  ├── contact/
  ├── css/
  └── images/

実装方針はトップページ（_top.html）と同様ですが、一覧ページでは画像（サムネイル）の表示と、2 ページ目以降に遷移できるページャー を追加で対応します。

7-1. 対象のファイルを確認します

news/index.html を開くと、見出しの下にお知らせを繰り返し表示している部分があります。ここを a-blog cms の Entry_Summary モジュールに置き換えることで、管理画面から登録した記事が自動的に一覧表示されるようになります。

対象となるのは、以下の <ul> 〜 <li> の部分です。

<div class="border-b border-gray-200 pb-8 mb-12">
    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">News</h1>
    <p class="mt-4 text-lg text-gray-600">最新情報や季節限定のメニューなどをお届けします。</p>
</div>

<ul class="space-y-8">
    <li> 
        ....（今回の対象）
    </li>

ここに Entry_Summary のモジュールを実装します。モジュール ID は news_index とします。

<!-- BEGIN_MODULE Entry_Summary id="news_index" -->

  <!-- BEGIN entry:loop -->

　　　<!-- 一覧表示の繰り返し部分 -->
    
  <!-- END entry:loop -->
 
<!-- END_MODULE Entry_Summary -->

今回は、実際の繰り返しリストを含めて次のようにします。

<!-- BEGIN_MODULE Entry_Summary id="news_index" -->
<ul class="space-y-8">
  <!-- BEGIN entry:loop -->
    <li> 
        ....（今回の繰り返し表示される記事）
    </li>
  <!-- END entry:loop -->
</ul>

....（もっと見るリンク）
    
<!-- END_MODULE Entry_Summary -->

のようにします。

7-2. モジュールID を設定する

7-1 で id="news_index" を設定しましたので、今回は先に 管理画面側でモジュールID の設定を行う 手順に進みます。事前に設定を行なっておかないと、実は一覧で表示させる画像が表示させることができないのです。

条件設定

トップページ用に設定した id="news_top" では、カテゴリーID の参照から「お知らせ」を指定 しました。しかし、一覧ページでは URLコンテキスト を利用する方法をとります。

ID 参照ボタンの前にある チェックボックスにチェック を入れると、/news/ の URL 情報をモジュール ID が取得し、自動的に「お知らせ」カテゴリーを条件として利用できます。

さらに重要なのがページ番号のチェックです。 2ページ目以降の URL は /news/page/2/ のようになりますが、この情報もモジュール ID に渡す必要があるため、「ページ」にも必ずチェック を入れてください。

表示設定

今回、元々のページ構成に合わせるために、表示件数を 3件 に設定し、3 件ごとに改ページされるようにします。また、常に新しいお知らせが上に表示されるよう、ソート順は「日付（降順）」 を選択します。

さらに、今回のバージョンからは カスタムフィールドの画像をメインイメージとして簡単に表示できる機能 が追加されました。メインイメージ対象の項目にチェックを入れ entry_main_image を指定します。

これで http://localhost/ にアクセスすると、トップには最新の 3 件のお知らせが表示され、「もっと見る」ボタンをクリックすると 2 ページ目以降も正しく表示されるようになります。

7-3. 繰り返し表示される記事表示を実装する

7-1 で途中になっていたテンプレートの設定に戻ります。

変換前の静的 HTML

<li>
    <a href="20250807.html" class="group block p-6 sm:p-8 rounded-lg hover:bg-gray-50 transition-colors duration-300">
        <article class="grid md:grid-cols-3 gap-8 items-start">
            <div class="md:col-span-1 overflow-hidden rounded-lg">
                <img src="/images/news_tomato_pasta.jpg" alt="季節のサラダ" class="w-full h-56 object-cover shadow-md transition-transform duration-300 group-hover:scale-110">
            </div>
            <div class="md:col-span-2">
                <p class="text-sm text-gray-500"><time datetime="2025-08-07">2025年8月7日</time></p>
                <h2 class="mt-2 text-xl font-bold text-gray-900 transition-colors group-hover:text-sky-600">
                    新しい季節限定メニューが登場しました
                </h2>
                <p class="mt-3 text-gray-600 leading-relaxed">
                    太陽の恵みをたっぷりと受けた新鮮な夏野菜と、厳選されたシーフードをふんだんに使用した、シェフ渾身のラインナップです。
                </p>
                <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2">
                    <span class="bg-sky-100 text-sky-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">新商品</span>
                    <span class="text-sm text-gray-500">#季節限定</span>
                    <span class="text-sm text-gray-500">#夏メニュー</span>
                </div>
                <p class="mt-4 inline-block font-semibold text-sky-600 transition-transform duration-300 group-hover:translate-x-1">
                    続きを読む &rarr;
                </p>
            </div>
        </article>
    </a>
</li>

置き換え内容

リンク先 : /news/20250807.html → {url}
タイトル : 新しい季節限定メニューが登場しました → {title}
日付 : 2025年08月07日 → {date#Y}年{date#m}月{date#d}日
サマリー : 太陽の恵みをたっぷりと… → {summary}[trim(200,'...')]
画像パス : /images/news_tomato_pasta.jpg → %{ROOT_DIR}{path}[resizeImg(600)]
カテゴリー名 : 新商品 → {fieldCategoryName}
タグ : #季節限定 #夏メニュー →  〜  （以下のコードを参照）

<li>
    <a href="{url}" class="group block p-6 sm:p-8 rounded-lg hover:bg-gray-50 transition-colors duration-300">
        <article class="grid md:grid-cols-3 gap-8 items-start">
            <div class="md:col-span-1 overflow-hidden rounded-lg">
                <!-- BEGIN_IF [{path}/nem] -->
                <img src="%{ROOT_DIR}{path}[resizeImg(600)]" alt="{title}" class="w-full h-56 object-cover shadow-md transition-transform duration-300 group-hover:scale-110">
                <!-- END_IF -->
            </div>
            <div class="md:col-span-2">
                <p class="text-sm text-gray-500"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日</time></p>
                <h2 class="mt-2 text-xl font-bold text-gray-900 transition-colors group-hover:text-sky-600">{title}</h2>
                <p class="mt-3 text-gray-600 leading-relaxed">{summary}[trim(200,'...')]</p>
                <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2">
                    <span class="bg-sky-100 text-sky-800 text-xs font-semibold px-2.5 py-0.5 rounded-full"><!-- BEGIN categoryField -->{fieldCategoryName}<!-- END categoryField --></span>
                    <!-- BEGIN tag:loop --><span class="text-sm text-gray-500">#{name}</span><!-- END tag:loop -->
                </div>
                <p class="mt-4 inline-block font-semibold text-sky-600 transition-transform duration-300 group-hover:translate-x-1">
                    続きを読む &rarr;
                </p>
            </div>
        </article>
    </a>
</li>

補足 : 校正オプション

a-blog cms では、変数の後ろに角括弧 [ ] を付けることで出力内容を加工でき「校正オプション」と呼びます。

{summary}[trim(200,'...')] → サマリーを 200文字で切り取り、末尾に「…」を付与
%{ROOT_DIR}{path}[resizeImg(600)] → 画像を幅600px にリサイズして出力

このように、角括弧 [ ] 内に関数を記述することで出力を調整できる のがポイントです。

他にも多くのオプションがありますので、詳しくは公式ドキュメントの「校正オプション」をご覧ください。

補足 : IFブロック

a-blog cms のテンプレート内での条件分岐は IFブロックを利用します。 ...  のように [ ] に条件を指定することで、その中の情報を表示させたり消したりすることが可能になります。

7-4. ページャー部分を実装する

変換前の静的 HTML

<div class="mt-16 text-center">
    <a href="page2.html" class="inline-flex items-center rounded-md border border-transparent bg-sky-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">
        もっと見る
    </a>
</div>

置き換え内容

リンク : page2.html → {url}（以下のコードを参照）

<!-- BEGIN pager:veil -->
<!-- BEGIN forwardLink -->
<div class="mt-16 text-center">
    <a href="{url}" class="inline-flex items-center rounded-md border border-transparent bg-sky-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">
        もっと見る
    </a>
</div>
<!-- END forwardLink -->
<!-- END pager:veil -->

補足 : veilブロック

 〜  のように囲むことで、ブロック内の変数（ここでは {url} ）に値が 生成されなかった場合、囲まれている部分を まとめて非表示 にできます。

この実装により、以下のように動作します。

1ページ目 → 「もっと見る」リンクが表示され、2ページ目へ遷移可能
最終ページ → 記事が残っていないため {url} が生成されず、:veil によりブロックごと非表示

7-5. エントリーカスタムフィールドの設定を追加する

a-blog cms のカスタムフィールドは、他の CMS などのように管理画面から直接項目を追加する仕組みではなく、テンプレート（field.html）に HTML を定義することで入力欄を作っていく 方式です。このファイルを作成することで、記事投稿画面に独自の入力欄が表示される ようになります。

今回は、一覧ページで表示するための画像 をカスタムフィールドとして定義します。

/themes/sample/
  ├── _top.html 
  ├── news/
  │   ├── _entry.html 
  │   └── index.html 
  ├── service/
  ├── contact/
  ├── css/
  ├── images/
  └── admin/
      └── entry/
          ├── field.html （追加）
          └── field-seo.html （beginner テーマからコピー）

まず、beginner テーマに含まれている field-seo.html をコピーして、同じ階層になるように sample/admin/entry/ 配下に配置してください。次に、同じディレクトリに新しく field.html を作成し、以下を記述します。

@include("/admin/entry/field-seo.html")

これにより、beginner テーマで用意されていた SEO 用フィールドを流用しつつ、独自のカスタムフィールドを追加 できるようになります。

追加するカスタムフィールドの HTML は「カスタムフィールドメーカー」で生成し、field.html に追記していきます。

8. エントリー（記事）のインポートを体験する

a-blog cms では、エントリー単位でのエクスポート & インポートが可能です。ここでは一度既存のお知らせを削除し、サンプルデータをインポートしてみましょう。

8-1. エントリーを削除する

a-blog cms は、エントリー単位でのエクスポート＆インポートが可能です。

管理画面の「エントリー管理」から、カテゴリー「お知らせ」を選択して検索します。
表示されたエントリーをすべてチェックします。
一括操作の SELECT メニューから「ゴミ箱」を選択し、実行で削除します。

8-2. インポートする

インポートデータ : news_improt_data.zip をダウンロードします。
（エントリー作成）ボタンの右横にある 「その他」メニュー → 「インポート」 を選択します。
エントリーインポート画面 が表示されます。
ステータスを設定し、ファイルを選択してインポートを実行します。

これで、サンプルデータのインポートが完了しました。一覧ページには新しい「お知らせ」が反映され、ページャーの動作や詳細ページへの遷移 も確認できるはずです。

今回の手順を通して、静的 HTML の一部を CMS 化する流れを実際に体験できました。

トップページの「お知らせ一覧」から始まり、詳細ページ、一覧ページ、さらにインポートまで一通りの操作を試すことで、a-blog cms がどのように運用を支えるかを理解いただけたと思います。

1. サンプルのウェブサイトを確認します

相対パスとルート相対パスについて

相対パス (sample-relative-path)

ルート相対パス (sample-root-relative-path)

2. 動作環境を用意します

2-1. ローカル環境に新規にインストールする

2-2. 無料のお試しサーバー ablogcms.io を利用する

2-3. レンタルサーバーにインストールする

動作環境

3. テーマとして設定します

3-1. テーマ(themes)ディレクトリに全てのファイルをコピーする

3-2. テーマの設定を変更します

補足

3-3. 表示を確認しましょう

4. 管理用ボックスの設置を最初にする

設置場所の目安

5. トップページの「お知らせ一覧」を CMS 化する

5-1. 前提を確認する

5-2. Entry_Summary モジュールのスニペットを貼ってみよう

5-3. 変数に置き換えてみよう

置き換え内容

5-4. テンプレートに モジュールID を設定しよう

5-5. 管理画面に モジュールID を作成する

条件設定

5-6. モジュールID の表示設定を確認する

表示設定

5-7. セクション全体を CMS 管理の対象にする

6. 詳細ページを表示できるようにする

6-1. テンプレートを準備する

6-2. Entry_Body モジュールのスニペットを貼ってみよう

6-3. Entry_Body にも モジュールID を設定する

6-4. Entry_Body モジュールで「記事ヘッダー情報」を整える

変換前の静的 HTML

置き換え内容

6-5. Entry_Body モジュールで「本文(ユニット)」を整える

6-6. 詳細ページでも「管理ボタン」を整える

設置場所の目安

6-7. パンくずリスト を調整する

7. 一覧ページも用意してみよう

7-1. 対象のファイルを確認します

7-2. モジュールID を設定する

条件設定

表示設定

7-3. 繰り返し表示される記事表示を実装する

変換前の静的 HTML

置き換え内容

補足 : 校正オプション

補足 : IFブロック

7-4. ページャー部分を実装する

変換前の静的 HTML

置き換え内容

補足 : veilブロック

7-5. エントリー カスタムフィールドの設定を追加する

8. エントリー（記事）のインポートを体験する

8-1. エントリーを削除する

8-2. インポートする

イントロダクション

はじめてみよう

アップデート

リファレンス

ツール

コア機能

機能別

開発

5-4. テンプレートにモジュールID を設定しよう

5-5. 管理画面にモジュールID を作成する

6-3. Entry_Body にもモジュールID を設定する

6-7. パンくずリストを調整する

7-5. エントリーカスタムフィールドの設定を追加する