*.NET Ring ナビゲーションバーの設置法 [#qe9130a3] #contents .NET Ringに参加しているすべてのサイトにはナビゲーションバーが設置されている必要があります。ナビゲーションバーのサンプルをここで幾つか紹介しますが、このサンプルをそのままご使用していただいても構いませんし、編集あるいは、全く新しいものを作り、使用していただいても構いません。(よいナビゲーションバーができましたら、ぜひ[[こちら>../フォーラム]]で教えてください。また、ナビゲーションバーのサンプルに不備や、こうした方がいいということがありましたら、[[こちら>../フォーラム]]でご報告ください。あまり自信がありません。) ''なお、必ずソース内の「(あなたのID)」をご自分のIDに置換してご利用ください。'' *.NET Ringナビゲーションバーのサンプル [#lafd9298] **画像を使用したサンプル [#h5b9ed32] 画像を使ったナビゲーションバーです。ページのスタイルシートなどの影響を受けにくいですが、''画像をダウンロードし、ご自分のサーバーにアップロードする必要があります''。 ***灰色 [#w43efb5c] &myhtml(navibar_img,navi_gray.png); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <img src="navi_gray.png" alt=".NET Ring" width="121" height="76" border="0" usemap="#map_navi"> <map name="map_navi" id="map_navi"> <area shape="rect" coords="0,0,121,56" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> <area shape="rect" coords="0,0,121,56" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> </map> }} ***青 [#u60f83e5] &myhtml(navibar_img,navi_blue.png); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <img src="navi_blue.png" alt=".NET Ring" width="121" height="76" border="0" usemap="#map_navi"> <map name="map_navi" id="map_navi"> <area shape="rect" coords="0,0,121,56" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> <area shape="rect" coords="0,0,121,56" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> </map> }} ***赤 [#iba20140] &myhtml(navibar_img,navi_red.png); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <img src="navi_red.png" alt=".NET Ring" width="121" height="76" border="0" usemap="#map_navi"> <map name="map_navi" id="map_navi"> <area shape="rect" coords="0,0,121,56" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> <area shape="rect" coords="0,0,121,56" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ移動"> <area shape="rect" coords="0,56,40,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ移動"> <area shape="rect" coords="40,56,80,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="80,56,121,76" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ移動"> </map> }} ***四葉のクローバ [#ff26fc1e] &myhtml(navibar_img,navi_lucky.gif); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <img src="navi_lucky.gif" alt=".NET Ring" width="120" height="80" border="0" usemap="#luckynavi_map"> <map name="luckynavi_map" id="luckynavi_map"> <area shape="rect" coords="10,58,37,78" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ"> <area shape="rect" coords="49,57,72,78" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="83,58,111,78" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ"> <area shape="rect" coords="0,0,120,57" href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ"> <area shape="rect" coords="10,58,37,78" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" alt=".NET Ringの前のサイトへ"> <area shape="rect" coords="49,57,72,78" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" alt=".NET Ring参加サイト一覧"> <area shape="rect" coords="83,58,111,78" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" alt=".NET Ringの次のサイトへ"> <area shape="rect" coords="0,0,120,57" href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" alt=".NET Ringのホームへ"> </map> }} **HTMLテーブルを使用したサンプル [#h5ba5b74] HTMLのテーブルとスタイルシートのみを使用したナビゲーションバーです。基本的にはソースを貼り付けるだけでOKですが、ページにスタイルシートを使っている場合は、このままでは正常に表示されない恐れがあります。なお、スタイルシートの部分は、HTMLヘッダに入れた方がよいでしょう。 ***灰色 [#qf70a7e3] (iframeで表示) &myhtml(navibar_html,navi_gray.html); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <style TYPE=text/css> <!-- table.dotnetring { background-color: #202020; width: 121px; height: 76px } table.dotnetring table.convex { border-right: #515151 1px solid; border-top: #C0C0C0 1px solid; border-left: #C0C0C0 1px solid; border-bottom: #515151 1px solid; background-color: #606060 } table.dotnetring table.concavity { border-right: #C0C0C0 1px solid; border-top: #515151 1px solid; border-left: #515151 1px solid; border-bottom: #C0C0C0 1px solid; background-color: #808080 } table.dotnetring table.titleout { width: 119; height: 53; padding: 2px; text-align: center } table.dotnetring table.titlein { width: 113; height: 49; text-align: center } table.dotnetring table.button { width: 39; height: 16; text-align: center } table.dotnetring big { font-weight: bold; font-size: 12pt; font-family: Arial Black } table.dotnetring small { font-weight: normal; font-size: 7pt } table.dotnetring a:link { text-decoration:none; color:#FFFFFF } table.dotnetring a:visited { text-decoration:none; color:#FFFFFF } table.dotnetring a:active { text-decoration:none; color:#FFFF00 } table.dotnetring a:hover { text-decoration:none; color:#FF5C41 } --> </style> <table class="dotnetring" width="121" height="76" border="0" cellpadding="0" cellspacing="1" title=".NET関連サイトのウェブリング「.NET Ring」"> <tr><td height="75%" colspan="3"> <table class="convex titleout" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td> <table class="concavity titlein" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td align="center" valign="middle"> <big> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> </big> </td> </tr> </table> </td></tr> </table> </td></tr> <tr> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> </small> </td> </tr> </table> </td> <td> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> </small> </td></tr> </table> </td> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> </small> </td> </tr> </table> </td></tr> </table> }} ***青 [#hf067844] (iframeで表示) &myhtml(navibar_html,navi_blue.html); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <style TYPE=text/css> <!-- table.dotnetring { background-color: #121328; width: 121px; height: 76px } table.dotnetring table.convex { border-right: #333270 1px solid; border-top: #B2B4DE 1px solid; border-left: #B2B4DE 1px solid; border-bottom: #333270 1px solid; background-color: #383B7C } table.dotnetring table.concavity { border-right: #B2B4DE 1px solid; border-top: #333270 1px solid; border-left: #333270 1px solid; border-bottom: #B2B4DE 1px solid; background-color: #F5F5FF } table.dotnetring table.titleout { width: 119; height: 53; padding: 2px; text-align: center } table.dotnetring table.titlein { width: 113; height: 49; text-align: center } table.dotnetring table.button { width: 39; height: 16; text-align: center } table.dotnetring big { font-weight: bold; font-size: 12pt; font-family: Arial Black } table.dotnetring big a:link { text-decoration: none; color: #383B7C } table.dotnetring big a:visited { text-decoration: none; color: #383B7C } table.dotnetring big a:active { text-decoration: none; color: #FFFF00 } table.dotnetring big a:hover { text-decoration: none; color: #FF5C41} table.dotnetring small { font-weight: normal; font-size: 7pt } table.dotnetring small a:link { text-decoration: none; color: #F5F5FF } table.dotnetring small a:visited { text-decoration: none; color: #F5F5FF } table.dotnetring small a:active { text-decoration: none; color: #FFFF00 } table.dotnetring small a:hover { text-decoration: none; color: #FF5C41 } --> </style> <table class="dotnetring" width="121" height="76" border="0" cellpadding="0" cellspacing="1" title=".NET関連サイトのウェブリング「.NET Ring」"> <tr><td height="75%" colspan="3"> <table class="convex titleout" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td> <table class="concavity titlein" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td align="center" valign="middle"> <big> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> </big> </td> </tr> </table> </td></tr> </table> </td></tr> <tr> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> </small> </td> </tr> </table> </td> <td> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> </small> </td></tr> </table> </td> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> </small> </td> </tr> </table> </td></tr> </table> }} ***赤 [#a19172db] (iframeで表示) &myhtml(navibar_html,navi_red.html); ソース: #myhtml(textarea,name="gray" cols="60" rows="8" wrap="OFF"){{ <style TYPE=text/css> <!-- table.dotnetring { background-color: #300000; width: 121px; height: 76px } table.dotnetring table.convex { border-right: #780000 1px solid; border-top: #FFA9A9 1px solid; border-left: #FFA9A9 1px solid; border-bottom: #780000 1px solid; background-color: #8E0000 } table.dotnetring table.concavity { border-right: #FFA9A9 1px solid; border-top: #780000 1px solid; border-left: #780000 1px solid; border-bottom: #FFA9A9 1px solid; background-color: #FFF5F5 } table.dotnetring table.titleout { width: 119; height: 53; padding: 2px; text-align: center } table.dotnetring table.titlein { width: 113; height: 49; text-align: center } table.dotnetring table.button { width: 39; height: 16; text-align: center } table.dotnetring big { font-weight: bold; font-size: 12pt; font-family: Arial Black } table.dotnetring big a:link { text-decoration: none; color: #9E0000 } table.dotnetring big a:visited { text-decoration: none; color: #9E0000 } table.dotnetring big a:active { text-decoration: none; color: #FFFF00 } table.dotnetring big a:hover { text-decoration: none; color: #FF5C41 } table.dotnetring small { font-weight: normal; font-size: 7pt } table.dotnetring small a:link { text-decoration: none; color: #FFF5F5 } table.dotnetring small a:visited { text-decoration: none; color: #FFF5F5 } table.dotnetring small a:active { text-decoration: none; color: #FFFF00 } table.dotnetring small a:hover { text-decoration: none; color: #FF5C41 } --> </style> <table class="dotnetring" width="121" height="76" border="0" cellpadding="0" cellspacing="1" title=".NET関連サイトのウェブリング「.NET Ring」"> <tr><td height="75%" colspan="3"> <table class="convex titleout" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td> <table class="concavity titlein" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td align="center" valign="middle"> <big> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home" target="_blank" title=".NET Ringのホームへ移動">.NET Ring</a> </big> </td> </tr> </table> </td></tr> </table> </td></tr> <tr> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev" target="_top" title=".NET Ringの前のサイトへ移動">前</a> </small> </td> </tr> </table> </td> <td> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list" target="_blank" title=".NET Ring参加サイト一覧">一覧</a> </small> </td></tr> </table> </td> <td width="33%"> <table class="convex button" width="100%" height="100%"> <tr><td align="center" valign="middle"> <small> <a href="http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> <a href="https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next" target="_top" title=".NET Ringの次のサイトへ移動">次</a> </small> </td> </tr> </table> </td></tr> </table> }} *ナビゲーションバーの自作 [#links] ナビゲーションバーを自作していただいても結構です。ただし、ナビゲーションバーを故意に隠したり、見え辛くしたり、あまりに小さくしないようにしてください。 ナビゲーションバーに使用するリンクは次のようなものです。この内、「次のサイトへ」、「前のサイトへ」、「リングのホームへ」は必ずナビゲーションバーに付けてください。 -次のサイトへ(''必ず付けてください'')~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=next -前のサイトへ(''必ず付けてください'')~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=prev -リング内のサイトを一覧表示~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=list -リング内のどこかのサイトをランダムに表示~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=random https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=random -リングのホームを表示します(つまりこのサイト)(''必ず付けてください'')~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=home -.NET Ringへの参加フォームを表示~ http://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=addform https://wiki.dobon.net/index.php?plugin=webring&ring=dotnet&id=(あなたのID)&mode=addform //これより下は編集しないでください #pageinfo([[:Category/.NET Ring]],2007-05-06 (日) 17:55:01,DOBON!,2007-05-07 (月) 00:07:23,DOBON!) |