会社概要

2021年10月「以前」に弊社テンプレートを利用した事のあるお客様へ

2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
※今後しばらくテンプレートの手直しが入るかもしれません。

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• IE10以前は考慮しておりません。Microsoft社のIEサポートが2022年6月で終了する為、IE11の動作チェックも近いうちに終了させて頂きます。
• floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。

当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

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

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

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

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

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

トップページのスライドショー（vegas）の解説

トップページのスライドショーには、vegasを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/

上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。

vegasの設定は、jsフォルダのvegas.jsにあります。枚数を追加したい際もここに追加するだけでOKです。
※閲覧しているウィンドウサイズにより、スライドショー画像はトリミングされますので、切り抜かれてもおかしくない画像をご用意下さい。

vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある、「vegas.min.css」の読み込みの１行。
2. html下部にある、「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
3. その下にある、「スライドショー（vegas）」のブロック。
4. jsフォルダ内の「js/vegas.js」。

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

スライドショーでなく、固定画像にしたい場合。
html下部にある、「スライドショー（vegas）」からの数行のタグを削除。
jsフォルダのvegas.jsファイルも合わせて削除しておきます。

次に、cssフォルダのstyle.cssを開き、
#mainimg-inner {
の設定内に、以下の背景画像の読み込みタグを１行追加。以下はimagesフォルダの1.jpgを読み込む例です。
background: url(../images/1.jpg) no-repeat center center / cover;

最後に、スクロールを促すGifアイコンを直接html側から削除して下さい。以下の１行部分です。
<div class="scroll"><img src="images/arrow1.gif" alt=""></div>

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

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

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

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

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

上部のメインメニューについて

メニュー数は自由に変更できます。
CSSの調整は不要ですが、文字数が多い場合やメニュー数を増やした場合は、画面幅によって見た目が悪くなります。

画面幅900px以上で横並びにレイアウトがチェンジされます。（それ未満は開閉メニュー）
この基準サイズ（ブレイクポイント）を変更したい場合は、cssフォルダのstyle.cssの、
@media screen and (min-width:900px) {
の900の数字を変更します。
続いて、jsフォルダのmain.jsの、
var winBP = 900; //ブレイクポイント
という箇所を探して、ここの数字も合わせて変更して下さい。
どちらか一方だけ変更するとレイアウトに問題が出るので必ずセットで変更するようにして下さい。

ドロップダウンメニューについて

「求人一覧」と「よく頂く質問」のメニューはドロップダウンメニューになっています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

※OKな例：
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>

※NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>

親の<a>の中身は上記のように空っぽ（""）にしておいて下さい。
"#"と入れてしまうとクリックした際にページ上部に移動してしまいます。

ドロップダウンの親メニューについているアイコンもFont Awesomeです。
cssフォルダのstyle.cssの「a.ddmenu::before」で読み込んでいます。
詳しい内容は、上で説明している「アイコン画像について」をお読み下さい。

「ピックアップ求人情報」について

求人一覧ページの冒頭にあるスライドショーには、slickを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
slick 公式サイト

画面内に表示させる枚数を変更したい場合
jsフォルダのslick.jsの「slidesToShow」の数値を変更して下さい。
端末サイズごとに３段階（3枚ずつ、2枚ずつ、1枚ずつ）にわけてブロック表示される指定になっています。

同じ速度でなめらかアニメーションしたい場合
jsフォルダのslick.jsの、
autoplaySpeed: 4000,
を、
autoplaySpeed: 0,
に変更し、新たに以下の２行を追加すればOKです。「8000」は速度なのでお好みで変更して下さい。
speed: 8000,
cssEase: 'linear',

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「ピックアップスライドショー（slick）」のブロック。
3. jsフォルダ内の「js/slick.js」。

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

トップページの「お知らせ」ブロックのアイコンについて

「その他」「求人情報」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span
や、
#new dt span.icon-bg1
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「#new dt span.icon-bg1」ブロックをコピペし、.icon-bg1部分を.icon-bg2などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg2">〜〜〜</span>
などとすればOKです。

尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。

「よく頂く質問」で使っている開閉ブロックについて

汎用的な開閉ブロックなので、どこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"

フォントサイズ（rem）について

cssフォルダのstyle.cssで、基準となるフォントサイズを２箇所、pxで記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOK。

１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 14px;
２つ目は下の方にある、画面幅900px以上の端末向けで、以下。
font-size: 17px;

「rem」の単位がついたフォントは、上の２箇所あるpxのサイズに対して「相対的」に出しているサイズになります。
例えば、900px未満の画面幅の時の基準サイズは「14px」なので、他の要素などで28pxで表示させたい場合は、
28px ÷ 14px = 2rem(28px)
となります。（cssの指定は、font-size: 2rem;　となる。）

10pxにしたい場合も同様です。この場合、
10px ÷ 14 = 0.7142...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。

または計算などせず、「見た目」でremの数値を決めてしまってもいいでしょう。
実際このテンプレートのremは、厳密に割り出したわけじゃなく、雰囲気(何となく適当)で指定しています。

ちなみに、emも数カ所使っていますが、これは親の文字サイズを基準とした文字サイズ指定になります。