サポート > Wagby Developer Network > 見栄えのカスタマイズ > カスタマイズの例

ヘッダ部を置き換える

1. 自動生成された $(DEVHOME)\env\work\srcgen\webpage\header.html を変更します。
2. 変更したファイルを $(DEVHOME)\customize\webpage に保存し、再ビルドを行います。

画像ファイルを扱うこともできます。詳細はヘッダ部の説明をお読みください。

フッタ部を置き換える

1. 自動生成された $(DEVHOME)\env\work\srcgen\webpage\footer.html を変更します。
2. 変更したファイルを $(DEVHOME)\customize\webpage に保存し、再ビルドを行います。

画像ファイルを扱うこともできます。詳細はフッタ部の説明をお読みください。

サイドバー部を変更する

1. 自動生成された $(DEVHOME)\env\work\srcgen\webpage\sidebar.html を変更します。
2. 変更したファイルを $(DEVHOME)\customize\webpage に保存し、再ビルドを行います。

サイドバーを削除することもできます。詳細はサイドバー部の説明をお読みください。

各表示部品の配置を変える

1. $(DEVHOME)\env\template\base_classic2.jsp を変更します。
2. 必要に応じて、CSS ファイルを変更します。
3. 再ビルドを行います。

詳細はレイアウト構造の説明をお読みください。

ボディ部に表示されるモデル項目の隙間を詰める

soria.css（および各テーマ別の CSS ファイル）の display_label クラスや display_field クラスを変更します。 標準では padding 指定が "4pt" となっていますが、この値を小さくすることで、全体の隙間を詰め、コンパクトな表示を実現します。 具体的を次に示します。

.display_label {
  text-align: center;
  color: #000066;
  background-color: #B9CBF1;
  _font-size: x-small;
  padding : 2pt; /* オリジナルは 4pt */
}

「display_」ではじまるすべてのクラスについて、padding 値を変更してください。