ナビゲーションバーの作成手順

（最終更新日：2002/7/7）

あなたが登録したURLのトップページに下記の3つのタイプからお好きなナビゲーションバーを選んで設置してください。
ナビゲーションバーの設定方法は下記の[HTMLソース]をそのままコピーペーストし、
一部のソースを自分用に変更するだけでOKです。
変更確認箇所は、各サンプル毎に手順を記載してありますのでそちらを参照してください。

Sample A

イメージMAPを利用したナビゲーションバーです。
画像だけでリンクが一元化されているので見た目がすっきりとしたタイプになっています。
自分用に変更する箇所が多い為一見設置が難しいように思えますが、確認箇所をよく読んで変更していけばそれほど設置は難しくはないと思います(^^)

※下記ナビゲーションバーは実動します

～This Site owned by mel～

<!------- MINI-Ring のナビゲーションバー ------------------>
<TABLE bgcolor="#ffffff">
<TBODY>
<TR>
<TD align="center"><IMG src="orange_1.jpg" width="150" height="80" border="0" usemap="#orange_1"></TD>
</TR>
<TR>
<TD><FONT color="#9900ff" size="-1">～This Site owned by <A href="mailto:あなたのメールアドレス">あなたの名前</A>～</FONT></TD>
</TR>
</TBODY>
</TABLE>
<MAP name="orange_1">
<AREA href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;next" target="_top" shape="rect" coords="89,10,126,23">
<AREA shape="rect" coords="89,22,132,37" href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;prev" target="_top">
<AREA shape="rect" coords="90,38,146,49" href="http://www.webring.ne.jp/cgi-bin/webring?random;ring=miniring" target="_top">
<AREA shape="rect" coords="90,49,132,61" href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;next5" target="_top">
<AREA shape="rect" coords="90,61,123,77" href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;list" target="_top">
<AREA href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;home" target="_top" shape="rect" coords="6,10,83,70">
<AREA shape="default" nohref>
</MAP>

確認箇所　1	5行目の<IMG src="orange_1.jpg" width="150" height="80" border="0" usemap="#orange_1">の画像ファイル名（初期設定は「orange_1.jpg」）を変更する。次にusemapの部分（初期設定は「#orange_1」）をご自分の選んだ画像ファイル名から拡張子を外した名称と同じ名前に変更する。
確認箇所　2	12行目の<MAP name="orange_1">の部分のMAP名（初期設定は「orange_1」を確認箇所　1で指定したmap名に変更する。
確認箇所　3	8行目の「あなたのメールアドレス」と、13行目の「あなたの名前」の部分をご自分メールアドレスと、ご自分の名前に書きかえる。
確認箇所　4	13行目、14行目、16行目の「あなたのID」のところを、送られてきたメールのID番号に書きかえる
確認箇所　5	最後にもう一度、あなたの使用している画像ファイル名が正しいかご確認ください。初期設定は「orange_1.jpg」になっています。
最終確認	HTMLファイルと画像をご自分のサーバにFTP転送して、うまく表示されるかどうか確認してください。（HTMLファイルと画像は同じディレクトリーにアップしてください)

URLやE-Mailアドレスの変更があった場合は、速やかに、登録内容変更フォームから登録変更を行ってください。

---Sample A用画像ファイル---

white_1.jpg	black_1.jpg	gray_1.jpg	yellow_1.jpg

orange_1.jpg	red_1.jpg	green_1.jpg	surf_1.jpg

blue_1.jpg	purple_1.jpg	pink_1.jpg

※この画像の中からお好きな画像をひとつだけダウンロードして、あなたのMINI-RingHTMLファイルが
置いてある同じディレクトリーにアップしてください。

Sample B

ベーシックタイプのナビゲーションバーです。
設置はとても簡単です。

※下記ナビゲーションバーは実動します

	[Next] [Prev] [Next5] [Random] [ListSites]
^{～This Site owned by mel～}

<TABLE bgcolor="#ffffff">
<TBODY>
<TR>
<TD bgcolor="#ffffff"><A href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;home" target="_blank">
<IMG src="surf_2.gif" width="113" height="80" border="0"></A></TD>
<TD align="left" bgcolor="#ffffff"><FONT size="-1">
[<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;next" target="_top">Next</A>]<BR>
[<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;prev" target="_top">Prev</A>] <BR>
[<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=あなたのID;next5" target="_top">Next5</A>]<BR>
[<A href="http://www.webring.ne.jp/cgi-bin/webring?random;ring=miniring" target="_top">Random</A>]<BR>
[<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;list" target="_top">ListSites</A>]</FONT></TD>
</TR>
<TR>
<TD colspan="2" align="center" bgcolor="#ffffff"><SUP><FONT color=#9900ff>～This Site owned by <A href="mailto:あなたのメールアドレス">あなたの名前</A>～</FONT></SUP></TD>
</TR>
</TBODY>
</TABLE>

確認箇所　1	6行目の<IMG src="surf_2.gif" width="113" height="80" border="0">のところの画像ファイル名をご自分の使用する画像ファイル名に変更する（初期設定は「surf_2.gif」になっています）
確認箇所　2	8行目、9行目、10行目の「あなたのID」のところを、送られてきたメールのID番号に書きかえる
確認箇所　3	<A href="mailto:あなたのメールアドレス">あなたの名前</A>の部分をご自分のメールアドレスと、ご自分の名前に書きかえる
確認箇所　4	最後にもう一度、あなたの使用している画像ファイル名が正しいかご確認ください。初期設定は「surf_2.gif」になっています。
最終確認	HTMLファイルと画像をご自分のサーバにFTP転送して、うまく表示されるかどうか確認してください。（HTMLファイルと画像は同じディレクトリーにアップしてください)

URLやE-Mailアドレスの変更があった場合は、速やかに、登録内容変更フォームから登録変更を行ってください。

---Sample B用画像ファイル---

white_2.gif	black_2.gif	gray_2.gif	yellow_2.gif

orange_2.gif	red_2.gif	green_2.gif	surf_2.gif

blue_2.gif	blue_2.gif	pink_2.gif

Sample C

ベーシックタイプの横長タイプのナビゲーションバーです。
設置はとても簡単です。

※下記ナビゲーションバーは実動します

^{～This Site owned by mel～} [Prev] [Next]
[Random] [Next5] [ListSites]

確認箇所　1	6行目の<IMG src="white_3.gif" width="119" height="60" border="0">のところの画像ファイル名をご自分の使用する画像ファイル名に変更する（初期設定は「white_3.gif」になっています）
確認箇所　2	9行目、10行目、12行目の「あなたのID」のところを、送られてきたメールのID番号に書きかえる
確認箇所　3	7行目の<A href="mailto:あなたのメールアドレス">あなたの名前</A>の部分をご自分のメールアドレスと、ご自分の名前に書きかえる
確認箇所　4	最後にもう一度、あなたの使用している画像ファイル名が正しいかご確認ください。初期設定は「white_3.gif」になっています。
最終確認	HTMLファイルと画像をご自分のサーバにFTP転送して、うまく表示されるかどうか確認してください。（HTMLファイルと画像は同じディレクトリーにアップしてください)

URLやE-Mailアドレスの変更があった場合は、速やかに、登録内容変更フォームから登録変更を行ってください。

---Sample C用画像ファイル---

white_3.gif	black_3.gif	gray_3.gif	yellow_3.gif

orange_3.gif	red_3.gif	green_3.gif	surf_3.gif

blue_3.gif	purple_3.gif	pink_3.gif

---HTMLタグ詳細---

[5つ前のサイトをリスト表示]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;prev5
[2つ前へ戻る]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;sprev
[1つ前のサイト]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;prev
[次の5サイトをリスト表示]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;next5
[次のサイトへ移動]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;next
[1つ飛び越して次のサイト]	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;id=???;skip
各サイトについてのコメント付き一覧	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;list
参加サイトにランダムにジャンプ	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;random
総合案内へ。リング参加登録手続き等	http://www.webring.ne.jp/cgi-bin/webring?ring=miniring;home

MINI-RingTopへもどる