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

テンプレート解説 No.4 管理画面のデザイン変更

最終更新日: 2012-08-10

「すぐ使えるCGI」では、生成されるウェブサイト用のページと同様に管理画面も「テンプレート」で簡単にデザイン変更できます。
特に必要が無ければ管理画面のテンプレートは一切変更せずに使用できますが、イントラネットのデザインに合せる必要がある場合などはテンプレートを編集して下さい。
このページでは、「ウェブページ更新ツール Ver 3.1」を例に、管理画面のデザイン変更方法の概要を解説します。

このページの目次

  1. 基本事項
  2. 変更ができる部分と変更してはいけない部分
    1. 変更できない部分
    2. 変更可能な部分
  3. フッタの製品情報
  4. テンプレート詳説
  5. 機能の追加

「No.3 「短い一覧」の利用方法」から読む

基本事項

以下の2つの図は、新規登録入力画面と対応するテンプレート templates/admin/2.html をブラウザで表示したところです。
テンプレート変数(「%_body_%」など)の位置にCGIが個別の値を挿入するのは、通常のテンプレートと同じです。

「テンプレート」や「テンプレート変数」といった用語がよく分からない場合は「No.1 デザインはテンプレートで指定する」に先に目を通して下さい。

新規登録入力画面を表示させたところ

新規登録入力画面に対応するテンプレート templates/admin/2.html

変更ができる部分と変更してはいけない部分

管理用のテンプレートは、更新フォーム送信値などを設定している部分があるので、その部分は変更できません。変更可能な部分と変更できない部分は、以下のように分かれます。

変更できない部分(上図赤枠)

以下の変更をすると管理画面が動作しなくなります。

  • フォーム項目の name属性、id属性、value属性
  • JavaScript (変更と削除)

JavaScript の追加は可能です。

変更可能な部分

ページ全体の構成やデザインは自由に変更できます。
フォームの表示形式(幅や高さ、色など)も変更可能です。

フッタの製品情報

管理画面のフッタ(下図参照)は、画面表示時に自動的に追加されます。テンプレートでは内容の指定はできません。
表示の形式(サイズ、色等)はテンプレートファイル内にスタイルシートで指定できます。

表示を隠すにはスタイル設定を編集して下さい(後述)。

テンプレート詳説

以下に、入力画面のテンプレート templates/admin/2.html を例にとって、管理画面のテンプレート編集時の留意点やスタイルシートの設定の説明をします。
青字は変更できない部分です。

コード
(青字 は変更不可部分)

変更
可否

備考

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html;charset=Shift_JIS">

HTMLファイルの通常のDTD宣言と<HEAD>タグの開始部分です。

自由に変更して下さい。
XHTML形式への変更もできます。

<TITLE>ページ %_mode_title_%入力</TITLE>

<TITLE>タグの指定は自由に行えます。
%_mode_title_%」には「新規登録」「編集」「削除」 など、行っている作業の種類を示す単語が挿入されます。

<STYLE type="text/css">
<!--
p, ol, ul, li {
line-height: 150%;
}
H1 {font-size: 1.3em;}
H2 {font-size: 1.2em;}
H3 {font-size: 1.1em;}
H4 {font-size: 1em;}
 :
(中略)
 :

管理画面のスタイル指定です。
自由に変更して下さい。動作に関係のある設定については後述します。

CSSを外部ファイルに指定しても構いません(方法)。

.msg_info {
color: #990066;
}
.msg_error {
color: #ff0000;
}
.errorno {
font-size: x-small;
color: #CCCCCC;
}
.copyright {
color: #003300;
font-size: x-small;
}

これらのクラスでは、プログラムで表示するメッセージに付けるクラスの設定をしています。
クラス名は変更できません。

クラス名と対応するメッセージの種類は以下の通りです。

クラス名 メッセージの種類
msg_info

「新規登録が完了しました」など、正常な動作を伝えるメッセージに付けられます。

msg_error

「必須項目に未入力があります」など、入力エラー等を伝えるメッセージに付けられます。

errorno

(未使用)開発上の必要から残っていますが、設定を削除しても差し支えありません。

copyright

フッタに表示されるライセンス情報に付けられます。

顧客のサイトに納品する場合でライセンス情報の表示をしたくない場合などは「visibility: hidden」等の設定をして非表示にして下さい。

 :
(中略)
 :
.link2show {
font-size: 0.9em;
}
.link2hide {
display: none;
font-size: 0.9em;
}
 :
(中略)
 :
-->
</STYLE>

これら2つの青字のクラスは「よく使うタグ」の展開と折りたたみのために必要です。
「よく使うタグ」を使用している場合は 変更しないで下さい。

 

<script type="text/javascript"><!--
function show_format(){
var FmtPart = document.getElementById('inputformat');
var HideLink = document.getElementById('link2hide');
var ShowLink = document.getElementById('link2show');
FmtPart.style.display = 'block';
HideLink.style.display = 'block';
ShowLink.style.display = 'none';
}
 :
(中略)
 :
// --></script>
不可

動作上必要な JavaScript の設定です。削除できません。

JavaScript 関数の追加は可能です。
追加する場合は、最後の「// --></script>」の直前に挿入して下さい。

</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Webサイト管理ツール</H1>
<H2>%_mode_title_%</H2>

<HEAD>の終了タグと、<BODY>の開始部分です。

設置するサイトのデザインに合せてロゴを加えたヘッダやナビゲーションを付けるなど、自由に変更できます。

<FORM ACTION="%_myname_%" METHOD="post"
ENCTYPE="multipart/form-data" id="mainform">
<INPUT TYPE="hidden" name="s" value="3">
<INPUT TYPE="hidden" name="m" value="%_m_%">
<INPUT TYPE="hidden" name="d" value="%_d_%">
<INPUT TYPE="hidden" name="cd" value="%_cd_%">
<INPUT TYPE="hidden" name="n" value="%_n_%">
<INPUT TYPE="hidden" name="i" value="%_i_%">
<INPUT TYPE="hidden"
name="tempdir" value="%_tempdir_%">
<INPUT TYPE="hidden"
name="file_order" value="%_file_order_%">

不可

管理用の値を送信するフォームの設定です。

変更しないで下さい。

<NOSCRIPT><P CLASS="msg_error">
JavaScriptを有効にして下さい。</P></NOSCRIPT>
<P>
%_msg_instruct_%
</P>

一部可

%_msg_instruct_%」部分にはエラーメッセージや完了メッセージが挿入されます(下図参照)。
削除しないで下さい。

メッセージは、種別ごとにクラス(class="msg_error" など)が指定されて表示されます。
どのクラスが指定されるかは、スタイル指定部分の解説を参照して下さい。

表示されるメッセージの内容を変更するには admin/admin.cgi の設定を編集して下さい(方法)。

<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD>※=必須入力</TD>
<TD ALIGN="right" NOWRAP><B>%_mode01_%</B>
%_mode01_arrw_%確認&nbsp;&gt;&nbsp;%_mode_title_%確定
</TD>
</TR>

入力欄の上にある入力ステップのナビゲーション部分です。
テンプレート変数と表示の対応は以下の通りです。

テンプレート変数

表示内容

%_mode_title_%

「新規登録」「編集」「削除」 など、行っている作業の種類を示す単語が挿入されます。

%_mode01_%%_mode01_arrw_%

新規登録と編集作業中は、それぞれ 「入力」 と 「>」 が挿入されます。
削除作業中は何も表示されません。

<TR>
<TD COLSPAN="2">

<TABLE border="0" cellspacing="1"
cellpadding="6" WIDTH="700" BGCOLOR="#333333">
<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy" type="text" value="%_yyyy_%"
size="8" maxlength="4" onFocus="set_imemode(this, 0)">
年 
<INPUT name="mm" type="text" value="%_mm_%"
size="4" maxlength="2" onFocus="set_imemode(this, 0)">
月 
<INPUT name="dd" type="text" value="%_dd_%"
size="4" maxlength="2" onFocus="set_imemode(this, 0)">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>
<TR>
<TH CLASS="titem">タイトル※</TH>
<TD CLASS="contents"><INPUT name="subject"
type="text" size="80" maxlength="100"
VALUE="%_subject_%" onFocus="set_imemode(this, 1)">
</TD>
</TR>
<TR>
<TH CLASS="titem">記事内容※</TH>
<TD CLASS="contents">
<TEXTAREA name="body" cols="60" rows="10"
onFocus="set_imemode(this, 1)">%_body_%</TEXTAREA>

一部可

登録内容を入力するフォーム部分です。

送信する値名(name属性)と送信する内容(value属性)は変更できません。
id属性がある場合も変更しないで下さい。

それ以外の部分は、フィールドの種類も変更できます。

例えば、「必ず登録日現在の日付を登録する」という運用を行うのであれば、日付関連のフォーム入力形式を 「type="text"」から「type="hidden"」に変更しても構いません。

記事内容は<textarea>から1行フィールドの<input type="text" name="body" value="%_body_%" ...> に変更する事も可能です。

<!-- input format begin -->
<div class="link2show" id="link2show">
<A href="javascript:show_format()">よく使うタグ</A></div>
<div class="link2hide" id="link2hide">
下表からコピーして使って下さい。
<A href="javascript:hide_format()">隠す</A></div>
<DIV class="inputformat" id="inputformat">
<TABLE CELLPADDING="4" CELLSPACING="0"
BORDER="1" style="font-size: 0.9em;">
<TR>
<TH NOWRAP ALIGN="left">テキストリンク</TH>
<TD><INPUT type="text" size="80"
VALUE="{{{&lt;a href=&quot;URLをここへ入力&quot;
&gt;リンクテキストをここへ入力&lt;/a&gt;}}}"
onFocus="this.select();" onClick="this.select();"></TD>
</TR>
 :
(中略)
 :
<TR>
<TH NOWRAP ALIGN="left">h4 ヘッダ</TH>
<TD><INPUT type="text" size="80"
VALUE="(h4ヘッダで囲うテキストを入力)"
onFocus="this.select();" onClick="this.select();"></TD>
</TR>
</TABLE>
</div>
<!-- input format end -->

「よく使うタグ」の表示部分です。

不要であれば削除して構いません。
よく使う表現を保存しておくと便利です(方法)。

</TD>
</TR>

</TABLE></TD>
</TR>
</TABLE>
<BR>

入力フィールド用テーブルの終了。変更できます。

<TABLE border="0" cellspacing="0" cellpadding="6">
<TR>
<TD><INPUT type="submit" value="確認画面へ"
onClick="return set_order('filelist');"
></TD>
一部可

確認画面へのフォーム送信ボタンです。
ボタン名(value属性)は変更可能です。

onClick にJavaScript を足したい場合は「return set_order('filelist');」の前に実行する関数名とセミコロンを挿入して下さい。

<TD><INPUT type="button"
onClick="window.location='%_myname_%?n=%_n_%&amp;i=%_i_%'"
value="中止(一覧に戻る)"></TD>
</TR>
</TABLE>
一部可

入力を取りやめ一覧ページに戻るボタンです。
window.location」の後のURL指定は変更しないで下さい。
ボタン名(value属性)は変更可能です。

通常のリンクでの指定に変更しても構いません。
例)
<a href="%_myname_%?n=%_n_%&amp;i=%_i_%">中止</a>

</FORM>

</BODY>
</HTML>
一部可

フォームの終了と、HTMLページの終了タグです。

サイト共通のフッタを加えることが可能です。

機能の追加

管理画面のテンプレートを編集する事で機能の追加や変更ができます。
サポート情報でサンプルをご案内していますので「関連リンク」からご利用下さい。

関連リンク

さらに詳しく