はじめに：準備するもの

編集を始める前に、以下の3つをご用意ください。

• テキストエディタ：コードを編集するためのソフトです。Windowsの「メモ帳」でも編集できますが、「VSCode」などの無料ソフトは文字に色が付いて見やすく、おすすめです。
• テンプレートファイル：ダウンロードして解凍した、index.htmlなどが入っているフォルダ。
• 掲載したい文章と写真：お店や会社紹介の文章、メニュー、写真などをご用意ください。

基本のキ！テキストを編集しよう

まずはお店の名前や説明文など、サイト内の文字を書き換えてみましょう。index.htmlファイルをテキストエディタで開いてください。

例えば、ヘッダーの店名を変更するには、以下の部分を見つけて書き換えます。

同じように、<p>タグや<h2>タグで囲まれた部分をご自身の文章に書き換えていくだけで、サイトの内容がどんどんオリジナルに変わっていきます！

印象が変わる！写真を差し替えよう

次に、サイトのメイン画像やギャラリーの写真を差し替えます。ご自身の用意した写真を、フォルダ内にあるimagesフォルダに入れてください。

一番簡単な方法は、元々ある画像ファイルと同じ名前にして上書きすることです。例えば、ギャラリーの123.jpgを差し替えたい場合、ご自身の写真を123.jpgという名前にしてimagesフォルダに上書き保存します。

HTMLを編集する場合は、<img src="images/〇〇.jpg">と書かれた部分のファイル名を、ご自身が用意した写真のファイル名に書き換えます。

お品書きページを編集しよう

menu.htmlを開くと、メニューの項目が並んでいます。項目を増やしたい場合は、以下の<div class="menu-list-item">から</div>までを丸ごとコピーして、下にもう一つ貼り付けてください。あとは中の文字や画像パスを書き換えるだけで、メニューが追加できます。

Googleマップを差し替えよう

index.htmlに埋め込まれている地図を、ご自身のお店の場所に変更します。

• Googleマップでご自身のお店の住所を検索します。
• 「共有」ボタンを押し、「地図を埋め込む」を選択します。
• 表示された<iframe src="...">というコードをコピーします。
• index.htmlの100行目あたりにある<iframe>と丸ごと入れ替えれば完了です！

ご予約フォームを有効にしよう

reserve.htmlのご予約フォームは、デザイン（見た目）のみで、そのままではメールを送信する機能はありません。ですが、ご安心ください！

プログラミング知識がなくても、簡単・高機能なフォームを設置できる姉妹サイト「Myフォームクリエイター」との連携がおすすめです。作成したフォームのコードを貼り付けるだけで、このテンプレートのデザインに馴染んだ形で、予約機能を追加できます。

いよいよ公開！サーバーにアップロード

完成したホームページのファイル一式を、ご契約のレンタルサーバーにアップロードすると、世界中の人があなたのサイトを見られるようになります。

サーバーへのアップロードには「FTPソフト」というものを使うのが一般的です。詳しい方法は、ご契約のサーバーのマニュアルをご確認ください。