病院・歯科医院（クリニック）サイト向け無料ホームページテンプレート tp

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>病院・歯科医院（クリニック）サイト向け無料ホームページテンプレート tp_clinic7</title>
を編集しましょう。
あなたのホームページ名が「サンプル歯科医院」だとすれば、
<title>サンプル歯科医院</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

h1の内容も書き換えましょう。
htmlの上の方に、
○○市の歯医者なら○○歯科医院｜痛みに配慮した歯科療法
という部分があるので、ここも書き換えて下さい。

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

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

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

ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
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関連のファイルのバージョンを変更して動作するか確認してみて下さい。

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

当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。

このフレームで使用しているカラーセット

● ● ●
css/theme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。

メニューについて

html側にメニューブロックが２箇所（開閉メニューのmenubarと、ヘッダー下メニューのmenubar2）あります。それぞれ書き換えて下さい。

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

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

トップページのメイン画像の解説

メイン画像は「.mainimg」のスタイルを使用しています。
cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

画面幅700px以下では、小さな端末向け画像（images/mainimg1_s.jpg）が適用されます。この指定は、htmlのsrcsetの部分です。必要に応じて書き換えて下さい。大きな端末用と同じ画像でいい場合は、同じファイル名にしておけばOKです。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。

ul、ol要素

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

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

デフォルトのパララックス効果の変更（.inview）

ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。

補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。

オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。