当テンプレートの使い方
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要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
トップページのスライドショーの解説
- 画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。
- デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3をimg4に書き換えて、画像ファイル名も４枚目に変更して下さい。
- １枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。
うまく編集できない場合は
サポート掲示板をご活用下さい。ご利用は無料です。