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

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

まず、htmlソースが見れる状態にして、
<title>ファッションブランド・衣料メーカー・服屋・古着屋・アパレルショップ向け 無料ホームページテンプレート tp_fashion1</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE COMPANY」だとすれば、
<title>SAMPLE COMPANY</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

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

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

### ロゴのaltタグも変更しましょう

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

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

imagesフォルダに入っていない画像（アイコン）は主にFont Awesomeの素材です。（※マップ上のアイコンは、ブラウザのアイコンです）
Font Awesome 公式サイト
Font Awesome アイコン一覧

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

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

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

## 色の管理について

cssフォルダのstyle.css冒頭にある、
:root {
というブロック内で主に色管理がされており、ここのカラーコードを変更する事でテンプレートの色調整が一括管理できます。
root内で色が変わらないブロックがある場合は、同じstyle.css内から「bg1」をテキスト検索してみて下さい。直接カラーコードの指定があると思うので、そちらを入れ替えればOKです。
いずれもコメントで解説が書かれているので読んでみて下さい。

nailsalonタイプのみ、背景が特殊なグラデーションになっている為、当解説の下の方を読んで下さい。

## メニューについて

画面幅600px未満で開閉メニューになります。この600pxの数値を変更したい場合は、jsフォルダのmain.jsの上の方にある、
const breakPoint = 600; // ここがブレイクポイント指定箇所です
の600の数値を変更して下さい。

## ul、ol要素

1. これはol要素です。サンプルテキスト。
2. これはol要素です。サンプルテキスト。
3. これはol要素です。サンプルテキスト。

- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。

## トップページの動画の解説

- 画面幅800px以下の端末向けに別の動画を使いたい場合は、htmlのsource要素のsrc属性で指定されている動画ファイル名を変更して下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。
- テキストブロックはデフォルトでセンタリングされますが、左寄せしたいなら「text」を「text left」に、右寄せにしたいなら「text right」にして下さい。

## うまく編集できない場合は

サポート掲示板をご活用下さい。ご利用は無料です。

《Web Design:Template-Party》
WEB限定クーポン