TM_BBの静的HTMLサイトです

画像をクリックすると、サンプル歯科のトップページです。

それぞれのページもそれなりに作成しました。
挿入画像は無料の素材サイトさんからお借りしています。あくまでもイメージなのでご容赦ください。

アクセスページの地図は、大阪名物の『あべのハルカス』さんです。＾＾；
診療時間表は、デフォルトテンプレートの『会社概要』をアレンジしたものをスクショ(画面キャプチャー)で撮って、画像で掲載しています。

わざとリンクには入れていませんが、お問い合わせのデモページもあります。

画像または、 sampdental-set.zip をクリックするとダウンロードできます。

【info.txt】：使い方の説明です。
【sampdental-p1】：原本のコピーフォルダにそのまま追加してOKです。
【sampdental-p2】：各フォルダの中身だけを原本のコピーフォルダに追加して下さい。
【sampdental-p3】：『tpl_001(ピンク)』『tpl_002(グリーン)』『tpl_003(ブルー)』の３色のスタイルシートです。該当する色のフォルダを開いて２つのファイルを原本のコピーフォルダに追加して下さい。

加工セット・追記

最初、『tpl_003(ブルー)』だけを作成しましたが、同じデザインで３色あるのにブルーだけでは勿体無いので、【sampdental-p3】を追加しました。サンプルサイトはブルーだけです。

トップページ

『３カラム』の画像の横幅は 260px です。一番高くなった項目に合うように他の２つの画像の高さを調整するともっとスッキリすると思います。
または、『３カラム』の部分を横幅 922px の画像にしてしまうのもいいかも知れません。その場合は、スマホ表示になった時かなり小さくなります。

診療案内

文字数が多くなった場合は、テキストが画像を回り込みます。
診療科目ごとに１ページを使いたい時は、『診療案内』を目次ページとして利用する方法もあります。
参照： カテゴリー目次

症例報告

これも文字数が多くなった場合は、テキストが画像を回り込みます。
『診療案内』と同様に目次ページとして利用する方法もあります。
参照： カテゴリー目次

院長紹介

これも行数が多くなった場合は、テキストが画像を回り込みます。中途半端な位置で回り込む場合は画像の表示サイズを大きくするか、段落のキリのいいところに合わせて小さく表示するのがいいかも知れません。

小さく表示例：

医院案内

これは、 Lightboxでギャラリー でサムネイルをクリックするとポップアップ表示する仕様です。
元画像(ポップアップ後の大きい画像)のサイズは 640x420ピクセル です。PC表示でサムネイルを横に４つにしたかったので、『width="215" height="141"』としました。

※640x420ピクセルというのはイレギュラーな比率です。デジカメの場合は640x480ピクセルなので、サムネイルは『width="215" height="161"』となります。

アクセス

これは、地図にGoogleマップを採用しています。(大阪人なので『あべのハルカス』さんを例にしています。)
参照： Googleマップ埋め込み マジでめっちゃ簡単です。

お問い合わせ

先ずは、以下のリンクを確認してみて下さい。

『Google フォーム』を利用した『お問い合わせメールフォーム』をご用意しました。『contact.html』です。
参照： Google フォーム
※『Google フォーム』は、個人的には お客様(患者様)の表記の仕方に違和感を覚えますが、そこさえ気にしなければ、『お問い合わせ』『求人』等、複数のフォームを作り込めるのは魅力だと思います。

個人情報保護方針

以下のリンクを確認してみて下さい。

2019年現在、サイトには『Privacy Policy(個人情報保護方針)』を記載する事が望ましいとされています。
そこで、病院サイト用の雛形を作成してみました。雛形はネットで公開されていますので、ご自身の医院に沿ったものをアレンジして差し替えて下さい。
尚、『Privacy Policy(個人情報保護方針)』はフッターに入れるのが通例となっています。