ホームページテンプレートのdecoweb > 編集方法 > サブページを作りたい

サブページを作りたい

トップページは作成できたけど、サブページを作成したい方はこちら!

Step1

まずはトップページあるメニューからサブページを確認してみよう!

フォルダ内にある『index.html』を『TeraPad』を開いて『ファイル』の『開く』をクリックしてHTML文章を開きましょう。

サブページを作りたい方法イメージ図

サブページを作りたい方法イメージ図

サブページを作りたい方法イメージ図

Step2

メニューが書いてある場所を探そう。
『<!-- ▼ここからメニュー -->』と分かるようになってるので探してみてね。

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

HTML文章のメニュー部分を見ると、一番上が『index.html』となってるね。これは『文章の編集』Step2でも書いたようにトップページを指しているよ。その他の『sub.html』はサブページを指しているよ。

サブページを作りたい方法イメージ図

当サイトでは、トップページ以外にサブページとして『sub.html』を用意してるので、コピーしてファイル名を変えて各サブページを作成していってね。

サブページを作りたい方法イメージ図

メニューにあるリンクが全て『sub.html』のままだと全て同じ1ページにしかジャンプしないのでファイル名の変更とメニューのリンク名を変えるのを忘れないでね!

Step3

サブページの作成をしてみよう!

【例 】として『Profile』ページを作成します。

まずは『sub.html』をコピーします。
『sub.html』の上でマウス右をクリックして『コピー』を選んでマウス左をクリック。

サブページを作りたい方法イメージ図

同じフォルダ内の白い余白部分にカーソルを持っていって、マウス右をクリック。『貼り付け』を選んでマウス左をクリックしてコピーを作成してね。

サブページを作りたい方法イメージ図

コピーしてできたファイルの名前を変更しよう。ここでは『Profile』ページを作成するのでファイル名も『profile.html』とします。

サブページを作りたい方法イメージ図

コピーしてできたファイルの上でマウス右をクリックして『名前の変更』を選んでマウス左をクリック。

サブページを作りたい方法イメージ図

ファイル名が反転しているので、そこに『profile.html』と変更してね。

  • 変更した名前の後に『.html』を忘れずにつけてね!

サブページを作りたい方法イメージ図

変更したい部分を削除して『profile』と入力し『Enter』をクリック。

サブページを作りたい方法イメージ図

後は、そのページの本文等を編集をしてね。文章の編集が分からない方は『文章の編集』へ。

他にページを作成する時は、『sub.html』をコピーしてファイル名を変更して作成してね。
又は、もうページを作らない時は、『sub.html』は不要になるので削除してね。

Step4

文章の編集が終わったら、トップページ、サブページ(ここでは『Profile』ページ)のメニュー名とリンクの変更を忘れずにしよう!

『index.html』、『profile.html』それぞれのファイルを『TeraPad』で開いてメニュー部分を編集します。

  • HTML文章のリンクを表示させる文章は
    <a href=”●●.html”>■■■■■</a>
    ●部分にHTMLファイル名
    ■部分にメニュー名

サブページを作りたい方法イメージ図

サブページを作りたい方法イメージ図

編集が終わったら、『ファイル』の『上書き保存』をクリックして確認してみよう!メニューの表示とクリックすると『Profile』ページへリンクが変わってるよ。

サブページを作りたい方法イメージ図