ナビゲーションバーの作り方とサンプル
登録されるサイトには、「ナビゲーションバー」を付けていただきます。
( ナビゲーションバーのサンプル )
 |
| ナビゲーションバーの作り方 と あなたのページへの貼り付け |
|
ナビゲーションバーのデザインは基本的に任意ですが、サイト間でできるだけ統一されている方が好ましいと思います。
その範囲で、各サイトの雰囲気が損なわれないように、色や文字サイズなどを変更することは自由です。
ただし、リング名（鍵盤音楽WebRing あるいは Keybord Music WebRing という文字）と、
サイト間の移動用リンク （少なくとも 前へ・次へ・ランダム・リスト の ４つ） は必ず設けて下さい。
下に、いくつかデザインのサンプルとそのコードを示しておきます。
これらのコードを使用する場合、その中にある
あなたのID
や
【あなたの名前】
をそれぞれ実際のものに置き換えて下さい。例えば、あなたのＩＤが 333 の場合は
... ?ring=keyb;id=ID;prev5" ...
を
... ?ring=keyb;id=333;prev5" ...
というように置き換えます。数字は ASCII文字(半角数字)でなければなりません。コードの中で、
藤色で表示されている部分は 全て 置き換えて下さい。
ナビゲーションバーのソースコードが準備できたら、仮登録で記入したＵＲＬから表示されるページ（HTMLファイル）
をエディターなどで開き、適当な場所にコードを貼り付けて下さい。
貼り付けの終わったページをあなたのサイトのサーバーにアップロードします。
|
| ナビゲーションバーのサンプル |
|
（例１）
ソースコード
<center><strong>
<font size="+1"><a href="http://www.orgel.com/keyb/">鍵盤音楽WebRing</a></font> は、
<a href="mailto:keyb@orgel.com">orgel.com</a> によって運営されています。
<br>このサイトの所有者は【あなたの名前】です。
<br><br>
<a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev5"
target="keyb">前の５サイト</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;sprev"
target="keyb">２つ前</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">１つ前</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">次 へ</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;skip"
target="keyb">次の次</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next5"
target="keyb">次の５サイト</a>
<BR>
<a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">ランダムで移動</a>
| <a href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">リストを表示</a>
</strong></center>
（例２）
ソースコード
<TABLE border="2" cellPadding="5" cellSpacing="0"><TR>
<TH><FONT size="-1">この <A href="http://www.orgel.com/keyb/">鍵盤音楽WebRing</A>
サイトの所有者は <BR>【あなたの名前】です。
あなたも <A href="http://www.orgel.com/keyb/">リング</A> に参加しませんか？
</FONT></TH> </TR><TR>
<TH><FONT size="-1">
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev5"
target="keyb">前の５サイト</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;sprev"
target="keyb">２つ前へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">前 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">次 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;skip"
target="keyb">２つ次へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next5"
target="keyb">次の５サイト</A>
<BR>
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">ランダムに選ぶ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">登録サイトのリスト</A>
</FONT></TH>
</TR></TABLE>
（例３）
ソースコード
<TABLE border="0" cellpadding="6"><TR>
<TH bgcolor="#ffe1e1"><FONT size="+0">このサイトは
<A href="http://www.orgel.com/keyb/">鍵盤音楽WebRing</A> のメンバーです
<BR><BR>
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">前 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">次 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">ランダム</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">リスト</A>
</FONT></TH>
</TR></TABLE>
（例４）
ソースコード
<TABLE border="0" cellpadding="6" cellspacing="0" bgcolor="#ffffff"><TR>
<TD><img src="keyblogo1.gif" height=66 width=117></TD>
<TH><FONT size="-1">このサイトは
<A href="http://www.orgel.com/keyb/">Keyboard Music WebRing</A>
のメンバーです</FONT>
<BR><BR><FONT size="+0">
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">前 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">次 へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">ランダム</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">リスト</A>
</FONT></TH>
</TR></TABLE>
（例５）
ソースコード
<TABLE><TR>
<TD><img src="keyblogo2.gif" width=79 height=39></TD>
<TH align="right"><A href="http://www.orgel.com/keyb/">
<FONT size="-1">鍵盤音楽WebRing</FONT></A>
<HR size="1"><FONT size="-1">
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">前へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">次へ</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">ランダム</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">リスト</A>
</FONT></TH>
</TR></TABLE>
（例６）
ソースコード
<TABLE><TR>
<TD><img src="keyblogo2.gif" width=79 height=39></TD>
<TH align="right"><A href="http://www.orgel.com/keyb/">
<FONT size="-1" face="Arial, Helv, Helvetica">Keybord Music WebRing</FONT></A>
<BR><FONT size="-1" face="Arial, Helv, Helvetica">
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">Previous</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">Next</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">Random</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">List</A>
</FONT></TH>
</TR></TABLE>
（例７）
 |
Keybord Music WebRing
Previous
| Next
| Random
| List
|
|
| ページのバックグラウンド
が暗色(#000000)の場合
はこちらのロゴ |
ソースコード
<TABLE border="0" cellspacing="0"><TR>
<TD><img src="keyblogo2a.gif" width=79 height=39></TD>
<TH align="right"><A href="http://www.orgel.com/keyb/">
<FONT size="-1" face="Arial, Helv, Helvetica">Keybord Music WebRing</FONT></A>
<BR><FONT size="-1" face="Arial, Helv, Helvetica">
<A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;prev"
target="keyb">Previous</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;next"
target="keyb">Next</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;random"
target="keyb">Random</A>
| <A href="http://www.webring.ne.jp/cgi-bin/webring?ring=keyb;id=ID;list"
target="keyb">List</A>
</FONT></TH>
</TR></TABLE>
ロゴを使用する場合（例 ４〜７）は、画像ファイルをここからダウンロードして、
あなたのホームページのあるサーバーに置いて下さい。
ファイル名は変更しても構いません。
(いずれも透過GIFです)
1998.12.28 更新
