当テンプレートの使い方
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のsource要素のsrc属性で指定されている動画ファイル名を変更して下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。
- テキストブロックはデフォルトでセンタリングされますが、左寄せしたいなら「text」を「text left」に、右寄せにしたいなら「text right」にして下さい。
うまく編集できない場合は
サポート掲示板をご活用下さい。ご利用は無料です。