当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>ヘアサロン・美容室向け 無料ホームページテンプレート tp_hairsalon1</title>
を編集しましょう。
あなたのホームページ名が「Hair Salon」だとすれば、
<title>Hair Salon</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

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

ロゴ画像について

ロゴ画像は、生成AIで出力されたもので、DECORUTO（現在はロゴサイトとして運営中）で無料配布しております。
ご利用になられたい場合はそちらの利用規約をご一読の上でご活用下さい。

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

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

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

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

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

開閉メニューについて

ページ右上のハンバーガーメニューをクリックした際のメニューについては、htmlの下の方にある、
<div id="menubar">
のブロックになります。必要に応じて編集して下さい。

トップページのスライドショー画像または写真アニメーションについて

画像についてはAI出力されたものを梱包していますのでそのまま再利用頂いても構いませんが著作は当サイトにあります。
このテンプレートの公開時点では、AIサイトによると「著作は作り出した人のもの」（＝当サイト）という規約になっているようです。

AI出力でないリアルな画像に入れ替えたい場合は写真ACさん（無料写真サイト）がおすすめです。

トップページのメイン画像 タイプ１（CSSスライドショータイプ）について

※テンプレートフォルダ名に「_slide_」とついているタイプが該当します。
cssフォルダのslide.cssの前半にこのスライドショーのスタイル設定があります。

10:5.5のアスペクト比率の背景画像をレスポンシブ化しています
サンプルテンプレートでは、10:5.5の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、表示されない部分が出てきますので、10:5.5以外の比率の画像を全部表示させたければ以下を調整して下さい。

cssフォルダのslide.cssの、
.home header {
の中にある、
padding-top: 55%;
を調整します。55というのは、5.5÷10=0.55の事です。
もし、2:1の画像を使いたければ、1÷2=0.5
padding-top: 50%;
と書き直せばOKです。

画像を入れ替えたい場合
「1.jpg」「2.jpg」「3.jpg」の3枚の画像を用意してimagesフォルダに上書きして下さい。
大きさはバラバラでも構いませんが、適当に切り抜かれてもおかしくない画像を使って下さい。
また、拡張子が「jpeg」や「JPG」と少し違った場合にうまく表示できない可能性があるので梱包画像の拡張子と合わせて下さい。拡張子を変更したい場合はslide.css側を直接変更しても構いません。
画像は容量が軽くなるようにできるだけ圧縮して下さい。容量が大きいと初動がガタつきます。

固定画像にしたい場合
cssフォルダのslide.cssを開き、冒頭の
「/*トップページのスライドショーのキーフレーム設定」
のブロックを全て削除。

次に、index.htmlから使う画像の行だけを残してあとは削除すればOKです。

速度や枚数などの調整
cssフォルダのslide.cssで行って下さい。解説も入っています。
スライドショーに関する詳しい使い方はこちら。（「imgタグを使っていないタイプ」をご参照下さい）

トップページのメイン画像 タイプ２（写真アニメーションタイプ）について

※テンプレートフォルダ名に「_photo_」とついているタイプが該当します。
cssフォルダのslide.cssの後半にこの写真アニメーションのスタイル設定があります。

<div id="thumb-photo">
<img src="images_thumb/1.jpg" alt="">
<img src="images_thumb/2.jpg" alt="">
<img src="images_thumb/3.jpg" alt="">
<img src="images_thumb/4.jpg" alt="">
<img src="images_thumb/5.jpg" alt="">
<img src="images_thumb/6.jpg" alt="">
<img src="images_thumb/7.jpg" alt="">
<img src="images_thumb/8.jpg" alt="">
</div>
が、写真アニメーションで使う画像です。お好みで入れ替えて下さい。

<div class="no-slide">no-slide</div>
の１行は背景画像の読み込み箇所です。
この設定は、スライドショータイプの設定と関連するので、設定もスライドショーの方(slide.cssの前半)に入っています。

<div class="dot">dot</div>
の１行は写真を少し暗くし、ドットを追加する為の行です。背景写真をそのまま出したいならこの１行は削除します。
こちらも設定はslide.cssの前半のスライドショーの方です。

トップページのサムネイルスライドショーについて

slickを使ったスラドショーになっています。slick 公式サイト
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

写真の縦横サイズを予め揃えておくと綺麗に並びます。
枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick-thumbnail.jsで調整できます。

slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick-thumbnail.js」。

トップページの「お知らせ」ブロックのアイコンについて

アイコン内のテキストはhtml側で直接入力されていますので必要に応じて編集して下さい。

背景色は、cssフォルダのstyle.cssの、
.new dt span
や、
.new dt span.icon-bg1
や、
.new dt span.icon-bg2
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「.new dt span.icon-bg2」ブロックをコピペし、.icon-bg2部分を.icon-bg3などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg3">〜〜〜</span>
などとすればOKです。

尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。

背景画像入りのh2見出しについて

ページ冒頭の背景画像がついたh2見出しは以下のような構成になっており、以下の赤色の文字部分は必要に応じて入れ替えて頂く箇所になります。
<h2 id="任意のid" class="title">
<span>英語のテキスト<span>日本語のテキスト</span></span>
</h2>

一旦、h2要素の中身をspanで囲み、そこに背景の土台やドット柄を作っており、その中の日本語用のテキストをさらにspanで囲んで小さな文字にしています。

任意のidは、背景画像の読み込み指定です。設定はcssフォルダのstyle.cssの
main h2#about {
以降にあります。必要に応じて編集・追加して下さい。

class="title"は背景画像見出しタイプでの共通設定で、フォントやマージンなどの指定がされています。変更したい場合は、cssフォルダのstyle.cssの、
main h2.title {
を編集して下さい。

文字サイズについて

サイトの全体的な文字サイズを変更したい場合は、cssフォルダのsytle.css冒頭にある、
html,body {
の中にある「font-size」で行って下さい。端末サイズ別で２箇所あります。

上記以外に（文字サイズ以外でも）、remという単位が多く使われていますが、それは上の「html,body」の「font-size」に対してのサイズ指定になります。
もし、html,bodyが16pxの場合、2remと指定していれば32pxの事。0.5remと指定していれば8pxの事になります。

remの他、emという単位もありますが、それは親要素に対してのサイズ指定です。
特に理由がない場合はremを使うと直感的に操作できるかと思います。

出現アニメーションについて

以下のような出現のアニメーションサンプルをsample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。

スタイリストの名前

ここにコメントを入れます。サンプルテキスト。

スタイリストの名前

ここにコメントを入れます。サンプルテキスト。

スタイリストの名前

ここにコメントを入れます。サンプルテキスト。

汎用開閉ブロックのサンプル

以下は「よく頂く質問」を仮定してサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"

ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。