無料ホームページテンプレート!SEO対策済みXHTML+CSS,HTML5+CSS3

メニューの編集

メニューを変更する

前のページでは画面に見えないホームページの情報を変更していきましたが、次から画面上のメニューを変更していきます。

まず最初にテンプレート上部のメニューを変更します。

テンプレートは「HOME,COMPANY,SERVICES,PRODUCTS,CONTACT」の順になっていますね。これを「ホーム、会社案内、よくある質問、ご利用規約、お問い合わせ」に変更してみます。

メニュー

このまま文字を変更してもいいですが、今回は解りやすい様にHTMLコードで変更していきます。

上のメニューのHTMLコードは下記になります。

メニューHTML

テンプレート屋.comのHPテンプレートは簡単に編集出来るようにメニューなど画像を余り使わず上記のような<li>で文字を変えるだけで編集できるように作成してあります。

※中には一部画像を使っているHPテンプレートもあります。

メニューを変更すると下記の様になります。

<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="company.html">会社案内</a></li>
<li><a href="services.html">よくある質問</a></li>
<li><a href="services.html">ご利用規約</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

意外と簡単だと思います。

リンク先を変えたい場合は、例えば、「会社案内」はcompany.htmlにリンクされていますが、これをdeal.htmlに変更したい場合は ダブルクォーテーションで囲まれた”company.html“の所だけを変更すればリンク先が変更されます。

<li><a href=”deal.html”>会社案内</a></li>

メニューの追加

ホームページを作成しているとメニューを追加したり削除したりすることがありますが、簡単に説明したいと思います。

上記の場合「ご利用規約」と「お問い合わせ」の間にサイトマップ(sitemap.html)のページを追加したいと思います。

<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="company.html">会社案内</a></li>
<li><a href="services.html">よくある質問</a></li>
<li><a href="services.html">ご利用規約</a></li>
<li><a href="sitemap.html">サイトマップ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

単純に<li>~</li>を追加するだけです。

削除をしたいときは<li>~</li>を削除すればメニューが削除されます。