初めてのa-blogCMS：テンプレートの基礎と作り方

a-blogCMSは、柔軟なコンテンツ管理機能と、開発者が扱いやすい設計で人気の高い国産CMSです。特に、テンプレートのカスタマイズ性が非常に高く、初学者でも簡単に自由なデザインのウェブサイトを効率的に制作できるのが大きな強みです。
今回は、初めてa-blogCMSを使う方へ向けて、a-blogCMSのテンプレートの基本構造と、オリジナルのテンプレートを制作するためのポイントを解説します。

目次

a-blogCMSテンプレートの基本構造

a-blogCMSのテンプレートは、HTML、CSS、JavaScriptといった一般的なウェブ技術で構成されており、独自のタグやモジュール、ユニットを組み合わせて動的なコンテンツを表示します。
基本的なファイルの構成は以下の通りです。

  • _layouts: テンプレートのベースとなるレイアウトファイル（ヘッダーやフッターなど）を配置します。
  • _includes: 複数のテンプレートで使い回すパーツ（ナビゲーション、サイドバーなど）を配置します。
  • _modules: 記事一覧やパンくずリストなど、特定の機能を持つパーツを配置します。

これらのファイルに、a-blogCMS独自の@で始まるタグを記述することで、コンテンツを動的に呼び出すことができます。

<!doctype html>
<html lang="ja-JP">
<head>
@include("/modules/meta.html")
</head>
<body>
@include("/layouts/header.html")
<main>
	<section id="main-content">
		@include("/modules/breadcrumbs.html")
		<div class="module">
			@include("/modules/list.html")
		</div>
	</section>
</main>
@include("/layouts/footer.html")
</body>
</html>

テンプレート制作の流れ

a-blogCMSでテンプレートを制作する基本的な流れは、以下の通りです。

1. HTML/CSSで静的なデザインを組む

まず、完成形をイメージし、HTMLとCSSを使って静的なデザインを制作します。この段階では、a-blogCMS独自のタグは使わず、一般的なウェブサイトとしてレイアウトを完成させます。

2. 静的ファイルをa-blogCMSのテンプレートに変換

静的なHTMLファイルを、a-blogCMSのテンプレート構成に合わせて分割していきます。
共通部分（ヘッダー、フッター）を_layoutsフォルダに、_layouts/header.htmlなどのファイルとして保存します。
使い回すパーツ（ナビゲーション、サイドバー）を_includesフォルダに保存します。
残ったコンテンツ部分を、ページごとのテンプレートファイル（例：index.html）として保存します。

3. a-blogCMS独自のタグを埋め込む

分割したテンプレートファイルに、コンテンツを動的に呼び出すためのa-blogCMS独自のタグを埋め込んでいきます。
@includeタグで、共通パーツやモジュールを呼び出す。
表示中のページが持つ情報を出力するグローバル変数（%{HOME_URL}など）や、記事一覧を表示するモジュールタグを記述する。

<header id="main_head">
	<!-- BEGIN_MODULE Touch_NotEntry -->
		<h1 class="siteTitle"><a href="%{HOME_URL}">%{BLOG_NAME}</a></h1>
	<!-- END_MODULE Touch_NotEntry -->
	<nav>
		<!-- BEGIN_MODULE Category_List id="cateList" --><ul class="categoryList %{CCD}">
			@include("/admin/module/setting.html")
			<li><a href="/"><span>全て</span></a></li>
			<!-- BEGIN category:loop -->
				<!-- BEGIN ul#front --><!-- END ul#front -->
				<!-- BEGIN li#front --><li class="{ccd}"><!-- END li#front -->
				<!-- BEGIN category:veil --><a href="{url}"><span>{name}</span></a><!-- END category:veil -->
				<!-- BEGIN li#rear --></li><!-- END li#rear -->
				<!-- BEGIN ul#rear --><!-- END ul#rear -->
			<!-- END category:loop -->
		</ul><!-- END_MODULE Category_List -->
	</nav>
</header>

テンプレート制作のメリットとポイント

a-blogCMSでテンプレートを制作する主なメリットは、「コンテンツとデザインの分離」です。これにより、デザインの変更が容易になり、サイト全体の管理が効率化されます。
制作のポイントは、モジュールを意識したコンポーネント設計です。ナビゲーション、記事一覧、問い合わせフォームなど、共通のパーツをあらかじめモジュールとして設計しておくことで、開発効率が大幅に向上します。

まとめ

a-blogCMSのテンプレート制作は、HTML/CSSの知識があれば比較的スムーズに進められます。独自のタグやモジュールを使いこなすことで、お客様の要望に合わせた柔軟なウェブサイトを効率的に構築できます。
もしa-blogCMSのテンプレート制作についてお困りのことがあれば、ぜひお気軽にご相談ください。

関連記事