ホーム > サポート・マニュアル > チュートリアル > 静的サイトからの移行 > 既存の静的サイトからの移行#1 「まずは設置」編

既存の静的サイトからの移行#1 「まずは設置」編

ドキュメント最終更新日時：2009/11/09 15:59

静的HTMLのWebサイトをテーマとして取り込む

a-blog cmsでは、静的なHTMLでつくられた既存のWebサイト（以下、静的サイト）を、コピーするだけで取り込むことができます。このチュートリアルでは、サンプルを利用して静的サイトを、動的にしていく手順について解説します。

静的サイトのサンプルをダウンロード

サンプルファイル

今回のチュートリアルの作業

静的サイトをa-blog cmsで表示できるようにする
静的なHTMLにa-blog cmsの管理パーツを追記する

今回のチュートリアルでは、まず静的サイトをa-blog cmsのテーマとして取り込み、実際にサイトとして表示できるようにします。その後、CMSとしての機能を利用するために、システムの動作・表示に必要なJavascriptやCSSなどを読み込むように、HTMLのHEAD要素内に追記していきます。

コンテンツの動的更新を行うための作業については、次回以降のチュートリアルで順に解説します。まずは静的サイトをa-blog cmsで表示するために準備をしましょう。

静的サイトをa-blog cmsで表示できるようにする

a-blog cmsをインストールした環境を用意します。インストール時のテーマは「company1」を選択します。

themesディレクトリ内にコピー

サンプルのZIPファイルを解凍して、左図のようなparkディレクトリが作られたことを確認してください。このファイルを、a-blog cmsのthemesディレクトリの中にコピーします。themesディレクトリは、a-blogcmsの設置先/themes/にあります。

a-blog cmsでは、サイトの表示用テンプレートを『テーマ』詳細という単位で扱います。themesディレクトリの中に、正しくコピーされているか確認します。

テーマを設定する

静的サイトをテーマとしてコピーしましたが、まだ設定されていないためcompany1テーマのまま表示されています。ログインして、管理ページを表示します。

『カスタマイズ管理』→『コンフィグ』→『テーマ設定』に管理ぺージ内を移動して、左図のようにテーマをparkと設定します。トップページ等のテンプレート設定項目もindex.htmlに設定し直します。

トップページを確認する

ここまで作業を終えたら、一度トップページを確認してみてください。このエントリーの冒頭にあったようなサイトが表示されたでしょうか？これでa-blog cmsに静的サイトが取り込まれました。次はテンプレートに、a-blog cmsのシステムが利用するパーツを読み込ませていきます。

静的なHTMLにa-blog cmsの管理パーツを追記する

管理系パーツの表示用CSS
システムの動作に必要なJavascript
ログイン後に表示される管理系ボタン

以上の3つのパーツを /themes/park/index.html に追記していきます。

管理系パーツの表示用CSS

HEAD要素内の任意の場所に追加します。リセット系のCSSに干渉されないよう、HEAD要素の終了タグの直前に貼り付けます。

<link href="/css/acms.css" rel="stylesheet" type="text/css" media="all" />

システムの動作に必要なJavascript

これもHEAD要素内に追加します。『BEGIN_MODULE』と『END_MODULE』のコメントブロックはテンプレートタグです。消さずにそのまま貼り付けてください。

<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->

ログイン後に表示される管理系ボタン

BODY要素の開始タグ直後あたりに追加します。BODY要素内に書かれていれば、表示上はどこでも構いません。

<!--#include file="/admin/action.html" -->

3つとも追加するとこのようになります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>名古屋自然公園</title>
<link href="park.css" rel="stylesheet" type="text/css" /><meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="ROBOTS" content="NOARCHIVE" />
<meta name="Keywords" content="*サンプル,*練習用,公園,自然,バリアフリー,名古屋,愛知,ドッグラン,紅葉,かえる,小川,花畑,自然公園," />
<meta name="Description" content="このサイトはサンプルサイトです。名前・団体名等は架空のもので、実際のものとは関係ありません。" />
<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->
<link href="/css/acms.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<!--#include file="/admin/action.html" -->
<div id="NSKbox">
<div id="header">
<h1 id="site-id"><img src="img/sizenkouen-logo.gif" alt="名古屋自然公園※このサイトはサンプルです。名前・団体名等は実際のものとは関係ありません。" /></h1>
<div id="search">
<ul>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="./sitemap.html">サイトマップ</a></li>
</ul>
<!-- 以下略 -->

管理パーツが表示されるか確認します

ログインした状態で管理パーツは表示されているでしょうか？　下の画像のようになっていればきちんと設置できています。次のチュートリアルでは、いよいよコンテンツを動的に更新できるように整えていきます。

<< 既存の静的サイトからの移...

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。