カンタン作成ガイド STEP3 コンテンツページを作る
最後にコンテンツを作ります。
ここはちょっと作業ボリュームが多いですが頑張りましょう。
「index.html」を編集する
まずは「index.html」をテキストエディタで開きましょう。
HTMLソースの部分に「★」で囲まれた部分がいくつかあると思います。
：
●★コンテンツ名★<br>
├<a href="2nd.html">★メニュー名★</a><br>
├<a href="2nd.html">★メニュー名★</a><br>
└<a href="2nd.html">★メニュー名★</a>
：
この「★」で囲まれた部分を、あなたの作ろうとしているサイトに合わせて書き換えていきます。メニュー部分に関しては、下記のように項目数によって行を追加したり削除したりして調整してください。
●はじめに<br>
└<a href="2nd.html">自己紹介</a><br>
<hr>
●コンテンツ<br>
├<a href="2nd.html">日記</a><br>
└<a href="2nd.html">掲示板</a><br>
コンテンツページを用意する
次にコンテンツページを用意します。「2nd.html」を複製してファイルを増やしていきましょう。
複製したファイルの名前は必ず半角英数字にします。
そして「2nd.html」の複製したファイルも「index.html」と同様にテキストエディタで開き内容を書き換えていきます。
自己紹介
<!--コンテンツ--> <hr>
はじめまして。私は○○といいます。このサイトでは…
リンクをする
さらにファイルとファイルを繋げるためリンクを張ります。
「index.html」では、主にメニュー部分を書き換えます。
●はじめに<br>
└<a href="2nd.html">自己紹介</a><br>
<hr>
●コンテンツ<br>
├<a href="2nd.html">日記</a><br>
└<a href="2nd.html">掲示板</a><br>
メニューの赤字の部分を、それぞれ複製した該当ファイルの名前に書き換えます。
●はじめに<br>
└<a href="page01.html">自己紹介</a><br>
<hr>
●コンテンツ<br>
├<a href="page02.html">日記</a><br>
└<a href="page03.html">掲示板</a><br>
これで、「index.html」はひとまず完成です。
ちなみに、「2nd.html」の複製したファイルも下記のようにトップページへ戻るリンクが記述されています。トップページのファイル名は「index.html」なので書き換える必要がありません。
<hr>
<a href="index.html">ﾄｯﾌﾟへ戻る</a>
※トップページのファイル名が変更されれば、そのファイル名に合わせて書き換える必要があります。
完成
これらの作業を一通り繰り返せば携帯サイトの出来上がりです！
もちろん、まだ細かい部分の説明は省いて、基本構築の流れを中心に説明しています。初心者の方であれば、まだよく把握できていない部分も多いと思います。
さらなるステップアップとして、このサイトのコンテンツをいろいろ見てください。目的の解説を見つけることができたら、そのページに掲載されているサンプルソースをコピーペーストで使用するのがおすすめです。
そのように基本コンテンツを作った後、徐々に各箇所を掘り下げて学んでいけば、きっと自然に知識が身についていくはずです。たくさん作ればそれだけ理解も早まるでしょう。
ここまで読んでくれたあなたなら、きっと何でも乗り越えていけるはず。
頑張ってくださいね！
⇒目的別リファレンスで、あなたの目的に合わせてサイトを閲覧することができます。是非ご活用ください。
