小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

サンプルHTMLファイルをデザインテンプレートに反映する方法

最終更新日: 2014-04-21
CMSのデザインテンプレート編集

CMS「すぐ使えるCGI」の導入の際に、先に HTML 形式のデザインサンプルページ(モックアップ)を作ってからそれを「すぐ使えるCGI」のデザインテンプレートとして設定する方法をご紹介します。

デザインサンプルページの作成には通常のWeb制作と同じ方法が使えます。オーサリングツール(ホームページ・ビルダーやDreamweaverなど)の利用も可能です。

また、既存のホームページに「すぐ使えるCGI」を導入する場合も同じ手順です。「サンプルページ(モックアップ)を作った」は「既存のホームページがある」と同じ状態と読み替えて下さい。なお、既存のホームページに導入する場合は、作業前に念のためバックアップ(ファイルのコピー)を取ってから初めて下さい。

このページの解説をご覧いただく前に必要な基礎知識

デザインテンプレートについて

CMS「すぐ使えるCGI」では、「テンプレート」と呼ぶHTML形式のファイルを編集することによりデザインのカスタマイズを行います。「テンプレート」が全くイメージできない方は先に「テンプレート解説」をご参照下さい。

設置方法

このページでは、サーバに「すぐ使えるCGI」のテスト設置を行った後の、デザインカスタマイズの方法に絞って解説します。このため、このページの説明を読む前に、できれば製品の大体の設置方法とファイル構成を把握しておいて下さい。

製品の基本的な設置方法は「すぐ使えるCGI」の設置方法をご参照下さい。

では始めましょう。

デザインテンプレート編集手順概要

先にHTML形式のデザインサンプルページを作成する場合、「すぐ使えるCGI」デザイン設定の手順は以下のようになります。

  1. ダミーデータを入れたデザインサンプルページを作る
  2. 作成したデザインサンプルページのHTMLコードを「すぐ使えるCGI」のデザインテンプレートファイルに切り貼りする

デザインサンプルページは、手動でHTMLを編集しても、Dreamweaver やホームページ・ビルダーなどのウェブオーサリングツールを利用しても構いません。

HTMLファイルで表現できる事であれば、どのようなデザインでも対応可能です。HTML4 系の他、HTML5、XHTML、また、CSS、CSS3 の利用も可能です。

デザインサンプルページ作成の前に行っていただきたい事

ただし、それぞれのページに何が表示できるのか(例:タイトル、画像、ページ送り... etc)が「すぐ使えるCGI」の製品によって異なりますので、デザインサンプルを作る前に、お使いの製品の「デザイン変更チュートリアル」と「テンプレート変数一覧」に目を通しておいて下さい。

これらの説明書は、製品の docs/ ディレクトリ内に添付されている他、このサイトの「マニュアル一覧」からもリンクしています。

このページで取り上げる製品

このページでは、製品のページ構成ごとにそのデザイン変更方法を解説します。

詳細ページのある製品のデザイン変更方法

目次+詳細ページタイプの製品の編集方法の説明として、「画像付 ウェブページ更新ツール Ver. 3.2」の記事ページの編集方法を例に挙げ解説しています。製品名に「ウェブページ更新」が含まれる製品が対象です。

タイムラインタイプの製品のデザイン変更方法

タイムラインタイプの製品の編集方法の説明として、「画像付 ニュース更新ツール Ver. 3.2」の全一覧のデザイン変更方法を例に挙げ、動画で解説しています(ページ末尾に動画)。製品名に「ニュース更新」が含まれる製品が対象です。

他の製品の場合

他の製品、バージョンの場合は、記載できる項目に違いがあったり、ファイル名が一部異なる場合がありますが、手順は同じです。
記載できる項目の一覧は、「マニュアル一覧」から各製品の「テンプレート対応図」をご参照下さい。

詳細ページのある製品のデザイン変更方法

「画像付 ウェブページ更新ツール Ver. 3.2」を例に挙げて、目次+詳細ページのデザイン変更方法をご説明します。

書き出しファイル用のディレクトリを作る

ローカルパソコン内にある編集用のウェブサイトディレクトリ内に、「すぐ使えるCGI」用の書き出しディレクトリを用意して下さい。

このディレクトリが、製品の初期設定の webdir/ に代わる本番用の書き出しディレクトリになります。
この例では products/ というディレクトリを作成しました。

目次(全一覧)と記事ページを作成する

作成したディレクトリ内に、目次ページと記事ページを作成して下さい。
サイト内の別のファイルからコピーするなどして、通常のページを作成するのと同じ方法で作成して下さい。

目次ページのファイル名は、「すぐ使えるCGI」から書き出そうとしている目次(全一覧)のファイル名と同じファイル名を付けて下さい。デフォルトでは「index.html」です。

この例では、目次を index.html 、記事ページを article.html としました。

記事ページを編集する

通常のWeb制作の方法で記事ページ(products/article.html)のデザインを整えて下さい。
画像が表示される部分は後で変更しますので、ダミーの画像などを利用して下さい。

デザインを整えたら、目次ページとのリンクと記事ページ間のもダミーの値(下記参照)で設定しておいて下さい。

目次に戻るリンクを設定

目次に戻るリンクは先ほど作成した index.html に設定して下さい。

前後ページへのリンクを設定

前後のページへのリンクは、とりあえず自分自身(article.html)を設定して下さい。(後で変更します。)

目次ページを編集する

目次ページも、適当にダミー内容を入力してオーサリングツールでデザインを整えて下さい。
記事ページへのリンクは全て、上記で作成した記事ページ(article.html)を指定して下さい。(後で変更します。)

ブラウザで確認する

編集が完了したらブラウザでページを確認し、表示や他のページとのリンクを確認して下さい。

テンプレート変数を置き換える

デザイン上の編集が完了したら、ページ内の表示要素をテンプレート変数と置き換えていきます。

記事ページのテンプレート変数置き換え

「すぐ使えるCGI」の記事ページ用のテンプレート templates/article/article.html をオーサリングツールで開いて下さい。
白いページ上に「%_subject_%」や「%_yyyy_%」などのテンプレート変数が表示されます。
これらが、そのページで使えるテンプレート変数です。

先ほど編集した記事ページファイル(article.html)も同時にオーサリングツールで開き、該当要素を「%_subject_%」「%_body_%」等のテンプレート変数と置き換えていきます。
まずは以下のテンプレート変数をコピーして下さい。

テンプレート変数 対応する内容
%_subject_% タイトル
%_body_% 記事内容
%_yyyy_% 日付の年
%_mm_% 日付の月
%_dd_% 日付の日
テンプレート変数の置き換え概要

※ この説明は「画像付 ウェブページ更新ツール Ver. 3.2」の設定例です。各製品で設定できるテンプレート変数と対応する登録内容は製品の説明書から「設置方法」→「テンプレート変数一覧」を参照して下さい。

以下が、テンプレート変数を置き換え終わった所です。

テンプレート変数を置き換えた所

前後リンクの設定

前後のリンク(先ほど 「article.html」と指定しておいた部分)は、デフォルトのテンプレートのソースから href 属性をコピーして下さい(2か所)。

テンプレート変数 対応する内容
%_to_prev_% 新しい日付(管理画面一覧で上)の記事へのリンク
%_to_next_% 古い日付(管理画面一覧で下)の記事へのリンク

画像部分の設定

画像の部分は、<img> タグの部分のHTMLコードをコピーして「メモ帳」「TextEdit」などに保存しておいて下さい。これは後で使用します。

記事ページのテンプレート article.html の方は、<img> タグの部分を 「%_article_image_1_%」というテンプレート変数に置き換えて下さい。

編集が終わったら記事ページのテンプレートを保存して下さい。

詳細ページ用テンプレートファイルの置き換え

ここで1回オーサリングツールを離れて、OSのファイル操作機能(Windows ならエクスプローラー、Mac なら Finder など)を使って保存した products/article.html を templates/article/article.html の位置にコピー(上書き)して下さい。

オーサリングツールを使わないのは、違うディレクトリにファイルを移動した時にパスの自動書換えがされないようにするためです。

これで、記事ページ用のテンプレート編集が完了です。

画像用テンプレートの設定

画像部分のコードは templates/article/article_image_1.txt に設定します。
引き続き、オーサリングツールでなくテキストエディタで編集して下さい。

templates/article/article_image_1.txt を開くと、以下のようにコメントと <img> タグのみが表示されます。

先ほど保存しておいた記事ページ上の <img> タグをファイルにペーストしてして下さい。

元のテンプレートに含まれていた画像の src 属性をペーストした <img> タグのsrc 属性にコピーして下さい。

ペーストした <img> タグ内に width 属性と height 属性が設定されている場合、必要に応じて削除して下さい(下表参照)。 削除すると、アップロードした画像サイズ通りに表示されます。
(CSSで設定する場合も同じです。画像タグからは width 属性と height属性を削除しCSSで設定してもOKです。)


アップロードする画像 削除の基準
width height
どの記事に付ける画像もタテヨコ比が同じで、常に同じサイズで表示 残す 残す
記事によって画像のタテヨコ比が異なるが、常に同じ幅で表示 残す 削除
記事によって画像のタテヨコ比が異なるが、常に同じ高さで表示 削除 残す
どのような画像をアップロードするか決まっておらず、画像のピクセルサイズ通りに表示する 削除 削除

編集が終わったら、元にあった <img> タグとコメントは削除してファイルを保存して下さい。

目次(全一覧)ページの設定

次に、目次(全一覧)ページのテンプレート編集です。
オーサリンツールでの作業に戻って下さい。

全一覧詳細部分の設定

まず一覧の繰り返し部分のコードの1件分を選択します。
全体でなく、繰り返しされる1件分だけを選択して下さい。

繰り返し部分のコードを templates/article/article_list.txt に設定していきます。
再び、オーサリングツールでなくテキストエディタで templates/article/article_list.txt を開いて下さい。

templates/article/article_list.txt を開くと以下のように表示されます。

オーサリングツールで選択した1件分のコードを、article_list.txt にペーストして下さい。

元のテンプレートに含まれていたテンプレート変数をそれぞれ該当する箇所に置き換えて下さい。
画像ファイルの場合と同じ要領です。

置き換えるテンプレート変数は以下の通りです。

テンプレート変数 対応する内容
%_subject_% タイトル
%_yyyy_% 日付の年
%_mm_% 日付の月
%_dd_% 日付の日
%_d_% 記事管理番号(ファイル名を構成)
%_imagename_escaped_1_% 画像ファイル名


href 属性が「%_d_%.html」となっている部分が記事ページへのリンクですので、先ほど article.html へのリンクにしておいた部分にコピーして下さい。
画像タグの src 属性も元のテンプレートに含まれている画像タグの src 属性をそのままコピーして下さい。

画像タグの width と height は、先ほどと同様に必要に応じて削除して下さい。
(CSSで設定する場合も同じです。画像タグからは width 属性と height属性を削除しCSSで設定してもOKです。)

アップロードする画像 削除の基準
width height
どの記事に付ける画像もタテヨコ比が同じで、常に同じサイズで表示 残す 残す
記事によって画像のタテヨコ比が異なるが、常に同じ幅で表示 残す 削除
記事によって画像のタテヨコ比が異なるが、常に同じ高さで表示 削除 残す

編集が終わったら、元のコード部分は削除してファイルを保存して下さい。

全一覧ページ全体の設定

オーサリングツールに戻って全一覧(目次ページ)のテンプレート編集を続けます。
先ほどコピーした繰り返し部分を全て削除し、代わりにその位置に「%_article_list_%」というテンプレート変数を記入して下さい。
ページのコーディングによっては文法エラーが出るかも知れませんが、気にせずそのまま保存して下さい。

全一覧(目次ページ)用テンプレートファイルの置き換え

保存したファイル(products/index.html)を CGI用のテンプレートファイルとして上書きコピーします。

ここでまたオーサリングツールを離れて、保存した目次(全一覧)デザインファイル products/index.html を templates/article/article_list.html として保存して下さい。

これで、目次(全一覧)用のテンプレート編集も完了です。

ディレクトリ設定変更

次に、新しく作成したディレクトリ products/ にファイルが書き出されるようにCGIの動作設定を行います。

admin/admin.cgiの編集

admin/admin.cgi をテキストエディタで編集し、125 行目付近にある $conf{web_dir} と $conf{relative_web_dir} を作成したディレクトリ(この例だと products/ )を指すように設定して下さい。

admin/admin.cgi の編集例

#--------------------------------------------------------[line 125]--
# ファイル書き出しウェブディレクトリ
#--------------------------------------------------------------------
# このディレクトリは、通常 Web コンテンツが格納されているディレクトリ
# のどこかになります。
# 相対パスでも絶対パスでも指定できます。
# Windowsで稼動させる場合、絶対パスでないとアクセスできない場合があり
# ます。
# 変更した時は $conf{relative_web_dir} の設定も必ず見直して下さい。

$conf{web_dir} = '/home/username/htdocs/products/';




#--------------------------------------------------------[line 140]--
# ($conf{web_dir} を変更したら同時に変更)
#--------------------------------------------------------------------
# admin/admin.cgi からファイル書き出しウェブディレクトリ
# ( $conf{web_dir} )へのURL 上のパスを指定します。
# 相対パスか、ウェブサーバのトップ階層からの絶対パスで指定します。

$conf{relative_web_dir} = '/products/';


アップロードとパーミッション設定

テスト登録の削除

テストで登録した記事があればすべて管理画面から削除して下さい。

アップロード

編集した以下のファイルをサーバに上書きアップロードして下さい。

admin/admin.cgi
templates/article/article.html
templates/article/article_image_1.txt
templates/article/article_list.html
templates/article/article_list.txt

ディレクトリの作成とパーミッション設定

products/ ディレクトリをサーバ上に作成し、webdir/ と同じパーミッションを設定して下さい。

確認

管理画面から記事登録を行い、新しいデザインでファイルが書き出されることを確認して下さい。

タイムラインタイプの製品のデザイン変更方法

「画像付 ニュース更新ツール Ver. 3.2」を例に挙げて、タイムラインタイプの製品のデザイン変更を動画で解説しています。実際の作業を行う場合は、適宜ビデオを止めながら作業して下さい。

なお、動画の解説は「デザインは完成している」所から始まります。デザインについては通常のWeb制作の方法で仕上げて下さい。
(ビデオで使っているサンプルのホームページはテンプレート販売サイトから購入したものです。)

関連リンク

さらに詳しく