BlognPlusRing

ナビゲーションバーの設置方法です。
以下は現在あるナビゲーションバーの種類です。

 画像タイプ1
 
大きさが違うJPG画像
  3種類です

  BlognPlusRing  Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧 BlognPlusRing Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧
         brl.jpg                   brm.jpg
 BlognPlusRing Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧
    brs.jpg

 画像タイプ2
 
一番左上はJPG画像
 他は透過GIFです
  BlognPlusRing Webring登録 Webringホームページ 前の登録サイト ランダム 登録サイト一覧 次の登録サイト   BlognPlusRing Webring登録 Webringホームページ 前の登録サイト ランダム 登録サイト一覧 次の登録サイト
    brs2.jpg      brs21.gif 
 画像タイプ3
 
一番左上はJPG画像
 他は透過GIFです
 
  BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録   BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録   BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録   BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録
    brs3.jpg      brs31.gif      brs32.gif      brs33.gif
 BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録   BlognPlusRing 前のサイト ランダム 登録サイト一覧 次のサイト Webringホームページ Webring登録  
   brs34.gif      brs35.gif
 テキストタイプ
 このナビはリンクを
 貼ってあるだけで
 ほとんど何の手も
 加えられてませんが
 CSSで装飾をすると
 カッコイイナビが
 作れます 

BlognPlusRing
HOME/ LIST
PREV← RAN →NEXT

BlognPlusRing
<< HOME LIST >>

【ナビゲーションバーの設置方法】基本編
ウェブリング登録後に送られてきたメールにあるタグをブログの貼り付けたい位置に設置します。

[タグの一例] <br><!--標準タイプのナビゲーションバー 204x50ピクセル(タグ開始 -->
<imgsrc="http://blognplus.hiroba.de/brl.jpg"width="204"height="50"border="0"alt="BlognPlusRing"usemap="#brl">
<MAPname="brl">
<AREAshape="rect"coords="157,1,203,49"href="http://blognplus.hiroba.de/"target="new"alt="Webringホームページ">
<AREAshape="rect"coords="3,0,155,26"href="http://blognplus.hiroba.de/ering.cgi?no=0"target="new"alt="Webring登録ページ">
<AREAshape="rect"coords="2,28,46,47"href="http://blognplus.hiroba.de/ering.cgi?mode=back&t=0&id=1&no=0"target="_top"alt="前の登録サイト">
<AREAshape="rect"coords="47,28,67,47"href="http://blognplus.hiroba.de/ering.cgi?mode=randam&id=1&no=0"target="_top"alt="ランダム">
<AREAshape="rect"coords="68,28,110,47"href="http://blognplus.hiroba.de/ering.cgi?mode=next&t=0&id=1&no=0"target="_top"alt="次の登録サイト">
<AREAshape="rect"coords="112,28,155,47"href="http://blognplus.hiroba.de/ering.cgi?mode=all&no=0"target="new" alt= "登録サイト一覧">
<AREA shape="default"nohref>
</MAP>
<!--標準タイプのナビゲーションバー(タグ終了)-->

[設置例]
BlognPlusRing  Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧  

【ナビゲーションバーの設置方法】応用編

1.ナビゲーション画像を自分のサイトにダウンロードして使う場合
使いたい画像用のタグの以下の赤い部分を自分のブログに合うように書き換えます。

<!--標準タイプのナビゲーションバー 204x50ピクセル(タグ開始)-->
<img src="< /FONT>
http://blognplus.hiroba.de/brl.jpg

例えば、skin用画像としてアップした場合、 http://xxxx.co.jp/xxxx/skin/images/brl.jpg
というように書き換えます。

2.自分で作った画像を使う場合
画像タイプ2画像タイプ3を見ていただけると分かるように、
これらは同じクリッカブルマップのタグを画像だけ差し替えて使用しています。
ですので、同じ位置に同じ意味の文字や絵を入れた画像を自分で作ることによって、
オリジナル画像のナビゲーションバーを設置できます。

簡単なのは、現在あるナビゲーションバーの画像を色違いに作り直して、
同じ名前でそのままアップロードすることです。
その際、1.の変更をし忘れないようにしてください。

[作った色違い画像の設置例]
BlognPlusRing  Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧  
また、自分で画像を作る場合は、BlognPlusRingと必ずどこかに入れるようにしてください。

[作った画像の設置例]
BlognPlusRing  Webringホームページ Webring登録ページ 前の登録サイト ランダム 次の登録サイト 登録サイト一覧


↓はクリッカブルマップの配置図です。自分で
画像を作るときの参考にしてください。

クリッカブルマップ配置図
 

3.テキストタイプのバナーをCSSでカスタマイズして設置する場合
テキストタイプのバナーはメールで配布された時点では色指定も何もないので、
そのまま設置するとブログの文字色指定と同じ色で表示されます。
それらの指定をCSS等でカスタマイズすることによって、
独自のバナーを作ることが出来ます。

参照:ブログパーツとかBlogn+リングとか(by 俺的メモ)
上に紹介したサイトさんが独自にカスタマイズしたテキストバナーを使ってらっしゃいます。
ぜひ参考にしてください。

バナーを増やしたせいで登録メールが非常に辛い事になってきたので、
透過GIFに関しては下のナビ画像バナーセットをダウンロードしてご使用ください。
使用するときは、同じ番号のタグのリンク先画像名を変更して使って下さい。

[変更ヶ所]
<!--ミニタイプのナビゲーションバー3 88x31ピクセル(タグ開始)-->
<IMG src=
http://blognplus.hiroba.de/brs3.jpg

余談ですが、上のピンクと黒のバナーも使いたい方がいらしたら同じように使って下さってけっこうです。
どうぞよろしくお願いします。

バナーの画像セットをアップしました。使う方は↓をクリックしてDLしてください。
ナビ画像バナーセット
ピンクのバナーを作るのに使用したフォントのフォント屋さんです。

あくび印(管理人:あくびちゃん)

 Copyright ©2008 BlognPlusRing管理人All rights reserved.