トップページを更新しよう

トップページの内容を編集しよう

店舗案内ページの編集が完了したので、次はそのお知らせをするためにトップページの新着情報（What’s New！）を追加しましょう。
ここで新着情報を追加することにより、「店舗案内ページが更新されていますよ」と伝えることができます。

トップページの編集

step.1

まずは「index.html」を開きましょう。

step.2

開いたら、「What’s New！」の一番上に、最新の更新情報を記入します。
<p>タグを追加して、新着情報を入力しましょう。

今回の場合、新店舗オープンのお知らせなので「大名店がオープンしました」と入力します。

[入力するコード]

<section>
<div id="newsbox">
<h3 class="midashi">What’s New！</h3>
<p>○○年/○○月/○○日｜大名店がオープンしました。</p>
<p>○○年/○○月/○○日｜福岡天神店がオープンしました。</p>
<p>○○年/○○月/○○日｜季節限定メニューを追加しました。</p>
<p>○○年/○○月/○○日｜産地情報を更新しました。</p>
</div>
</section>

[HTMLの記述例]

入力内容に間違えがなければ、ファイルを上書き保存しておきましょう。

覚えておきたいポイント

更新する内容

トップページの新着情報を更新することにより、各ページの更新状況をお知らせすることができます。

リンクを追加しよう

ついでに、新着情報をクリックしたら該当ページへリンクするよう設定を行いましょう。
この設定を行うことによりすぐに該当ページへ移動できるようになり、ホームページの使い勝手が良くなります。

リンク設定の追加方法

それぞれの新着情報をクリックすると、該当するページへリンクするよう設定を行います。

[現在のソースコード]

現在は上記のような状態ですが、ソースコードを追加しリンク設定を行います。

[それぞれのリンク先]

「大名店オープン」→店舗案内ページへ
「福岡天神店」→店舗案内ページへ
「季節限定メニュー」→メニューページへ
「産地情報」→こだわりページへ

ソースコードを以下のように書き換えましょう。

[入力するコード]

<p><a href="page/tenpoannai.html">○○年/○○月/○○日｜大名店がオープンしました。</a></p>
<p><a href="page/tenpoannai.html">○○年/○○月/○○日｜福岡天神店がオープンしました。</a></p>
<p><a href="page/menu.html">○○年/○○月/○○日｜季節限定メニューを追加しました。</a></p>
<p><a href="page/kodawari.html">○○年/○○月/○○日｜産地情報を更新しました。</a></p>

[HTMLの記述例]