ホーム > サポート・マニュアル > 基本からしっかり学ぶ a-blog cms > 基礎編 > テーマ

基本からしっかり学ぶ a-blog cms

テンプレートファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsのカスタマイズをする際に作るものがテーマであり、そのテーマを利用した設定(コンフィグ)をする事でサイトが出来上がります。

テーマの設定

オリジナルのテーマを作る際に、一番最初に設定を変更する部分になります。カスタマイズ管理 > コンフィグ > ブログ > テーマ設定 にアクセスして下さい。

上記のような画面が表示されます。

テーマ ディレクトリ名

themes ディレクトリ内にあるテーマディレクトリを指定します。

テンプレートファイル

テンプレートのコントロールについては、テンプレートの章で紹介します。トップページ・一覧ページ・詳細ページ・エラーページ・管理ページ・エントリー編集ページ・ユニット追加ページ・ログインページの8種類のテンプレートを指定します。

一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。

テーマとテンプレート

このテーマを複数用意する事によってコンテンツのデザインを切り換えて表示させる事は可能です。しかし、テーマではブログ単位に設定するか、この後に紹介するルールの機能を利用して設定する事になります。

a-blog cms では、もっと簡単にカテゴリー毎にテンプレートを設定する事が可能です。テーマディレクトリ内にカテゴリーコードのフォルダと、その中に必要なテンプレートファイルを用意します。 また、エントリーコードのファイル名を用意する事で特定のエントリー専用のテンプレートも設定できます。

news カテゴリーの時

news というカテゴリーには、site/news/index.html(一覧)と site/news/entry.html(詳細)のテンプレートが用意されています。この場合であれば、news のカテゴリーの際には、これらのテンプレートファイルを利用する事になります。

もし、詳細ページのテンプレートが他のページと共用の設定にするのであれば、site/news/entry.html(詳細)のファイルを削除します。すると、テーマディレクトリの直下にあるファイルを参照するようになり site/entry.html(詳細)を利用するようになります。

products カテゴリーを作った時

注意する点としては、以下のように site/products/index.html(一覧)と site/products/entry.html(詳細)のテンプレートがあり、さらにサブカテゴリーでいくつかのディレクトリが用意されています。

この場合に、クライアント側でサブカテゴリーを追加した際には、テーマ内にそのカテゴリーコードのディレクトリが存在しない事になる事から site/entry.html(詳細)を利用してしまう事になり、希望するテンプレートでなくなる可能性があります。ご注意下さい。

表示テンプレートの確認

デバッグモード(config.server.php の DEBUG_MODE)が 1 の時のみ上記のように、現在表示しているテンプレートがどのファイルなのかを表示させています。この部分で表示させるファイルの確認を行って下さい。

テーマの構成

テーマディレクトリ(themes)には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここに全ての管理ページのテンプレートファイルが格納されています。ですから a-blog cms の管理ページをカスタマイズする際には、admin の中のファイルを修正すればいい事になります。

テーマ設定で設定されているテーマ(site)と、system のテーマは継承関係にあり、テーマ設定で設定されているテーマに呼び出すファイルが存在しない時には、system のファイルをチェックし、存在していればそのファイルを表示させる事になります。例えば、login.html や 404.html は site のテーマの中には存在していませんが、表示される様になっています。

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定されているテーマにコピーして修正するようにして下さい。システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう事になります。

テーマの継承

site テーマに無いファイルは、system のファイルを利用するようになっていますが、同様に子ブログ用のテーマを作る際に以下のようなテーマディレクトリを作成する事で、system との関係のようにテーマを継承する事が可能です。

blog@site

例えば、blog@site/include に header.html が無い場合には、site/include/header.html を利用する事になります。また president@blog@site のように複数の @ を使ったテーマも作る事ができます。

すぐには利用する事は無いかもしれませんが、複数のブログを1つのシステム内に設定してカスタマイズするようなサイトになった時には利用する事でメンテナンス性の高いテーマを作る事ができます。


関連エントリー

このエントリーについているタグから関連するエントリーを表示しています。


携帯アクセス解析