a-blog cmsはhtmlのテンプレートファイルを記述する事で、サイトの表示を自由に設定する事ができます。
テンプレートファイルは/themes/ディレクトリの中にあり、その中の/site/ディレクトリが、今使っているテンプレートファイルのディレクトリです。
これから/themes/site/の中のテンプレートファイルをカスタマイズしていきます。
テーマのバリエーション選択
siteテーマにはあらかじめ、業種や内容にあわせて選べる6種類のバリエーションが用意されています。
それらのバリエーションの中から、作りたいサイトの雰囲気やレイアウトの一番近いものを選んで、そこからカスタマイズしていくと便利です。
バリエーションの変更は/themes/site/include/head/link.htmlを修正します。
<!-- ■ テーマバリエーション ■ 下記のどれかひとつのcssファイルを使用してください --> <link rel="stylesheet" href="/css/site.css" type="text/css" media="all" /> <!--<link rel="stylesheet" href="/css/simple.css" type="text/css" media="all" />--> <!--<link rel="stylesheet" href="/css/natural.css" type="text/css" media="all" />--> <!--<link rel="stylesheet" href="/css/cool.css" type="text/css" media="all" />--> <!--<link rel="stylesheet" href="/css/food.css" type="text/css" media="all" />-->
site
simple
natural
cool
food
初期の状態ではsite.cssが読み込まれています。site.css部分をコメントアウトし、使いたいバリエーションのimport部分のコメントアウトを外してください。cssが切り替わり、選んだデザインのテーマになります。
htmlファイルの編集
/themes/site/の中に、top.html（トップページ用）、index.html（一覧ページ用）、entry.html（詳細ページ用）、base.html（パーツがすべて載っているもの）の4ファイルあります。
基本的にはtop.html、index.html、entry.htmlの3ファイルでサイトのテンプレートが出来上がりますので、この3ファイルをベースにテンプレートをカスタマイズしていきます。
base.htmlというファイルは、上記の3ファイルに載っているパーツすべてが載っているファイルです。必要に応じてこのファイルからパーツをコピーし、上記の3ファイルに追加したり削除したりしてください。
基本的には普通のhtmlファイルですが、エントリーを表示しているパーツ部分は、インクルードされています。
<!--#include file="/include/main/summaryDefault.html" -->
この部分がインクルードの記述です。この場合は
/themes/include/main/summaryDefault.html
のファイルの内容が、実際のページでインクルードの記述部分に表示されます。インクルード先のファイルにはモジュールが設置されています。モジュールもhtmlで記述されていますので、文字や要素などの変更が可能です。
作りたいサイトのデザインにあわせて、静的サイトを作るのと同じようにdivを追加したり、インクルード先のモジュールのhtmlタグなどを変更してください。
グローバルナビゲーションの選択
top.html、index.html、entry.htmlの3ファイルには、動的なグローバルナビゲーションのパーツ、
<!--#include file="/include/header/dynamicGlobalNavi.html" -->
がインクルードされていますが、これを動的なグローバルナビゲーションに変更する場合は
<!--#include file="/include/header/staticGlobalNavi.html" -->
に変更してください。
動的なグローバルナビゲーションは、htmlが分からない方でも、CMSの管理ページから
カスタマイズ管理＞モジュールID管理＞globalNavi グローバルナビゲーションの「モジュール」のリンクで項目を変更する事ができます。
なお、「food」のバリエーションでは静的ナビゲーションのみ用意しています。
グローバルナビゲーションの種類は、デザインやサイトの運営方法によって使い分けてください。
cssファイルの編集
先ほど「テーマバリエーションの選択」で選択したcssファイルを修正します。選択を変更していない場合はsite.cssを修正します。これらのcssファイルは/themes/site/css/の中にあります。
テンプレートを複製
テンプレートの大枠ができ、スタイルもあたってきたら、必要に応じてカテゴリーやブログごとにテンプレートを複製し、複製したhtmlファイルを内容にあわせてカスタマイズしていきます。
テンプレート分けの基準
コンテンツの内容によって、表示内容やレイアウトを変更したい場合には、テンプレートを作成してそのコンテンツ専用のテンプレートとして使用する事が出来ます。
赤い文字のファイルやディレクトリが追加部分。基本的にカテゴリーやブログをサイトと同じ構造にして、ディレクトリやファイル名をIDと同じにする事で、ディレクトリやファイルが優先的に使用されます。
この図では省略していますが、cssファイルやイメージファイル、インクルードファイルなどについても同じように継承します。
カテゴリーの場合
テーマディレクトリ「site」の中に、カテゴリーIDと同じ名前のディレクトリを作成すると、そのカテゴリーではそのディレクトリの中のテンプレートが優先的に使用されます。
カテゴリー名のディレクトリの中に、例えば「entry.html」がなかったとすると、「site」ディレクトリ直下の「entry.html」をテンプレートファイルとして使用しますので、作成するファイルは変更が必要なファイルのみにします。
エントリーの場合
エントリーIDと同じ名前のファイルを作成すると、そのテンプレートファイルが優先的に使用されます。テンプレートファイルの場所は、カテゴリーに属していないエントリーのものであればテーマファイル直下に、属している場合であればそのカテゴリーIDと同じ名前のディレクトリの中に作成します。
ブログの場合
ブログのテーマ設定
テーマディレクトリ「site」と同じ階層に、「"ブログID"@site」というディレクトリを作成します。ディレクトリ名に「…@site」を付けると、「site」ディレクトリのテンプレートを継承します。つまり「"ブログID"@site」の中には変更したいテンプレートファイルのみを置き、変更のない部分については「site」ディレクトリのテンプレートを使用します。
ブログの場合はサイトの管理メニューから、テンプレートファイルを設定する必要があります。
設定をしたい子ブログのCMSの管理ページからカスタマイズ管理＞ブログの「テーマ設定」で項目を変更します。
「テーマ ディレクトリ名」を先ほど作成した「"ブログID"@site」と入力して保存をします。
すると、子ブログのテンプレートが切り替わります。