文章の編集

テンプレートのサンプル文字を編集してみよう!

Step1

解凍してできたフォルダを開きます。
フォルダ内にある『index.html』をダブルクリックしてみよう。

文章の編集方法イメージ図

すると!テンプレート表示を確認することができるよ。

文章の編集方法イメージ図

Step2

では、文字など修正していきましょう!

『TeraPad』を開いて『ファイル』の『開く』をクリックします。
(※ここではエディタでの編集を説明します。ホームページ ビルダーやDreamweaverなどお持ちの方はそちらで編集可能です)

文章の編集方法イメージ図

『ファイルを開く』画面がでてくるので、ダウンロードして解凍したフォルダを選択して『開く』をクリック。

文章の編集方法イメージ図

するとフォルダ内が表示されるので、まずはトップページファイルの『index.html』を選択して『開く』をクリックして編集していきましょう。
(※当サイトではトップページのファイル名は「index.html」としてます)

文章の編集方法イメージ図

Step3

HTML文章が書かれたエディタが開きます。
編集前のサンプル文章を削除して、文章を入力していきます。

文章の編集方法イメージ図

  • HTML文章には、初心者の方でもわかるように、何を表しているかHTML文の前後に補足テキストを書いてるから安心!
    <!-- ▼ここからサイト名 -->
    <!-- ▼ここからメニュー -->
    <!-- ▼ここから見出し -->
    <!-- ▼ここから本文 --> 他
    なのでその間にある文章や画像がどこの意味合いかわかるよ!

例えばサイト名を編集するとします。
『<!-- ▼ここからサイト名 -->』と分かるようになってるので探してみてね。

文章の編集方法イメージ図

文章を削除するには、編集したい文章の末尾を選択し、不要な文章を『Backspaceキー』を使用して削除します。

削除した部分に文章を入力。

文章の編集方法イメージ図

後は、作成したいホームページの構成と内容を考えながら『メニュー』『見出し』『本文』の編集をしてね。

Step4

  • 全ページのタイトルとフッターの変更を忘れずに!

この2箇所には、あなたが作成したホームページ名を入れてあげてね。

文章の編集方法イメージ図

文章の編集方法イメージ図

Step5

編集が終わったら、『ファイル』の『上書き保存』をクリック。

文章の編集方法イメージ図

『index.html』をダブルクリックしてタイトル名が変わったか確認してみよう!

文章の編集方法イメージ図

文章の編集方法イメージ図

後は、他のサンプル文字の場所を編集すれば、あなただけのオリジナルが完成です!!