## 当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>弁護士/行政書士/社労士/税理士/コンサル等向け 無料ホームページテンプレート tp_professionals1</title>
を編集しましょう。
あなたのホームページ名が「東京沖縄法律事務所」だとすれば、
<title>東京沖縄法律事務所</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

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

## アイコン画像について（Bootstrap Iconsの解説）

トップページの「取扱分野」の６つのメニューに使っているアイコンなどは、Bootstrap Iconsの素材です。
Bootstrap Icons

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

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

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

## イラスト、写真素材について

当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ライセンス契約により、haconanaポイント特典付与を行っている場合もあるので、ご予定の場合はライセンスページをチェックして下さい。（※ポイント付与特典は予告なく終了する場合もあります）

## テンプレートの色変更について

cssフォルダのstyle.css冒頭に、テンプレートで主に使っている色管理設定があります。
そこのカラーコードを変更するだけで、テンプレ全体の色が変わります。

## メニューについて

ヘッダー内メニューと、開閉メニューの２つが入っています
開閉メニューのコードは、htmlの下の方にあります。ヘッダーのメニューとは別になるので注意して下さい。

ヘッダー内メニューは、800px未満で非表示になります。この800pxの数字を変更したい場合は、cssフォルダのstyle.cssの、
/*header内のメニュー（※開閉メニューとはブロックが異なります）
の中にある、
@media screen and (max-width:800px) {
の800pxの数字を変更して下さい。

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

ドロップダウンメニューについて
当ページのヘッダーメニューのようにドロップダウンも使えます。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

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

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

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

cssフォルダのslide.cssで設定を行っています。

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

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

小さな端末向けの画像
imagesフォルダに入っている、
1s.jpg、2s.jpg、3s.jpg
を上書きして下さい。当テンプレの場合は、サイズを圧縮したものを入れています。
もし小さな端末用画像を使いたくない場合は、pictureのコードを使わず、通常のimg部分だけ抜き出して使って下さい。
↓ ビフォー
<picture><source media="(max-width: 800px)" srcset="images/1s.jpg"><img src="images/1.jpg" alt=""></picture>
↓ アフター
<img src="images/1.jpg" alt="">
コード書き換えが面倒なら、大きな端末用画像を複製し、ファイル名だけ書き換えてもOKです。

このテンプレの場合は、画面幅800px以下の場合の条件のみ入っていますが、これに、「縦向き端末」という条件も加えるなら、
media="(max-width: 800px) and (orientation: portrait)"
にすればOKです。cssのメディアクエリと同じように設定できるので、他に必要条件があれば設定して下さい。

テキストの配置について
<div class="text">
の場合はセンタリング。（スライドショー１枚目で使っている設定）
<div class="text left">
の場合は左寄せ。（スライドショー２枚目で使っている設定）
<div class="text right">
の場合は、右寄せになります。（スライドショー３枚目で使っている設定）
お好みで設定して下さい。

## 色付きの背景色は３タイプから選べます

濃い色順に、
class="bg bg-primary"
class="bg bg-secondary"
class="bg bg-light"
です。先頭の「bg」は必ずつけて下さい。bgの後に半角スペースをあけて、使いたい色を追加します。
基本的にはsection用です。

トップページの「選ばれる理由」のような、角丸にしたい場合は、さらに半角スペースを追加し、
border-radius1
を追加すればOK。（例：class="bg bg-primary border-radius1"）

## 大きな装飾文字について

sectionの開始タグの上の行に追加して下さい。左寄せ（text-kazari lまたは、text-kazariのみでもOK）、中央（text-kazari c）、右寄せ（text-kazari r）とclassを切り替えればOKです。

Why Choose Us
Why Choose Us
Why Choose Us

## お客様の声ブロック

画像ブロックの総数は、「最低4セット」以上の「偶数」にして下さい。
801px以上で4列、800px以下だと2列になります。
スライドの速度はjsフォルダのmain.js内の、
お客様の声ブロックで使用しているサムネイルのスライド
のブロックで調整できます。

## ul、ol要素

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

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

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

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

《Web Design:Template-Party》