TM_BBの静的HTMLサイトです

前項まででめっちゃザックリと『HTML』『CSS』を紹介しました。
『HTML』はWEBで表示させるための書式、『CSS』はHTMLを修飾するスタイリスト(スタイルシート)という感じでしたよね。
どちらも自分のサイトを作成するには、まずは『コピペ』からだと思います。

今回、初めてHTMLサイト作成にチャレンジする方は、『無料ホームページテンプレート.com』さんの公式マニュアル『実際にサイトを作ってみよう』を参照しましょう。とても丁寧にわかりやすく紹介して下さっています。
そのページに以下のようなものがあります。両方のリンクをクリックして見比べてみましょう。

→編集前のテンプレート：
https://f-tpl.com/sample/tpl_005/

→完成した「見本ボランティアセンター」のサイト：
https://f-tpl.com/sample/volunteer/

下が「見本ボランティアセンター」のサイト です。


下は「見本ボランティアセンター」の『完全コピペ』サイト です。

マニュアル通りに進めて行くと、「見本ボランティアセンター」と同じものが完成するはずですが、画像は含まれていないため、自分で画像を準備しないと、ローカルで確認してもイメージがつかめません。
「見本ボランティアセンター」を開いて、各ページの画像をデスクトップに作成した『名称未設定』等のフォルダ内にもらってきます。
全画像が取得できたら、ダウンロードした『tpl_005』＞『images』に移動させて上書きします。
その後、同じサイズの自分の画像と入れ替えるのが効率が良いと思います。

※今回は、サンプルサイトなので画像同様に、各HTMLを『ソース表示』でコピペしました。

ソース表示

ブラウザが『Google Chrome』の場合は、『Chrome』＞『表示』＞『開発 / 管理』＞『ソースを表示』です。
ブラウザが『Safari』の場合は、『Safari』＞『開発』＞『ページのソースを表示』です。
下は、Safariの表示例です。水色マーカー部分が『index.html』なので、全文をエディターにコピペします。
同様にして、他のページも同じ名前のHTMLとしてコピペで作成します。

・わたしが作成した コピペサイト の方は、コピペだと区別がつくようにテンプレート『tpl_006』の『style.css』と入れ替えてメインカラーをブルーにして、『ボランティア』→『ボランティアB』としました。

・写真ギャラリーもせっかくなので、『Lightbox』を入れて、画像がポップアップする仕様に変更しました。

・フッターのコピーライト部分は以下に変更します。
サイト名を書き換えて下さい。sを追加です。

<address>Copyright &copy; <script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();document.write(myYear);</script> サイト名. Design by <a href="https://f-tpl.com" target="_blank" rel="nofollow">https://f-tpl.com</a></address>