## 当テンプレートの使い方（総合）

### titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。

まず、htmlソースが見れる状態にして、
<title>WEB制作・システム開発サイト向け（ランディングページタイプ） 無料ホームページテンプレート tp_biz63</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、
<title>SAMPLE COMPANY</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

### copyrightを変更しましょう。

続いてhtmlの下の方にある、
Copyright© SAMPLE COMPANY All Rights Reserved.
の部分もあなたのSAMPLE COMPANYに変更します。

### metaタグを変更しましょう。

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

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

### テンプレートの色変更について（CSSカスタムプロパティ）

style.css冒頭の、
:root {
からの数行で全体で複数箇所使う色の一括管理しています。

例えば、このrootで、
--primary-color: #ffcc00;
という指定がある場合、この色を実際に読み込むには、
var(--primary-color)
というコードを書きます。

具体的には、文字色なら、
color: var(--primary-color);
背景色なら、
background-color: var(--primary-color);
などです。
ここの「primary-color」などの部分は決まっているわけではないので自由に変更できます。（今あるものを変更する場合、下で実際に読み込んでいるコードも合わせて書き換える必要があります）

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

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

Font Awesome 公式サイト
Font Awesome アイコン一覧（※バージョン6）

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

#### Font Awesomeを使う為に必要なタグ、ファイル類。

cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

#### 何年も経過した場合、動作に問題が出てくる可能性があります。

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