タイトル
ここに説明を書きます。サンプルテキスト。
DLフォルダ名の語尾に「_LP」とついたタイプ
ダウンロードフォルダ名の語尾に「_LP」とついたタイプのみ、ランディングページを想定したコンテンツになっています。
その他は主に商品カタログをメインとした構成です。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>商品一覧（カタログ型）に特化した無料ホームページテンプレート tp_catalog1</title>
を編集しましょう。
あなたのホームページ名が「サンプルカンパニー」だとすれば、
<title>サンプルカンパニー</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴの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関連のファイルのバージョンを変更して動作するか確認してみて下さい。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ライセンス契約により、haconanaポイント特典付与を行っている場合もあるので、ご予定の場合はライセンスページをチェックして下さい。（※ポイント付与特典は予告なく終了する場合もあります）
テンプレートの色変更について
cssフォルダのstyle.css冒頭に、テンプレートで主に使っている色管理設定があります。
そこのカラーコードを変更するだけで、テンプレ全体の色が変わります。
もちろん、各スタイルごとに直接カラーコードを指定しても構いません。
メニューについて
メインメニューは開閉ブロックタイプになります。
開閉メニューのコードは、htmlの下の方にあります。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
ul、ol要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
トップページのメイン画像の解説
単色のheaderの上にメイン画像が重なる形で構成されています。（tp_catalog1_furnitureのみheaderに背景画像を指定しています。）
メイン画像やヘッダーの調整はcssフォルダのstyle.cssの「header」や「mainimg」で調整できます。画面幅が800px以下になった場合にレイアウトが変わるので、制作時は小さな端末でもチェックしながら作業して下さい。
商品一覧（カタログ型）ブロックについて
画面幅800px以上で4カラム、800px未満で2カラムになります。
変更したい場合は、cssフォルダのstyle.cssの「.list」で検索をかけてみて下さい。説明もあります。
カラムが余った際に背景が真っ黒になってしまうのが嫌なら、listの外枠だけ残して下さい。
<div class="list">
</div>
以下（↓）の一番最後がlistごと空にしたタイプ（背景が真っ黒）。その隣が上記のように中身だけコードを外した場合（他の商品と同じ背景色）の例。
外側sectionのbleed-xを外すと左右にマージンが入ります
お好みで選んで下さい。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。