バナーの貼り方
テーマ:ブログ快適・お役立ちバナーの貼り方を記事にしてみようかと。
ではいつも行ってるB'zファンサイト「FIXEN」のバナーを貼ってみたいと思います。
まずは記事を書くところでタグ編集エディタに変えます。

赤丸のところを最初にクリックします。
じゃないと後になると編集内容が消えてしまいます。
それにこれをしないと貼っても意味ないので。
ではバナーを用意。
サイト上で配布されているものは画像の上にカーソルを合わせ、右クリック。
するとこんな画像が出てきます。

赤線が付いてるところをクリック!
そして名前を付けて保存します。
自分で作ったものはここから。
それをアメブロの画像フォルダにアップします。

赤丸が付いてるところです。
※サイトでは直リンク不可がほとんどです。
必ずダウンロードしてアメブロの画像フォルダにアップしてください。

オリジナルバナーだそうです。
シンプルでいいですね~。
でもこれだけではもちろん相手先に飛ぶことが出来ません。
なのでここでこんなものをご用意。
<a href="とび先のURL" target="_blank"><img src="バナー画像のURL" border="0" alt="とび先のブログ・サイト名" /></a>
こちらがバナーの要素になります。
じゃ説明を。
■バナー画像のURLの取り出し方
これは先ほど画像フォルダにあげてもらった画像の
オリジナルサイズのURLを取り出す方法です。
ブラウザによって違うので注意が必要です。
■IE
画像フォルダ上の画像をクリック
すると画像が大きめに表示されるので、その画像の上で右クリック
その中にプロパティがあるのでそれをクリック
こんな画像が出てきます。

こいつをコピペです。
■firefox
Firefoxはもっと簡単です。

画像フォルダ上で画像をクリック→拡大されたら画像の上で右クリック
画像のURLコピーをクリック。
これでオリジナルURLがコピーされたので後は貼りつけるだけです。
アドレスは一緒ですがブラウザによって見え方が違うので気をつけてください。
バナーのURLのとこに右クリックで貼りつけです。
そして飛び先のURLも入れます。
<a href="http://www.fixen.net/index2.html" target="_blank"><img src="http://stat.ameba.jp/user_images/20090913/19/bz-125-norinori/76/ee/j/o0200004010252820383.jpg" alt="FIXEN"/></a>
さすればこんな感じになります。
※新しいウィンドウで開きます。
同じウィンドウで開きたい場合はtarget=" _blank"を消してください。
これを記事を書くところへ入れると・・・

はい、バナーの完成です!
ちょっと試しに押してみてください。
どうでしょう?
飛んだと思いますが…
これでバナーのサイト先に飛ぶことが出来ます。
これを使うのはURLだけで飛ぶのは何か味気ないって方にお勧めですね。
でもわざわざ<>を<>に変える必要はないのでコピーしてもらったら
それを記事に貼り付けて、題名をバナーの貼り付けにして
月末くらいに下書き保存しとけば、いつでも使いたい時に使うことが出来て便利ですよ。
【追記】
ここまで出来れば次は簡単な物を。
これは特にランキング参加してるバナーには役立ちますよ。
※ランキングバナーはその月の末日に下書き保存しておくと便利ですよ。
下書きしておいたバナーのタグをいちいちタグ編集エディタに入れないで
この下。

HTMLタグを表示を押します。
そして下書きしといたタグをコピペします。
そしてもう一度、タグ非表示に戻します。
これで普通に記事を書く時にうまい事バナーを貼る事が出来ます。
タグ編集エディタのようにプレビューを押さないと確認できないよりは
ススッとどんな感じになるのか見れるので楽ですよね。
しかしここで注意点が!
<br />
この改行タグを入れて下書き保存しといてください。
俺のでいえば、こんな感じ。
ランキングに参加中。<br />
と思ったら、クリックお願いします。<br />
<br />
この下にランキングのバナーを追加
これを入れないまま下書きして、貼ろうとしても
改行されないで、おかしな表示になってしまいます。
タグ編集エディタを多用する方は改行なしバージョンも作って保存しておいた方が便利ですよ。
上の下書きのものをタグ編集エディタに入れると、いっぱい改行されてものすごい間隔が空いてしまうので。
【追記】
バナーの上にカーソルを乗せると名前が出るやり方
サイドバーでのバナー配布の仕方はこちら
ではここでもう一個。
今度はサイドバーへのバナーの貼り付けかたです。
まずは管理画面からブログ→サイドバーの設定→フリースペースの編集に行きます。
そこへ全く同じように
<a href="http://www.fixen.net/index2.html" target="_blank"><img src="http://stat.ameba.jp/user_images/20090913/19/bz-125-norinori/76/ee/j/o0200004010252820383.jpg" alt="FIXEN"/></a>
を貼り、保存してください。
そしたらプレビューの欄に貼った際の感じが現れます。
それで良ければおkです。
飛べるかどうかはアメンバー限定公開って書いてあるボタンの上に
表示を確認ってのがあるのでブログ上でどのように表示されるのか確認してください。
でもここで注意が必要です!
バナーは自分のスキンのサイドバーの横幅以下の物にしましょう。
でないとおかしなことになります。
基本、170px以下だと大丈夫じゃないかなって思います。
これは正直自信ないので、自分で表示して確認してみてください。
※どうしてもバナーがはみ出ちゃうって人は
border="0"の後ろへこれを付け加えてみてください。
width="99%"
この%の数字はいいサイズに見ながら変更してください。
それとサイドバー配置でフリースペースを
ドラッグ&ドロップで使用する方に入れて保存してください。
そしたらサイドバーにバナーが現れます。
もちろん最初からフリースペースが使用する方に入ってる方はそのままでおkです。
これでバナーの貼り方はokです!
今度はオリジナルバナーを自分で作ってみるなんてのもいいかもしれません。
そのとき役に立ちそうなサイトをご紹介。
無料バナー作成工房
ここは文字入れなんかでよくお世話になってます。
俺もオリジナルバナーを作らないと。
それにはまずデザインからだ。
いかんせんセンスないからな~w
以上でバナーの貼り付け方を終わります。
質問がある方はここにコメントください。
分かる範囲でお答えします。
ではでは。
■ランキングに参加中。
うまく貼れたよーと思ったら、応援クリックお願いします。
同じテーマの記事
- Google AdSense コンテン… 02月17日
- 忍者AdMax 12月分収益公開 01月31日
- 忍者AdMaxで収益をあげよう 登録編 01月30日
- 最新の記事一覧 >>













