すぐ使えるCMS カスタマイズ編
すぐ使えるCMS カスタマイズ編
前回まですぐ使えるCMS（WEBページ更新ツール）以下：すぐ使えるCMSの基本的な導入手順、および管理画面の操作方法をご紹介しました。
今回は設置元となるホームページのデザインを踏襲した各種構成テンプレートのカスタマイズ手順を紹介します。
前にもお話をしたようにテンプレートファイルはhtmlかtxtでの出力となりますので、CGI部分をいじったり、記述部分を触らない様に気を使う必要がなく、通常のhtmlタグの修正をするだけで済みますので非常に簡単です。
カスタマイズをする前にバックアップを取っておけばいつでも初期状態に戻す事ができますので、事前にバックアップファイル保存をしておきましょう。
カスタマイズの順番は以下の様になります。
articleファイル（記事詳細ページ）
article_listファイル（記事一覧ページ）
short_listファイル（TOPページ向け短い一覧ページ）
※top.html（最新記事ページ）はarticleファイルと同じ構成なのでここでは手順に入れておりません。
articleファイル（記事詳細ページ）のカスタマイズ
まずは、templates/article/の中を開きます。ここに全ての記事ファイル系テンプレートが入っています。
記事詳細ページは「article.html」です。初期状態で用意されたhtmlページですのでそれを開き、さらにhtmlソースを開きます。
ソースの中には以下の種類の様にCGIプログラムで自動的に出力されるタグ（出力タグ）が元々入っています。
article.html内ソースヘッダー部分
article.html内ソース本文部分
各出力タグ基本的な使い方がされたテンプレートになっていますので、その上でデザイン部分のみを母体サイトのデザインにします。
一度全て母体サイトのhtmlタグ構成に変えた後に、後から上記の必要なタグを任意の位置に設置してもOKです。
主なCGI出力タグ
%_subject_%
%_yyyy_%-%_mm_%-%_dd_%
%_body_%
%_file_list_%
%_article_image_1_%
このように「%_ _%」で囲まれた部分がCGIによる出力がされるところです。
%_subject_%は「タイトル」
%_yyyy_%-%_mm_%-%_dd_%は「日付」
%_body_%は「記事内容」…本文
%_file_list_%は「記事一覧」
%_article_image_1_%は「画像ファイル」
設置例：%_subject_%であれば
<title>%_subject_%</title>や、<h1>%_subject_%</h1>など
重要な見出しタグの中に入れましょう。
それ以外にもarticle.html内には「%_ _%」で囲まれたタグがありますが、基本テンプレート内には要所要所ごとに「コメント」の説明が記載されているので、何を表示させているのかがすぐにわかる親切設計となっています。
どこに何を設置するかに厳格なルールはないので、基本テンプレーの状態を参考に制作者にお任せとなります。
必要ないと思うものは消しても構いませんし、2回・3回と繰り返して同じタグを使う事も出来ます。
article_image_1.txtは、画像ファイルの出力を制御するファイルです。article.htmlソース内にも記載があり、そこに画像が表示されます。ここではこのままカスタマイズせずに進みます。
article_listファイル（記事一覧ページ）のカスタマイズ
次にarticle_list.html（記事の一覧ページテンプレート）を母体サイトのデザインに変えます。基本的には記事詳細ページの時と同じです。
もともと基本的な出力タグが使用されたテンプレートになっていますのでそれを参考にデザイン変更をするだけです。
ページの一覧はある程度の件数が入ったらページネーションされる（1ページ当たりの表示数を制限してそれ以降は「次のページ」リンクが表示される）ようになっていますので、そのまま利用しましょう。
artcle_list.txtファイルについて
記事一覧のテンプレートには上記以外にarticle_list.txtというテキストファイルがあります。
これは一覧テンプレート内でCGIで記事を出力される部分の仕様になります。ソース内にある%_article_list_%のところに表示されるようになっています。
article_list.txtの位置
article_list.txt内ソース
特にこだわりがなければこのまま使ってもらって良いと思います。実際の表示のされ具合をみて、カスタマイズの必要があれば自由に手を加えて下さい。
short_listファイル（短い一覧用ページ）のカスタマイズ
short_listファイルは記事一覧ページとは別に、TOPページによくある「新着情報」等のコンテンツ部分に表示させるテンプレートです。
short_listファイルもhtmlファイルです。これまでのカスタマイズの流れから言えばそのまま母体サイトのTOPページのデザインにする事になりますが、ここではそうはしません。
元々このshort_list.htmlは「webdir」という専用の出力フォルダに生成されるものです。ですのでWEBサイトのTOPページとしてこのファイルを使う事はできません。あくまで「webdirフォルダ内」での短い一覧という位置づけになります。
webdirフォルダ内には元々前述でカスタマイズした「記事一覧ページ」がある訳ですし、あえてshort_listのデザインを母体サイト向けに変えて短い一覧を設ける必要はない様に思われます。
いま現在の新着情報の一覧はWEBサイトのTOPページ下に出す事が主流です。実はshort_listはページ全体をデザイン変更するのではなく、TOPページの「新着情報部分のみ」に特化してカスタマイズをするものになります。
short_listファイルの具体的な2種類の使い方
具体的には2種類の方法があります。
■iframeなどのインラインフレームタグを使ってshort_list.htmlテンプレートをそのまま表示させる（そのようにhtmlタグを改変する）。
■short_list.txtはCGIにより出力されるタグ構成が記載されているので、short_list.htmlファイルを使わずにこのtxtファイルをSSIを使ってTOPページの新着情報の位置に出す。
上記の2通りです。
short_list.htmlをそのまま使う場合
<iframe></iframe>タグというインラインフレームタグがあります。htmlページのある部分に別のhtmlページを映す際に使われるタグです。
このタグを利用して新着情報を出したい箇所に上記の短い一覧htmlファイルをそのまま映します。
例：<iframe src="webdir/short_list.html"></iframe>
この場合インラインフレームで新着部分だけを見せる訳ですから、short_list.htmlは余計なタグは使わずに記事の一覧部分だけが見える様にシンプルに構成する事になります（body以下のソースが新着のタグのみになる様に調整）。
このあたりは見え方を見ながらカスタマイズが必要になるでしょう。例えば「新着情報」と記載した見出しタグ（h3タグなど）までフレーム内（short_list.html内タグ）で表示するのか、フレームの外（TOPページ内）で表示させるのか、など考慮が必要です。
short_list.txtのみを使う場合
直接出力タグであるshort_list.txtを表示させるためには、SSI（サーバーサイドインクルーディング）を使います。
short_list.txt内ソース例
このソース内のタグはTOPページに直接表示されますので、CSSできちんとデザインを制御しましょう。
例：<!--#include virtual="webdir/short_list.txt" -->
別途SSIの設定（.htaceessの設定）等が必要です。
これによりshort_list.txtの出力内容が上記コメントタグのところにそのまま表示されます。
どちらの方法が有効か
私の場合は後者のSSIを良く使っていました。iframeで表示させているhtmlファイルはTOPとは違うファイルなので、実際のTOPページ内ソースにはiframeのタグがあるだけで新着情報の文面は表示されません。
例：<iframe src="webdir/short_list.html"></iframe>
注意：どんなに更新してもTOPのソース内に新着情報は表示されません。このインラインフレームが表示されるだけです。
SSIでtxtファイルを直接読み込めば、TOPページに直接新着情報がソースとして映るので、常に情報更新がされているという意味でSEO対策上有効であるためです。iframeタグがあるだけではTOPページの新着が更新されているかどうかがわからないのです。
直接TOPに表示される新着記事
SSIでサーバーに負担を掛けたくないという意見ももちろんです、その場合はiframeを利用して良いと思いますのでこの辺はケースバイケースです。
これで一通りのカスタマイズは終了しました。
デザインテンプレートに変更を加える時は、サーバー上のテンプレートファイルを上書きアップロードした後、管理画面の下に設置されている【再構築】ボタンを押す必要がありますのでご注意ください。
どんな些細な変更でもボタンを押さなければ反映がされません。
