![]() |
弊社のシステムは、プログラムとデザインを分離する為に、
表示はデザインテンプレート(htmlファイル)を元に行なっておりますので
デザインや文言の変更は、htmlの知識のみで可能となります。
![]() |
デザインテンプレートはtemplateフォルダ以下に格納されており、
まずmobile,pcとモバイルデザインとPCデザインのフォルダへと分かれ、
次に求職者(nUser)、求人情報(job)等、機能別のフォルダと分かれます。
その下はログイン状態別、未ログイン(nobody)、求人企業(cUser)、管理者(admin)別のフォルダとなり、
ログイン状態別フォルダの下に各ログイン状態での表示されるデザインテンプレートが配置されています。
※モバイル対応でない場合はmobileフォルダは存在しません
※一部システムではログイン状態別フォルダが存在せず
RegistAdmin.html RegistcUser.html
と言ったように各テンプレートファイルの末尾にログイン状態が記述されています。
また、other以下は特別なフォルダとなっており、
common には各機能で共有して利用されるテンプレート page にはシステムとは関係ない静的なページのテンプレート users にはログイン状態に応じた共通ページのテンプレート
が格納されています。
※ログイン状態別フォルダが存在しないシステムではcommonではなくtemplateフォルダ直下のbaseフォルダに格納されているなど違いがあります。
今回は例としてヘッダーの記述を変更しますが、
まずはトップページのデザインがどのように表示されているか確認しましょう。
未ログイン状態のトップページデザインは下記のファイルとなります。
template/pc/other/users/nobody/Index.html
ファイルを開きソースコードを確すると
最初の方と最後の方に下記のようなコードが書かれていると思います
<!--# include head #--> ~省略~ <!--# include foot #-->
このソースコード(※以降このような形式のソースコードをコマンドコメントと記述)は、指定されたデザインファイルを、その箇所に読み込む物です。
このコマンドコメントでは、下記の2つのデザインテンプレートが読み込まれます。
template/pc/other/users/nobody/Head.html template/pc/other/users/nobody/Foot.html
※未ログイン時のデザインテンプレートとなります。求職者ログインの場合下記のファイルが読み込まれます
template/pc/other/users/nUser/Head.html template/pc/other/users/nUsre/Foot.html
ここで一つ覚えて頂きたい事があります。
ブラウザでは1ページで表示されていても、それらが単体のテンプレートで構成されていると言う訳ではありません。
システムは様々な方法で指定されたデザインテンプレートを呼び出しますので、ページごとに構成しているテンプレート枚数は変わります。
また、ページの基盤となるテンプレートの読み込み処理前と読み込み処理後に、以下の2つのテンプレートが読み込まれます。
template/pc/other/common/Head.html template/pc/other/common/Foot.html
1ページとして表示されているトップページが最低でも5枚のテンプレートから構成されている事がお分かり頂けましたか?
つまり一言でトップページを修正するといっても、修正したい箇所によりテンプレートファイルの場所が変わるのです。
それでは、いよいよデザインテンプレートを修正してみましょう。
ページを表示したときの最上部に求人サイト構築システムと表示されています。
この箇所の文言を変更します。
![]() |
以下のテンプレートファイルを開いてください。
template/pc/other/users/nobody/Head.html
今回のステップで修正する箇所が、ソースコードの上のほうに見付かります。
<h1><!--# ecode getSiteProfile site_title #--></h1>
この箇所を、今回は以下のように修正することにします。
<h1>求人サイト構築システムをカスタマイズしてみよう!デザインの変更!機能の追加!なんでもできちゃう♪</h1>
この変更を保存し、テンプレートファイルを上書きアップロードすると変更が適用されます。
![]() |
いかがでしょう?ちゃんと修正できましたか?