- Macのホームページ作成ガイド >
- 無料ホームページ作成 >
- ホームページのサイドメニュー部分の作成- 完全無料でホームページを作る！
ホームページのサイドメニュー部分の作成- 完全無料でホームページを作る！
2011/08/14
このページでは、当サイトで配布している無料テンプレートをベースにして、ページのサイドメニュー部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。
また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。
サイドメニューの範囲
サイドメニューは、テンプレートHTMLソースの以下の部分です。 メインセクションの中に入っています。
<div id="sidemenu"> サイドメニュー </div>
サイドメニューには、他のページへのメインリンク（以下、サイドグローバルメニュー）や広告バナーなどを配置します。 ここではサイドグローバルメニューの設置と、広告バナーの設置などを行う手順を解説します。
サイドグローバルメニューの設置
テンプレートには、すでに下のようなサイドグローバルメニュー用のスタイルが設定されていますので、HTMLソース上に決まったコードを書けばメニューとしての見た目が整うようになっています。
それではHTMLソースを修正していきましょう。 <div id="sidemenu">と</div>の間に、以下のようなHTMLソースを追加してください。
<div id="sidemenu"> <!--以下のソースを追加--> <ul class="menu"> <li>トップ</li> <li>ブログ</li> <li>写真</li> <li class="end">動画</li> </ul> </div>
<li>〜</li>の間には、写真のページなら「写真」という具合に、リンクする先のページの内容を記述してください。
メニューがもっとたくさん必要な場合は、適宜<li>〜</li>を追加して記述してください。
ここでキモになるのは、追加したソースの<li class="end">〜</li>の部分です。
いくつメニューを追加しても問題はありませんが、必ずメニューの一番最後の行には class="end"という記述を入れてください。
これは「end」というクラスを設定している部分で、やってみると分かりますが、この行がないとメニューの一番最後の下部分に線が表示されないので、デザインがかっこわるくなってしまいます。
（クラスってなんだっけ？という方は、HTMLとCSSの基礎のキソ知識 - 完全無料でホームページを作る！をもう一度読み返してください）
他のページへのリンクを設置
サイドグローバルメニューの設置ができたら、次に各ページへのリンクを設置してみましょう。
リンクを設置するには<a>〜</a>タグを使います。
それでは実際にリンクを設置してみましょう。
<ul class="menu"> <li><a href="index.html">トップ</a> </ul>
実際にリンクする先のページURLは、<a>のhrefの中で指定します。
この時に注意する点は、現在のページから見てリンク先のページがどのフォルダに入っているか？という点です。
現在のページから見て、下の階層のフォルダ内のファイルへのリンクの場合は「フォルダ名/ファイル名」という形式になり、現在のページより上の階層のファイルへのリンクの場合は「../ファイル名」という感じになります。
なかなかこれだけで理解できる人は居ないと思いますので、以下の3つのパターンからどのようにリンクを設定するのかを解説します。
- photoフォルダのindex.htmlへリンク
現在修正しているページがwwwフォルダに入っているindex.htmlだとすると、photoフォルダのindex.htmlへリンクは「photo/index.html」になります。 - 同じフォルダのphoto_01.htmlへリンク
現在修正しているページがphotoフォルダに入っているindex.htmlだとすると、同じphotoフォルダのphoto_01.htmlへリンクは「photo_01.html」になります。 - 上の階層フォルダのindex.htmlへリンク
現在修正しているページがphotoフォルダに入っているphoto_01.htmlだとすると、上の階層にあたるwwwフォルダのindex.htmlへリンクは「../index.html」になります。
ここで解説したリンクの考え方を「相対パス」と呼びます。
今修正しているページからの相対的な位置を指し示すものだから、こう呼ばれます。
もう一つ「絶対パス」というリンクの考え方もあります。
これは「http://」からはじまるURLをhrefに設定するやり方です。
相対パスでも絶対パスでも、どちらの考え方でリンクを設置しても問題はありません。
どちらを使っても、検索エンジンに読み込まれやすいとかそういった事もありませんので、完全に好みで使って良いと思います。
ただ、絶対パスだとどうしてもURLが長くなってしまう為、HTMLソースが見にくくなってしまい、修正の時に苦労をするかもしれません。
リンクについて少しはイメージができたでしょうか？
ビギナーの方にはなかなか難しいと思いますので、実際にリンクを設置してみて、体で覚えていくようにしてください。
