a-blog cms は、CMS を利用していないHTMLファイルで作られたサイト(静的HTMLサイト)を簡単に CMS ののテーマする事が可能です。ここでは、CSS フレームワーク Bootstrap3 で作られた簡単なサイトを更新可能なテーマにしていく方法をご紹介します。



  1. テーマフォルダを準備する
  2. テーマを指定する
  3. テーマを作る際に最低限必要なタグを追記する
  4. 記事を登録・表示できるようにする
  5. 一覧ページに登録した記事を表示する

1. テーマフォルダを準備する

まず、以下の zip ファイルをダウンロードしてください。 そこに今回のファイルが用意されています。ファイルとしては、a-blog cms の開発元が運営しているコワーキングスペース「ベースキャンプ名古屋」のサンプルサイトが、トップページ・一覧ページ・詳細ページ を bootstrap3 ベースで作られています。

サンプルファイル ダウンロード

ダウンロードしたファイルを解凍すると、basecamp というフォルダとその中にファイルが入っています。 a-blog cms でテーマを作る際には、これら全てのファイルをフォルダに入れ themes ディレクトリにアップロードする事でテーマ化できます。

/themes/basecamp になるようにthemesフォルダ内へアップロードをしてください。 この段階ではブラウザでアクセスしても basecamp の内容は見ることができません。

2. テーマを指定する

ログイン後、管理ページ > コンフィグ > テーマ設定に移動してください。


アップロードした sample のフォルダ名がテーマとして選択できるようになっています。テーマディレクトリ名を sample に設定し、下にあるテンプレートファイルの「トップページ」の項目設定を top.html から index.html に変更してください。




この段階では CMS を利用してコンテンツの更新はできませんが、Webサイトのトップにアクセスしますとアップロードした basecamp テーマ内のページが表示されているのを確認できます。


3. テーマを作る際に最低限必要なタグを追記する

/themes/basecamp/index.html に以下の3つを追加します。

  • 管理系パーツのための CSS ファイルのリンク
  • システムの動作に必要な Javascript のリンク
  • ログイン後に表示される管理系ボタンのHTMLをインクルード

表示用テンプレートファイルに読み込みが必要なCSSファイル

テンプレートファイルの作成時に、読み込みが必要なCSSファイル「acms-admin.css」をリンクするように設定してください。

<link href="/css/acms-admin.min.css" rel="stylesheet">

読み込みが必要なJavascriptファイル

a-blog cmsでは、ページの表示に関する様々な機能を記述したJavascriptファイル「acms.js」があります。a-blog cms のテンプレートファイルでは、この acms.js を読みこむ必要があります。<head>内に次の記述を追加してください。

<!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

外部のjQueryのプラグインを使用する場合や、独自のJavaScriptファイルを読み込む場合は、以下のようにacms.jsの前にjQuery本体を読み込む必要があります。acms.jsの後でjQueryを読み込むと、jQueryがバッティングし正常に動作しないことがありますのでご注意ください。

<script src="js/jquery-2.1.0.min.js"></script>

今回は jquery が既に読み込まれる設定が書かれていますので、この jquery の下に追加してください。

ログイン後に表示される管理系ボタン

BODY要素の開始タグ直後あたりに追加します。BODY要素内に書かれていれば、表示上はどこでも構いません。

<!--#include file="/admin/action.html" -->

これで(エントリー追加)や(管理ページ)のボタンが追加されるようになりました。



4. トップページに記事を表示できるようにする

イベント情報のコンテンツを更新できるようにしてみます。ファイルとしては /themes/basecamp/index.html を修正します。以下のコードを探してみてください。

<div class="col-sm-3">
  <a href="list.html" data-caption="Image description"><img src="img/929d70313776cea56396d96e22df6771.png" class="img-responsive animated fadeIn center-block" /></a>
  <h3 class="mg-md text-center">
    a-blog cms DAY in NAGOYA
  </h3>
  <p class="text-center">
    2016/03/18
  </p>
</div>

このような HTML が4回繰り返し表示されています。a-blog cms ではテンプレートのHTMLファイルに、モジュールの記述を書くことでプログラムが動作するようになります。

今回は、画像とタイトル等の情報を表示できるようにしたいので、Entry_Summary モジュールを使用します。リファレンスの ビルトインモジュールにアクセスして頂き、Entry_Summary の行にある スニペットの内容を上記のコードの下にコピペします。


何か追加で表示されるようになったかと思います。あとは、先ほど貼り付けたスニペットの中身を目的のカタチに近づけていきます。以下の完成形をコピペせずに自力で近づけていってください。

<!-- BEGIN_MODULE Entry_Summary -->
  <!-- BEGIN unit:loop -->
  <!-- BEGIN entry:loop -->
      <div class="col-sm-3">
        <a href="{url}" data-caption="Image description"><!-- BEGIN image:veil --><img src="%{ROOT_DIR}{path}" class="img-responsive animated fadeIn center-block" /><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}"><!-- END noimage --></a>
        <h3 class="mg-md text-center">
          {title}
        </h3>
        <p class="text-center">
          {date#Y}/{date#m}/{date#d}
        </p>
      </div>
  <!-- END entry:loop -->
  <!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

あとは、画像のサイズが小さいのではないかと思います。

管理ページのコンフィグのモジュールのサマリーの設定に画像サイズを指定できるところがありますので、200ピクセルに変更し、表示件数を4件に設定して保存します。


なんとなく、それらしいカタチになったかと思います。これで初期からあったHTMLに直接書かれていた4件のイベントのHTMLを削除します。


この段階でトップページのカスタマイズは、一旦終了とします。

5. 記事を登録・表示できるようにする

次は、記事ページ(エントリー)の作成ができるようにします。

リファレンスのページにアクセスして頂き、ビルトインモジュールへ移動します。a-blog cms ではテンプレートのHTMLファイルに、モジュールの記述を書くことでプログラムが動作するようになります。

今回は、エントリー本文を投稿・表示できるようにしたいので、Entry_Body モジュールを使用します。Entry_Bodyの行にあるスニペットよりEntry_Body のスニペットコードへアクセスします。
スニペットコードの内容をそのまま、/themes/basecamp/entry.html の <h3> 〜 <p> 部分にコピーしてください。

※スニペットページへは、管理ページ > コンフィグ > モジュール: エントリー本文( Entry_Body ):スニペットからでもアクセスできます。

<!-- bloc-6 -->
<div class="bloc l-bloc bgc-white" id="bloc-6">
  <div class="container bloc-lg">
    <div class="row">
      <div class="col-sm-12">
        <h3 class="mg-md">
          『日本語Webフォントを学ぼう』のイベントが開催されました!
        </h3>
        <p class="mg-md ">
          2/18(木)の「Movable .... (省略)... 11名の方が参加されました。
        </p><img src="img/8bb7a14ce14a12d46f2f622cc2d83619x.jpg" class="img-responsive mg-md" />
        <p class="mg-md ">
          前半の講師は、.... (省略)...  お話いただきました。
        </p>
      </div>
    </div>
  </div>
</div>
<!-- bloc-6 END -->

これで記事本文が表示できるようになりました。

ここで、トップページのカスタマイズをしていた時にお願いしたいくつかの追記分が同様に作業されていないと、JavaScript が動作しなかったり、CSS が無いために崩れているレイアウトも出てくることかと思います。

6. 同じ HTML はファイルをまとめてインクルードしよう

「ログイン後に表示される管理系ボタン」をインクルードする作業を最初にお願いしていましたが、同じような作業を head部分やフッター部分をファイルにまとめ、index.html と entry.html で共用できるようにします。

他にも hero.html や nav.html のようにパーツで分けて管理するようにするとテンプレートファイルが見やすくなりおすすめです。

entry.html

<!doctype html>
<html>
<head>
    <!--#include file="/include/head.html" -->
    
    <title>Entry - </title>
</head>
<body>
<!-- Main container -->
<div class="page-container">
    
<!--#include file="/include/nav.html" -->

<!-- bloc-6 -->
<div class="bloc l-bloc bgc-white" id="bloc-6">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-12">
<!-- BEGIN_MODULE Entry_Body -->

(省略)

<!-- END_MODULE Entry_Body -->

			</div>
		</div>
	</div>
</div>
<!-- bloc-6 END -->

<!--#include file="/include/footer.html" -->

</div>
<!-- Main container END -->

</body>
    
<!-- Google Analytics -->

<!-- Google Analytics END -->

</html>

a-blog cms は、テーマディレクトリと実際の表示される URL でのパスのズレを修正する機能が用意されています。そのため画像のパスをあまり気にせずに運用できるのですが、今回のように元のディレクトリと違う場所にHTMLを移動してしまっている関係でインクルードするファイルのパスが違ってきてしまいフッター部分の画像が正しく表示されていない状況になります。


<img class="img-responsive " src="img/5310096224a5a.jpg" />

インクルードを利用しなければ、相対パスのままでも問題はありませんが、運用しやすいテンプレートを作成する際には、画像やリンクを相対パスで記述するのではなく、絶対パスで記述するようにしてください。

<img class="img-responsive " src="/img/5310096224a5a.jpg" />

head.html についても、 全て絶対パスに変更し、正常に動作するようにしてください。 これで、最低限の一覧ページに記事を表示させ、詳細ページを増やす事ができるようなカスタマイズができた事になります。

ここまでの内容を反映したファイルが、以下のものになります。 反映後のサンプルファイル ダウンロード


カスタマイズができたらシェアしましょう!

CMSを活用して パーソナライズされた Web サイトを作る

多言語対応サイトを作ってみよう

カスタムフィールドを活用して物件情報をカスタマイズしてみよう

静的HTMLサイトからCMSのテーマを作ってみよう

レイアウト機能を使ってみよう

モジュールIDのカスタムフィールドを使ってみよう

グローバル変数、校正オプション、バリデータを作ってみよう

関連エントリーを表示してみよう

setTemplate setRenderedを使いこなそう

CSVファイルをインポートしてエントリを一括登録しよう

Google、Facebook、TwitterのAPIキーを取得してSNSログインを設定してみよう

Google Analyticsランキングモジュールを表示してみよう

CSVファイルをインポートしてエントリを一括更新しよう

静的HTMLサイトからCMSのテーマを作ってみよう 201612

インストールとサーバへの接続について