ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

トップページの更新

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

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

トップページの編集

step.1

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

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の記述例]
新着情報の追加

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

覚えておきたいポイント

更新する内容

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

リンクを追加しよう

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

リンク設定の追加方法

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

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

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

[それぞれのリンク先]
  • 「大名店オープン」→店舗案内ページへ
  • 「福岡天神店」→店舗案内ページへ
  • 「季節限定メニュー」→メニューページへ
  • 「産地情報」→こだわりページへ

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

[入力するコード]
<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の記述例]
ソースコードの追加内容

これでリンク設定は完了です。
間違いがないか見なおして、問題がなければ上書き保存しましょう。

覚えておきたいポイント

使い勝手を良くしよう

新着情報を直接クリックできるようになると、ワンクリックで該当のページまで移動できるので非常にホームページの使い勝手がよくなります。
こういった細かな所を改善すると「好まれる」ホームページになります。

ブラウザで確認

最後にブラウザで確認を行いましょう。
以下のように表示されていればOKです。

[ブラウザでの表示例]
ブラウザでの確認画像

新着情報をクリックして、キチンと該当のページへ移動するかもチェックしましょう。

問題がなければ、次は編集したページをサーバーにアップロードします。

覚えておきたいポイント

リンク先をチェックしよう

新着情報をクリックして、きちんと該当ページに移動するか確認しておきましょう。

更新した内容を反映する
« 前のページへ 店舗案内ページの更新

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。