まず始めに、簡単な文言の修正から行っていきましょう。
このSTEPでは、以下のような事柄を説明していきます。
![]() |
弊社のシステムは、プログラムとデザインの双方の修正を行いやすいよう、デザイン(表示)はデザインテンプレート形式で出力しています。
そのため、簡単な文言の変更やデザインの変更ならば、プログラムの知識が無くても簡単にできるでしょう。
では、トップページの文言を少し変更してみましょう。
まず、トップページ出力用のデザインテンプレートを探します。
全てのデザインテンプレートファイルは、「jobsystem/template/」以下に格納されています。
![]() |
※マニュアルでは、各ディレクトリやファイルまでのパスを表記する際、jobsystemをトップのディレクトリとします。
「jobsystem/template/pc/」にはPC用のテンプレートファイルが格納されています。
「jobsystem/template/mobile/」にはモバイル用のテンプレートファイルが格納されています。
※携帯表示対応版をご購入頂いた場合にのみ、このディレクトリが存在します。
では、トップページのデザインテンプレートを探していきます。
トップページのデザインテンプレートの基盤は、以下のファイルです。
jobsystem/template/pc/base/Index.html
ファイルが見付かったら、ソースコードを見てください。
ソースコードの最初の方と最後の方に下記のようなコードが書かれている箇所が見付かりましたか?
<!--# include head #--> ~省略~ <!--# include foot #-->
このソースコード(※以降このような形式のソースコードをコマンドコメントと記述)は、指定されたデザインファイルを、その箇所に読み込む物です。
このコマンドコメントでは、下記の2つのデザインテンプレートが読み込まれます。
jobsystem/template/pc/include/HeadNobody.html jobsystem/template/pc/include/FootNobody.html
ここで一つ覚えて頂きたい事があります。
ブラウザでは1ページで表示されていても、それらが単体のテンプレートで構成されていると言う訳ではありません。
システムは様々な方法で指定されたデザインテンプレートを呼び出しますので、ページごとに構成しているテンプレート枚数は変わります。
また、ページの基盤となるテンプレートの読み込み処理前と読み込み処理後に、以下の2つのテンプレートが読み込まれます。
jobsystem/template/pc/base/Head.html jobsystem/template/pc/base/Foot.html
1ページとして表示されているトップページが最低でも5枚のテンプレートから構成されている事がお分かり頂けましたか?
つまり一言でトップページを修正するといっても、修正したい箇所によりテンプレートファイルの場所が変わるのです。
それでは、いよいよデザインテンプレートを修正してみましょう。
ページを表示したときの最上部に求人サイト構築システムと表示されています。
この箇所の文言を変更します。
![]() |
以下のテンプレートファイルを開いてください。
jobsystem/template/pc/include/HeadNobody.html
今回のステップで修正する箇所が、ソースコードの上のほうに見付かります。
<h1>求人サイト構築システム</h1>
この箇所を、今回は以下のように修正することにします。
<h1>求人サイト構築システムをカスタマイズしてみよう!デザインの変更!機能の追加!なんでもできちゃう♪</h1>
この変更を保存し、テンプレートファイルを上書きアップロードすると変更が適用されます。
![]() |
いかがでしょう?ちゃんと修正できましたか?