当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>初心者向け 学習塾・習い事教室テーマ 無料ホームページテンプレート tp_beginner10_school</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE SCHOOL」だとすれば、
<title>SAMPLE SCHOOL</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
ロゴ画像がない場合はテキストでもOK。
当ページがテキストタイプのロゴになっています。画像がない場合は直接html側にサイト名を入力して使って下さい。
アイコン画像について（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冒頭にある、
:root {
というブロック内で主に色管理がされており、ここのカラーコードを変更する事でテンプレートの色調整が一括管理できます。
root内で色が変わらないブロックがある場合は、同じstyle.css内から「bg1」をテキスト検索してみて下さい。直接カラーコードの指定があると思うので、そちらを入れ替えればOKです。
いずれもコメントで解説が書かれているので読んでみて下さい。
nailsalonタイプのみ、背景が特殊なグラデーションになっている為、当解説の下の方を読んで下さい。
フォントサイズについて
cssフォルダのstyle.css冒頭で、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。
１つ目はstyle.cssの56行目前後に記載されている以下。
font-size: 13px;
２つ目はその数行下にある、画面幅900px以上の端末向けで、以下。
font-size: 15px;
お好みで変更して下さい。
メニューについて
画面幅900px未満で開閉メニューになります。この900pxの数値を変更したい場合は、jsフォルダのmain.jsの上の方にある、
const breakPoint = 900; // ここがブレイクポイント指定箇所です
の900の数値を変更して下さい。
ボタンタイプのメニュー
「資料請求・お問合せ」だけボタン風になっていますが、これは単に、
<li class="btn"><a href="contact.html">資料請求・お問合せ</a></li>
とclass="btn"がついているだけです。これがなければ他のメニューと同じ見た目になります。お好みで。
ul、ol要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
トップページのスライドショーの解説
cssフォルダのslide.cssで設定を行っています。
１枚目のアスペクト比が反映されます。
画像サイズはバラバラでも構いませんが、１枚目のアスペクト比が全てに反映されます。合わない画像は切り抜かれます。
画像の追加方法
現状、３枚構成ですが４枚目を追加したい場合、３枚目のブロックをコピペし、imgの行だけを４枚目の画像ファイル名に書き換えればOKです。
izakayaタイプのみ、ページ全体に背景画像が入っています
背景画像を入れ替える場合
imagesフォルダのbg.jpgを上書きして下さい。かなり暗めにしないと、上のテキストが読みづらくなるのでご注意を。
背景画像を外したい場合
cssフォルダのstyle.cssを開き、
/*大きな端末で見た際の背景画像*/
body::before {
content: "";
background: url("../images/bg.jpg") no-repeat center center / cover; /*背景画像をここで指定します*/
position: fixed;
width: 100%;
height: 100%;
}
のブロックを丸ごと削除して下さい。80行目あたりにあります。
nailsalonタイプのみ、ページ全体に複雑なグラデーションが入っています
このグラデーションは、海外のグラデーションの生成サイトで作ったものです。
https://csshero.org/mesher/（MESHER）
色を変更したい場合
ページの右側に色の選択肢ボックスがあり、削除したり変更、追加したりすることができます。
画面左側に出力されるグラデーションが表示されており、カーソルを上にもってくると、小さな丸い円が出て、グラデーションの場所をドラッグで移動することができます。
全てのグラデーションの基準となる背景色は、画面の右上の「Bg Color」という所です。デフォルトでは赤色になっているようです。
グラデーションが決まったら、画面右下にある「Export」ボタンを押し、別途出てきたページの右下にある「Copy to Clipboard」を押せばコピーできます。
コピー後は、テンプレートのcssフォルダのstyle.cssを開き、上の方にある、
body {
のブロック内にある、
background-color:
と、
background-image:
の設定と入れ替えて下さい。色によってはその下のcolor:も変更する必要があります。
単色にしたい場合
background-image:のブロックを削除し、background-color:の「hsla(228,39%,86%,1)」部分を直接カラーコード（例：「pink」や「#ae9ab6」など）と置き換えて下さい。
うまく編集できない場合は
サポート掲示板をご活用下さい。ご利用は無料です。