★R.N.B★

☆リングナビゲーションバナーの付け方☆

これ↓が、リング・ナビゲーション・バナーというものです。
試しに、Back・Random・Nextの、どれかを押してみてください。
窓がでてきて、他のバハラグページに飛んだでしょう? ・・・飛ぶはずなんです。

参加されたホームページには、トップページに、このリング・ナビゲーション・バーを設置していただきます。
ここでは、その設置及びカスタマイズの方法をご説明します。

まず、下のサンプルソースをご覧ください。これが、ナビゲーション・バーのソース、デフォルト設定です。
レイアウトにはTABLEタグを使用しておりますが、これは設置とカスタマイズを容易にし、できるだけ多くの種類のブラウザで表示させるためです。
これをコピー&ペーストで、トップページのソースに貼りつけると楽です。
(注意!!ここに『表示されている』文を、あなたのHPのトップページのソース(メモ帳とかで開いて…)に貼りつけます。このページのソースを、では有りません。)
なお、設置にあたっては、数カ所の修正が必要です。下の「カスタマイズ」の部分をご覧ください。
赤い文字で書かれている部分は、必ず注意してチェックしてください。
(※上の見本は、このホームページ用のIDと、BGCOLOR指定で薄紫色の背景色になっています。)
IDを替え忘れる人が多いです。注意しましょうね

<!-- リングナビゲーションバー ここから -->
<TABLE WIDTH=210 BORDER=0 BGCOLOR="#DFDFFF">
<TR><TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.webring.ne.jp/cgi-bin/webring?ring=bahamut;id=
ID;home " TARGET="_top">
<IMG SRC="
http://www5.freeweb.ne.jp/play/sylph/bahamut.bn.gif" ALT="バハムートラグーンを広めよう!" BORDER="0" WIDTH="200" HEIGHT="40"></A>
</TD></TR><TR><TD>
<A HREF="http://www.webring.ne.jp/cgi-bin/webring?ring=bahamut;id=
ID;prev" TARGET="_top">Back←</A>
</TD><TD ALIGN=CENTER>
<A HREF="http://www.webring.ne.jp/cgi-bin/webring?ring=bahamut;id=
ID;random" TARGET="_top">Random</A>
</TD><TD ALIGN=RIGHT>
<A HREF="http://www.webring.ne.jp/cgi-bin/webring?ring=bahamut;id=
ID;next" TARGET="_top">→Next</A>
</TD></TR></TABLE>
<!-- リングナビゲーションバー ここまで -->

リング・ナビゲーション・バーのカスタマイズ

基本的には、赤い文字で書かれている部分だけチェックして修正し、そのままトップページの、設置したい箇所に貼り付けるだけでOK!カスタマイズには、それなりにHTMLタグの知識が必要です。特にTABLEタグの使い方がよく分からない場合は、あまりいじらない方が無難〜

 ★最初と最後の行
   単なる印です。無くて構いません。
 ★2行目
   このナビゲーション・バーは、TABLEタグを使ってレイアウトしてあります。
   WIDTH指定がバナーよりやや大きい210ピクセルになっているのは、
   レイアウトを崩れないようにするためです。WIDTH指定はあまり下げない方が無難。
   また、テーブルの枠のサイズや、色は、ご自由にどうぞ。
   レイアウトの都合によって、設定を変更してください。
 ★3・6・9・12行目
   TABLEタグの行列指定です。普通は、いじる必要はありません。
   枠内のレイアウトを、CENTER・RIGHTオプションで寄せてあります。
   外さない方が良いでしょう。
 ★4行目
   解説ページ(ここ)へのリンクです。
   TARGET="_top"オプションが付いていますが、
   これはフレーム使用ページに設置した際、リンク時にフレームを解除するためです。
   新しいウインドウで表示させたい場合は、
   TARGET="_blank"オプションに書き換えてください。削除はおすすめしません。
   ALTオプションで指定されている文章は、削除しても結構ですし、
   意味さえ通るなら適宜書き換えても構いません。
 ★5行目
   バナーの画像表示です。デフォルトでは、
   同じフォルダにここのバナーを置いた場合の相対パス指定設定です。
   もしあなたのホームページと雰囲気が合わない場合、バナー製作して、
   送ってもらえれば、たいていそのバナーへの差し替えを許可すると思います。
   現在、バナーは、昼版と夜版、2種類です。
 ★7〜8・10〜11・13〜14行目
   上から、「前のIDのページへ」「ランダムで」「次のIDのページへ」のリンクです。
   Aタグには、いずれもTARGET="_top"オプションが付いていますが、
   これはフレーム使用ページに設置した際、リンク時にフレームを解除するためです。
   新しいウインドウで表示させたい場合は、
   TARGET="_blank"オプションに書き換えてください。削除はおすすめしません。

   指定URLの最後の方に、bahamut;id=IDという部分がありますが、
   このIDを、必ず、あなたのホームページのID番号に書き換えてください。

   リンクの文字色は、設置したホームページのBODYタグ設定に依存します。
   もしこの部分だけ色を変えたい場合、Aタグの内側に、FONT COLOR=タグで、
   色の指定を入れてください。但し、VLINK、ALINKの指定は無効になります。

ピンクの文字で書かれている部分は、バナーの選択です。
 どんなバナーがあるのかは、こちらへどうぞ。

★カスタマイズのヒント〜!
 →このホームページのように、リンクのアンダーラインを消すには
   STYLEタグで指定します。
   以下のソースを、HEAD/HEADタグ内に置いてください。

     <STYLE type="text/css">
     <!--a{text-decoration:none}-->
     </STYLE>
     <STYLE TYPE="text/css">
     <!-- A:hover { color:"#ffffff"; } -->
     </STYLE>

   上の3行が、アンダーラインを消す部分のタグ。
   下の3行が、マウスがリンクに触れたときに、リンク色を変更するタグ。
   両方組み合わせてもOK♪
   のカラー指定は、適宜変えちゃってください。
   なお、このタグを設置したページ全てのリンクのアンダーラインが消え、
   マウスが触れると色が変わります。

 

☆もっと別のリングナビゲーションバナー!!!☆

このほか、いろいろカスタマイズしてもOKです。
でも、TABLEの解らない人は、基準品(↑のヤツ)を使ったほうが良いです。
必須は、バハラグウェブホームへのリンク、ランダムとバック、ネクスト。

 


TOPページへ飛ぶ。

 

 

 


[PR]話題の《あのゲーム》の世界へ:今なら無料で遊び放題のチャンス中だよ!