## テンプレートのご利用前に必ずお読み下さい

### 利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『求人サイト向け 無料ホームページテンプレート tp_job5』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

## 【お知らせ】求人が増えるたびに、HTMLを編集していませんか？

弊社運営サイト（Frames CMS）を使えば、求人情報が増えるたびにHTMLを編集しなくて済みます。管理ページから追加・編集するだけの楽々更新。
まずは、Frames CMS の「Free（無料版）の求人向け」を使ってみて下さい。
業者様のクライアントへのご活用にも。

## このテンプレートで使用しているカラーセット

● ● ● ●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。

## 当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>求人サイト向け 無料ホームページテンプレート tp_job5</title>
を編集しましょう。
あなたのホームページ名が「サンプルジョブ」だとすれば、
<title>サンプルジョブ</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

## アイコン画像について（Font Awesomeの解説）

Phosphor Icons以外のアイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

## イラスト、写真素材について

当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。

## メニューについて

cssフォルダのstyle.cssを開き、「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

### 画面幅900px未満で開閉メニューになります

900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。

動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

## 検索ブロックの解説

cssフォルダのstyle.cssを開き、「#search」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
尚、このテンプレートでは実際の検索機能はついておりません。

## 「3カラム（または4カラム）」ブロックの解説

cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

デフォルトは3カラムです。
html側のclassを"list1 c4"とすると4カラム（小さな端末では2カラム）になります。
imageの代わりにiを置くと、トップページの「条件から探す」のようになります。

## トップページの「新着求人」「おすすめ求人」の横並びについて

cssフォルダのstyle.cssを開き、「.c2」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## トップページの「新着求人」や、一覧で使われている横長ブロックについて

cssフォルダのstyle.cssを開き、「.list3」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## トップページの「求人特集」について

cssフォルダのstyle.cssを開き、「.list2」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## トップページの「エリアから探す」について

cssフォルダのstyle.cssを開き、「.area」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## トップページの「求人掲載をご検討の企業様へ」について

cssフォルダのstyle.cssを開き、「.cta」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## お知らせブロックの解説

cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

## footerブロックの解説

cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

アイコンは、上で解説しているFont Awesomeです。

## デフォルトのパララックス効果の変更（.inview）

ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。

補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。

オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。

## テンプレートの使い方に迷った場合は

サポート掲示板をご利用下さい。

## 足りないレイアウトは「パーツ」で補えます

新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。

《Web Design:Template-Party》