a-blog cmsの実務制作の流れをまとめています。
まずは、ベースとなる静的コンテンツを作りましょう。
2010-10-04追記：Dreamweaverを主に使用している人へのSSIインクルードに関する説明を追加しました。
ディレクトリ構成を考える
今回制作するのは、こんなサイトです。
ニュース・会社概要などがある、オーソドックスな企業サイトです。
実はこれ、最近、CMSのテストなどするときに使っていたりします。
サイトのディレクトリ構成は、左図のように考えました。赤字は「一覧ページのレイアウト構成」です。
a-blog cmsは、サイト内のパスによって表示するテンプレートを自動で切り替えるシステム（URLコンテキスト）を採用しています。
なので、制作前からきちんとディレクトリ構成と、一覧ページのレイアウトなどを考えておくと、他のCMS以上に制作が楽になります。
「製品・サービス」のページは、カスタムフィールドなども絡みそうで初心者には激ムズです。
ここは今回は後回しにして、「時系列」と「ページ」の部分だけ説明していきます。
.htaccessでSSIを有効にする
コーディングを始める前に、以下のように書いた.htaccessをlocalhostのルートに置きます。
AddHandler server-parsed .html
a-blog cmsは、インクルードをSSIの表記で記述しますが、a-blog cms自身はSSIは使用しません。
間違えてa-blog cmsがある公開サーバーにアップしないでください。
たいへんなことになりますw
補足：Dreamweaverを使っている人へ
Dreamweaverのプレビュー画面は、コード中にSSIのインクルードがあると.htaccessがなくても自動で読み込みを行います。
「localhostを使わず、Dreamweaverと公開サーバーのみで表示チェックをしている」
というワークフローの方は、この項の.htaccessの設定は不要です。
また、後述するSSIインクルードの部分も「include virtual」ではなく、a-blog cmsと同じ「include file」と記述してください。Dreamweaver内ではちゃんと出てきます。
localhostでは似たような動作を再現するためにSSIを使う必要があると解釈してください。
テーマのベースとなる静的HTMLを作る
CMSベースのコンテンツを作る場合、デザイン１パターンにつき、最低二種類のHTMLが必要になります。
- インデックスページ … index.html
- エントリーの個別ページ … entry.html
今回作成するデザインは「時系列」と「ページ」の二種類ですから、「news」と「company」のディレクトリ以下のページを作ることにしました。
ヘッドラインを表示するためのホームもちゃんと作っておきます。
コーディングに関しては、どうということはありません。普通にHTMLやCSSを書いてください。
リンクなどのパスは、相対値でも問題ありませんが、スラッシュからはじまる絶対値がおすすめです。
共通部分をSSIインクルードにする
コーディングの途中で、複数コンテンツで共通の箇所というのが出てきます。
ヘッダやフッタ、グローバルナビゲーションなどです。
これらの部分は以下のようなSSIインクルードにします。
先ほど.htaccessの設定をしておいたのでlocalhostでちゃんと見えるはずです。
<!--#include virtual="/include/header.html"-->
パスはスラッシュからの絶対値とし、インクルードファイルは「include」ディレクトリに入れてください。
インクルードさせる部分は、HTMLの要素を分断するような分け方をしないようにした方がいいです。外側のレイアウト用divを残して中身だけインクルードの対象にしておけば、リンク切れになってもページが崩れません。
というわけで、こんなページを作成しました。（名前クリックでスクリーンショットを見られます）
| ホーム | /index.html | ヘッドラインを表示します。 |
|---|---|---|
| ニュース・トップページ | /news/index.html | エントリー一覧を時系列（降順）で表示します。 リンクをクリックすると個別ページへ移動します。 |
| ニュース・詳細ページ | /news/entry.html | エントリーを表示します。ページ下部には前後リンクがあります。 |
| 会社概要・詳細ページ | /company/index.html | エントリー一覧を管理画面で設定した優先度順で表示します。 左メニューか、各ページの概要が書いてある枠のタイトルをクリックすると個別ページへ移動します。 |
| 会社概要・詳細ページ | /company/entry.html | エントリーを表示します。 左メニューをクリックすると他の個別ページへ移動します。 |
インクルードを書き換える
静的HTMLのベースコーディングができたら、この段階でいったんa-blog cmsに反映してみます。
サイト内のファイルを適当な名前を付けたフォルダに入れて、a-blog cms内の「themes」ディレクトリにまるっと転送するわけですが…
その前に、SSIインクルードのコマンドを修正します。
コード内の「include virtual」を「include file」に書き換えてください。
Dreamweaverのローカルサイト内一括置換を使うとサクッといけます。
a-blog cmsでは、SSIインクルードに「include file」のコマンドを使用します。ですが、localhostでは「include virtual」でなければファイルを読み込めません。なので、きちんとCSSの調整などが終わるまでは「include file」として共通部分が見えるようにしています。
localhostにa-blog cmsを設置して、themesフォルダ内で直接作業している場合は、もちろん最初から「include file」で構いません。
テーマを反映してみる
ファイルをアップしたら、a-blog cmsの管理メニューに入って、「コンフィグ」→「テーマ設定」の画面に移動します。
テーマ設定ではどのフォルダをテーマとして読み込むかなどを設定しているので、そこの名前だけ新しく追加したフォルダ名に書き換えて「保存」します。
この状態で公開ページへ移動すると、作ったサイトが反映されています。
※管理画面に戻れなくなるので別窓で開けてください
現時点ではブログの情報は全く反映されていませんが、静的ページや画像、インクルードなどはlocalhostのときと全く同じ状態で表示されるはずです。
何度やってもワクテカする瞬間なのですが、このままでは「ニュース」と「会社概要」しか見られませんし、それ以前にエントリーを書けないので、一旦元のテーマに戻します。
基本のHTML作成はここまで。
次回はa-blog cmsの基本設定についてですー。