当テンプレートの使い方
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で設定を行っています。（スライドショー搭載タイプを土台に作ったので、slideとついていますが、このテンプレは動画タイプです。）
大きな端末向け、小さな端末向けの動画の切り替え
他の画像タイプ（静止画、スライドショー）は画面幅を変更するとリアルタイムに切り替わりますが、この動画タイプはリロードしないと切り替わりません。jsで管理すればリアルタイムの切り替えもできますが、あまり意味がないのでやりませんでした。
小さな端末向けの画像
imagesフォルダに入っている、
1s.mp4
を上書きして下さい。当テンプレの場合は、サイズを圧縮したものを入れています。
もし小さな端末用画像を使いたくない場合は、1s.mp4の読み込みの１行を削除して下さい。
このテンプレの場合は、画面幅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です。
お客様の声ブロック
画像ブロックの総数は、「最低4セット」以上の「偶数」にして下さい。
801px以上で4列、800px以下だと2列になります。
スライドの速度はjsフォルダのmain.js内の、
お客様の声ブロックで使用しているサムネイルのスライド
のブロックで調整できます。
ul、ol要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
出現アニメーションについて
以下のような出現のアニメーションサンプルを_sample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。
