ログオン画面のカスタマイズ

Wagbyでは、ログオン画面は独立して用意されています。ここでは、ログオン画面の変更方法を説明します。

logon.css

Wagby が標準で提供するログオンフォームである logon.jsp が利用する CSS ファイルです。 $(DEVHOME)\env\webpage\css\logon.css として用意されています。

@charset "Shift_JIS";
/* ボディ */
body {
  color : #000000;
  background-color: #FFFFFF;
  font-size : 9pt;
  cursor :  auto;
  word-break: break-all;
}

/* ヘッダー */
.title_logon {
  background:url("../img/logon_hd.png") no-repeat center;
  width: 814px;
  height: 101px;
  border: 0px;
  font-size: 36px;
  color: #000099;
  letter-spacing: 2px;
  padding-top: 30px;
  margin-top: 10px;
  margin-bottom: 25px;
}

/* フッター */
#footer {
  margin-top: 20px;
  width: 759px;
  height: 37px;
  background: url("../img/footer.gif") no-repeat;
}

#jasmine {
  width: 840px;
  height:48px;
  padding-left: 50px;
  padding-top: 35px;
}

/* エラーメッセージ */
.errormsg {
  color : #990000;
  font-size : 14pt;
  line-height: 32px;
  background-color: #FFCCCC;
  width: 90%;
  vertical-align: middle;
  letter-spacing: 1px;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-top: 2px double #FF9999;
  border-right: 2px double #990000;
  border-bottom: 2px double #990000;
  border-left: 2px double #FF9999;
}

/* ログオン枠 */
.frmLogon {
  background:url("../img/logon_waku.png") no-repeat center;
  width: 460px;
  height: 190px;
  border: 0px;
}

/* ログオン枠内のテーブル定義 */
.frmLogon table {
  width : 100%;
  border: 0px;
  margin-top: 15px;
  padding: 0px;
}

.frmLogon th {
  height: 30px;
  font-size : 11pt;
  text-align: right;
  color: #000033;
  padding-right: 10px;
}

.frmLogon td {
  font-size : 11pt;
}

BUTTON {
  border: 0px;
  cursor: pointer;
}

/* ログオンボタン */
BUTTON.btnLogon {
  background: url("../img/logon_btn.gif") no-repeat center;
  width: 121px;
  height: 20px;
  margin-top: 20px;
}

カスタマイズを行う場合は、このファイルを直接、編集してください。

header_logon.html

ログオンフォーム内に表示されるアプリケーション名です。 $(DEVHOME)\env\work\srcgen\webpage フォルダに自動生成されます。このファイルを変更することで、ログオンフォームはそのままに、タイトルの文字部分だけを変えることができます。

<%@ page pageEncoding="UTF-8"%>
<div class="title_logon">Wagby アプリケーション</div>

変更したファイルは $(DEVHOME)\customize\webpage フォルダに保存してください。この手順の詳細はファイル置換の考え方をお読みください。

画像ファイルを扱う場合は、$(DEVHOME)\customize\webpage\img フォルダにあらかじめ保存しておいてください。 header_logon.html では、<img src="img/sample.gif"/> といった表記を用います。（sample.gif の部分は実際にご利用になる画像ファイルに置き換えてください。）

logon.jsp

ログオン画面全体を構成します。このファイルは $(DEVHOME)\env\work\srcgen\webpage\system フォルダに自動生成されます。

ユーザ名、パスワードの入力部を修正する

logon.jsp の以下の部分が該当します。なおカスタマイズに際しては、太字の部分は変更しないようにしてください。

<form name="logonForm" action="logon.do" method="post" 
      onsubmit="buttonOff(); return true;">
  ...
  <table cellspacing="1">
    <tr><td colspan="2"><br/><br/></td></tr>
    <tr>
      <th><fmt:message key="__jfc_common.logon.userid"/></th>
      <td><input type="text" name="user" size="20"
        value="<c:out value="${logonForm.user}"/>"/></td>
    </tr>
    <tr>
      <th><fmt:message key="__jfc_common.logon.password"/></th>
      <td><input type="password" name="pass" size="20"/></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><button type="submit"
        class="btnLogon" name="btnLogon" value=""></button></td>
    </tr>
  </table>
  ...

ログオン画面のフッタを修正する

ログオン画面のフッタ部は、同 logon.jsp ファイルの以下になります。

...
<div align="center">
<%@ include file="/footer.html" %>
</div>

</body>
</html>

フッタを修正する場合は、include で指定されている footer.html を修正するようにします。フッタを削除する場合は、この include を囲む div 要素を含めて、行削除を行います。

修正後は同ファイルを $(DEVHOME)\customize\webpage\system へ保存します。（これによって次回以降、自動生成された logon.jsp ではなく、カスタマイズした logon.jsp が使われるようになります。）その後、再ビルドしてください。

このページ

見栄えのカスタマイズ