会社概要

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>老人ホーム・介護施設・デイサービス向け 無料ホームページテンプレート tp_home3_re</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関連のファイルのバージョンを変更して動作するか確認してみて下さい。

上部メニューについて

画面幅が900px未満で、メインメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの冒頭にある、
const breakPoint = 900; // ここがブレイクポイント指定箇所です
の、900の数値を変更して下さい。

動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

上部メニューのドロップダウンメニューについて

ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

OKな例
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>

NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>

親メニューにリンクを貼る場合の注意点。
スマホなどのタッチ端末だとドロップダウンの開閉用に動作するので、リンク先には移動しません。注意して下さい。

メインメニュー直下の大きな背景画像入りの見出し

背景画像の変更をしたい場合は、style.cssから「各ページの大きな背景入りの見出し」でテキスト検索して下さい。
rgba(0,0,0,0.6)
という部分が、黒く半透明に塗りつぶしている箇所です。もっと写真よりに明るくしたいなら、
rgba(0,0,0,0.3)
などにして様子を見て下さい。
同じ行にあるurl〜の部分が画像の読み込み箇所です。

トップページのスライドショーの解説

１枚目のアスペクト比が反映されます。
画像サイズはバラバラでも構いませんが、１枚目のアスペクト比が全てに反映されます。合わない画像は切り抜かれます。

画像の追加方法
現状、３枚構成ですが４枚目を追加したい場合、３枚目のブロックをコピペし、imgの行だけを４枚目の画像ファイル名に書き換えればOKです。

スムーススクロール

トップページの一番下の「こちらをご覧下さい。」からこのページへのアンカーリンクを貼っています。
ローカルだと、タイムラグが気になるかもしれませんが、サーバー上だとちょうどいいぐらいになると思います。ローカルに合わせてしまうと、サーバー上でクリックした際、スムーススクロール部分が見えず、直接リンク先に移動したように感じます。
変更したい場合は、js/main.jsの「スムーススクロール」ブロックの最後の方の、
}, 700);
の数字で調整できます。1000が１秒。
500ぐらいにすれば、ローカルだとちょうどいいように見えると思いますが、サーバーだと上に書いたように直接リンク先に飛んだように見える場合あり。

ul、ol要素

1. これはol要素です。サンプルテキスト。
2. これはol要素です。サンプルテキスト。
3. これはol要素です。サンプルテキスト。

• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。

1カラムで使いたい場合

こちらをご覧下さい。