エントリーのデータを表示する元となるテンプレートのHTMLファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。
a-blog cmsのデータは、設定（コンフィグ＞テーマ設定）で指定されたテーマファイルを通して表示されます。
a-blog cmsには標準のテーマとしてsite, blog など複数のテーマを同梱しています。これら同梱のテーマを使用してもよいですし、同梱のテーマを元にカスタマイズしたり、独自に制作することもできます。
カスタムユニットとは、ユニットをカスタマイズし独自のユニットを作成できるユニットのことです。
同じような機能として独自の入力欄を作れるカスタムフィールドが挙げられます。あえてカスタムユニットを使うメリットとしては、従来のカスタムフィールドとは違い、ユニットの間に任意の要素を挿入できることが特徴の1つです。
詳しいカスタムユニットの機能については、以下の記事をご覧ください。
今回のハンズオンでは、上記で説明した「カスタムユニット」に加え、カスタムユニットの機能を拡張する「ユニットの拡張機能」の使い方をご紹介します。
管理画面 > コンフィグ > 編集設定からカスタムユニット用のボタンを追加します。 モードは「カスタム」、ラベルは任意の名前をつけてください。
これだけでは、記事登録ページでユニットボタンを押しても空のユニットが表示されるだけですので、別途入力フォームと出力内容のテンプレートの計2つのテンプレートを作成する必要があります。
使用テーマ/admin/entry/unit/custom.html
上記の場所にファイルを新規作成してください。
管理画面 > コンフィグ > カスタムフィールドメーカーまたは、デベロッパーサイトにあるカスタムフィールドメーカーの「カスタムユニット」からHTMLを生成できます。
使用テーマ/include/unit/custom.html
上記の場所にテンプレートを作成してください。
先ほど作成した入力フォームのテンプレートと同じように、管理画面 > コンフィグ > カスタムフィールドメーカーまたは、デベロッパーサイトにあるカスタムフィールドメーカーの「カスタムユニット」からHTMLを生成できます。
カスタムユニットを複数作る場合にはユニットの拡張機能を使用します。
ユニットの拡張機能はカスタムユニット以外のユニット（テキストユニット、画像ユニット、ビデオユニット...etc）も拡張できます。例えば、テキストユニットにCSSを適用し装飾したユニットを作ることができます。
そのほかの詳しいユニットの拡張機能については、以下の記事をご覧ください。
管理画面 > コンフィグ > 編集設定 の順にページを移動し、以下の画像のようにカスタムユニット用のボタンを追加します。 モードは「拡張」+「custom_任意の文字列」、ラベルは任意の名前をつけてください。
次にコンフィグ > ユニット設定 の順にページを移動し、ページの一番下部までスクロールすると先ほど作成したラベルの項目があるので、そのボタンを押してください。 （※この作業をしないと、テンプレートを作成してもエントリー編集ページからユニットを追加した際に空のユニットが挿入されてしまうので注意してください。）
同じようにカスタムフィールドメーカーを使用するなどしてカスタムユニットを作成します。（※ ユニットの拡張機能を作る際には、カスタムフィールドメーカーで出力されたデフォルトのソースコードのままではなく、一部異なる点があります。詳しい方法については、順次ご紹介していきます）
作成したカスタムユニットは下記の画像のファイルの場所に設置します。
使用テーマ/admin/entry/unit/extend.html
下記の様にカスタムフィールドメーカーなどで生成したソースコードををBEGIN ~ ENDのブロック内に記述します。
<!-- BEGIN custom_test --> ここの中にソースコードを記述 <!-- END custom_test -->
使用テーマ/include/unit/extend.html
「unit#」を付けたBEGIN ~ ENDのブロック内に記述します。
<!-- BEGIN unit#custom_test --> ここに表示内容のソースコードを記述 <!-- END unit#custom_test -->
カスタムユニットと拡張ユニットを使用してインタビューコンテンツを作成してみましょう。
会話型コンテンツの表示例
吹き出し横の画像と名前を登録するカスタムフィールドを用意してあります。 admin/entry/field.htmlに下記ファイルのソースを追加してください。出力は以下のソースで出力できます。
field.html
<!-- BEGIN_MODULE Entry_Field -->
画像
<img src="%{ARCHIVES_DIR}{conversation1_img@path}[resizeImg(80,80)]">
<img src="%{ARCHIVES_DIR}{conversation2_img@path}[resizeImg(80,80)]">
名前
<p class="name">{conversation1_name}</p>
<p class="name">{conversation2_name}</p>
<!-- END_MODULE Entry_Field -->吹き出し用のCSSも用意しています。使用しても使用しなくてもどちらでも構いません。 使用する方は下記の画像を参考にしてください。
css
上記のCSSを使用する方は下記のHTMLを参考にしてください。
<!-- 右向きの吹き出し(ピンク) --> <div class="conversation1_photo"> <img src=""> <p class="name"></p> </div> <div class="conversation1"></div> ----------------------------------- <!-- 右向きの吹き出し(ブルー) --> <div class="conversation2_photo"> <img src=""> <p class="name"></p> </div> <div class="conversation2"></div>
バージョン2.0.0、2.0.0.1, 2.0.0.2のRSSで本文が表示されない不具合が 発見されました。2.0.0.3にアップデート、または2.0.0.3の特定のファイルを差し替えて 対応をお願いいたします。
以下のダウンロードページよりv2.0.0.3をダウンロード。
http://www.a-blogcms.jp/download/
v2.0.0.3にアップデート。または、/themes/system/rss2.xml をv2.0.0.3のものに置き換える。
この度は大変ご迷惑をお掛けしてしまい申し訳ございません。
今後ともa-blog cmsをよろしくお願い致します。
a-blog cms のデータを表示するテーマファイルは、管理ページから設定します。 管理ページ > テーマ > テーマ設定 にアクセスしてください。 この画面は、siteテーマを使用しているブログのテーマ設定になります。
テーマセット機能は Ver. 3.1 から導入された機能のため、Ver. 3.0 以前のバージョンを利用の方は 管理ページ > コンフィグ > テーマ設定からテーマの変更ができます。
テーマ設定画面
テーマディレクトリ名には現在使用しているテーマ名が表示されており、a-blog cms 設置ディレクトリ/themes/ 以下にあるテーマディレクトリがプルダウンメニューで選択できます。 テーマディレクトリ内にtemplate.yaml がある場合、テンプレート設定のチェックをすることで、設定されたテンプレートを優先して読み込みます。
template.yaml ファイルは、テーマを使いまわす場合に毎回テンプレートファイルの設定をしなくて済むように、あらかじめテンプレートファイルの設定内容を記述しておくために設置します。 /themes/テーマディレクトリ/template.yaml にファイルを置くことで有効になります。
テンプレートファイルでは以下の8種類のテンプレートを指定できます。
一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。
テンプレートファイルについてより詳しく知りたい方は以下のドキュメントをご覧ください。
テンプレートの種類
Ver. 2.0 ならびにブランドサイトの公開から遅れてしまいましたが、制作者向け情報となるデベロッパーサイトを公開いたしました。
モジュールや変数など制作時に必要な情報としてのリファレンス、a-blog cms がどのような構成・仕組みで動作しているのかについてを章立てて解説したドキュメント、各バージョンのパッケージや付随するテーマ、ライセンスなどのダウンロードという大きく3つのコンテンツで構成されています。
実際にサイトをお使いになる方に対しての便利な情報はブランドサイトに、その機能がどう動いているのか、どう使ったらよいのかという情報についてはデベロッパーサイトにというように情報を切り分けることで、よりわかりやすく使いやすい情報をご提供していきたいと考えております。
本サイトは現在のところ Ver. 2.0.x に関する情報を主に掲載していますが、リファレンス、ダウンロードコンテンツでのVer. 1.x のフォロー、Ver. 1.x サイトにありましたカスタマイズ情報の最新版など、これからも定期的に情報の追加、見直しを行ってまいります。
今後ともa-blog cms デベロッパーサイトをよろしくお願いいたします。