会社概要

大見出しが必要ならここを使います

見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
所在地	Google Mapで地図を埋め込みたい場合はマニュアルをご覧下さい。

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

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

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。
• 2022年6月でMicrosoftのIEサポートが終了したのに伴い、弊社テンプレートもIE対応(バグ対応など)を終了しました。

当テンプレートの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

メインメニューについて

900px未満で開閉ブロックになります。
この900pxのポイントを変更したい場合、css/style.css内のブレイクポイント
@media screen and (min-width:600px) {
の他、js/main.js内の
var winBP = 900;
の数値も合わせて変更して下さい。

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

「SERVICE」メニューはドロップダウンメニューになっています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となる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>の中身は上記のように空っぽ（""）にして下さい。
"#"と入れてしまうとクリックした際にページ上部に移動してしまうので注意して下さい。また、"#"と入れてしまうと小さな端末でタップした際にドロップダウンが開かなくなってしまいます。

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

トップページのスライドショーには、slickを使用しています。
slick 公式サイト

slickのスタイルは、cssフォルダのstyle.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。

画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに１枚追加したい場合、現状では、
<div class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
</div>
ですが、これに１行加えるだけです。
<div class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</div>

画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<div><a href="index.html"><img src="images/1.jpg" alt=""></a></div>

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

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

スライドショーでなく、固定画像にしたい場合。
1. htmlのスライドショー画像のうち、残したい画像以外を削除。
2. html下部にある、「スライドショー（slick）」のブロックを削除。
3. jsフォルダのslick.jsファイルも合わせて削除しておきます。
4. 上記の作業までで固定画像になりますが、関連スタイルを削除しておきたいなら、cssフォルダのstyle.cssの、
/*スライドショー（slickを使用）
からのブロックを全部削除して下さい。

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

「その他」「サービス」など、テキスト部分は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です。

「FAQ」ページで使っている開閉ブロックについて

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