Blog

ブログ

a-blog cmsの実務制作(2)ベースのウェブサイトを作る

a-blog cmsの実務制作の流れをまとめています。

初めての方は(1)からお読みください

まずは、ベースとなる静的コンテンツを作りましょう。

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ベースのコンテンツを作る場合、デザイン1パターンにつき、最低二種類の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の基本設定についてですー。