2008-08-16 15:13:49

バナーの貼り方

テーマ:ブログ快適・お役立ち
今日はアメばたで質問があったので
バナーの貼り方を記事にしてみようかと。

ではいつも行ってるB'zファンサイト「FIXEN」のバナーを貼ってみたいと思います。

まずは記事を書くところでタグ編集エディタに変えます。

タグ編集エディタ

赤丸のところを最初にクリックします。
じゃないと後になると編集内容が消えてしまいます。
それにこれをしないと貼っても意味ないので。


ではバナーを用意。

サイト上で配布されているものは画像の上にカーソルを合わせ、右クリック。
するとこんな画像が出てきます。

名前を付けて画像を保存

赤線が付いてるところをクリック!
そして名前を付けて保存します。

自分で作ったものはここから。


それをアメブロの画像フォルダにアップします。

画像フォルダ

赤丸が付いてるところです。

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


FIXENバナー

オリジナルバナーだそうです。
シンプルでいいですね~。

でもこれだけではもちろん相手先に飛ぶことが出来ません。

なのでここでこんなものをご用意。

<a href="とび先のURL" target="_blank"><img src="バナー画像のURL" border="0" alt="とび先のブログ・サイト名" /></a>

こちらがバナーの要素になります。

じゃ説明を。

■バナー画像のURLの取り出し方
これは先ほど画像フォルダにあげてもらった画像の
オリジナルサイズのURLを取り出す方法です。

ブラウザによって違うので注意が必要です。

■IE

画像フォルダ上の画像をクリック
すると画像が大きめに表示されるので、その画像の上で右クリック
その中にプロパティがあるのでそれをクリック

こんな画像が出てきます。

IE

こいつをコピペです。

■firefox

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"を消してください。


これを記事を書くところへ入れると・・・

FIXEN

はい、バナーの完成です!
ちょっと試しに押してみてください。

どうでしょう?
飛んだと思いますが…

これでバナーのサイト先に飛ぶことが出来ます。

これを使うのはURLだけで飛ぶのは何か味気ないって方にお勧めですね。
でもわざわざ<>を<>に変える必要はないのでコピーしてもらったら
それを記事に貼り付けて、題名をバナーの貼り付けにして
月末くらいに下書き保存しとけば、いつでも使いたい時に使うことが出来て便利ですよ。


【追記】
ここまで出来れば次は簡単な物を。
これは特にランキング参加してるバナーには役立ちますよ。

※ランキングバナーはその月の末日に下書き保存しておくと便利ですよ。

下書きしておいたバナーのタグをいちいちタグ編集エディタに入れないで
この下。

HTMLを表示

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


以上でバナーの貼り付け方を終わります。
質問がある方はここにコメントください。

分かる範囲でお答えします。

ではでは。


■ランキングに参加中。
うまく貼れたよーと思ったら、応援クリックお願いします。

 

コメント

[コメントをする]

211 ■出来ません><

GIFアニメを作ってみたんですけど

<a href="http://ameblo.jp/2212347/" target="_blank"><img src="http://stat.ameba.jp/user_images/20110802/10/2212347/f1/ac/g/t02200138_0640040011389418219.gif" border="0" alt="たくみのピグ裏技" /></a>

進みません

212 ■オリジナルのURL

takumi@falconさん
画像のURLがオリジナルのURLではなく縮小されたURLなので記事に書いてある通りにURLを取り出してください。

213 ■無題

あの

まずアップロード事態できないのですが・・・

形式も間違ってないし

問題がないはずなんですよ

画像の

用量は17.3KBで

形式はgifです

ホントにお願いします

214 ■形式と容量

弟パンマンさん
形式もあってますし容量も範囲内ですのでアメブロ側の問題かと思われますが、今は特に障害が発生してるわけではなさそうですので何とも言えないです。

形式をjpegかpngにしてあげてみてはいかがでしょう。

215 ■無題

すいません

どう変えるかわからないです

そこもお手数ですが教えていただければ幸いです

お願いします

216 ■記事

弟パンマンさん
記事にしてありますのでブログ内検索ください。

217 ■無題

今までどんだけやっても出来なかったのにできましたーー  本当に感謝でいっぱいですーー  有難うございました!

218 ■おめでとうございます

はっしーさん
無事に出来て良かったです(・∀・)

219 ■めちゃめちゃThanks

会社の社長がやってるブログのバナー整理を突然命じられて。。
半泣きになっていたところ、かな~り助けられました!!
自分がアメブロやっていないからもぅ全く分からないところ、無事終了。
有難うございます!!
案の定画像のサイズ違いでズレが出ましたが、Photoshopでいじって修正。
ズレた時焦りました。社長ブログUPの頻度がすごいんです。
バレる~って思ってアセアセ。

無事終了!大感謝です!!

220 ■いえいえ

Sweets-Sweetsさん
無事に完了したようでよかったです(^∇^)

221 ■無題

初めまして^^
初コメです。えっと、iMacの場合は、
どうすればいいんですか???
iMacなので、やり方がわかりません(泣)
どうすればいいでしょうか???
教えてください!!!( °д°)

222 ■あいまっく

【 ✿ グ ミ ✿ 】ー G U M I ーさん
バナーのタグなどはWinやMacだからという事はないですよ。
このままで出来ると思います。

223 ■無題

そうですか!では、さっそく
試してみますねо(ж>▽<)y ☆
教えてくださってありがとうございます!

224 ■無題



質問なんですが
ピースさんみたいに
バナーの下に
URLを貼りたいのですが
どうやったらできますかね?

225 ■バナー

【 ✿ グ ミ ✿ 】ー G U M I ーさん
はい、頑張ってみてください(^∇^)

226 ■記事

やまだみゆう〆´´さん
記事をななめ読みせずしっかりと読んでみてください。
リンクを貼ってますよ。

227 ■無題

ピースさんのバナーを張らせていただきました!

いつもこっそり見ています(笑)
とても役に立つので参考にしています。
これからも頑張ってください!
(バナー勝手にはってよかったですか?)

228 ■ありがとうございます

雫さん
こっそり見て頂き、バナーも貼っていただきありがとうございます(・∀・)
バナーは貼るも外すも自由なので大丈夫ですよ。

229 ■ありがとうございました!!

おかげで貼れなかったバナーを
貼ることができました!!

感謝です!!

230 ■おめでとうございます

Chibiさん
無事に貼れたのでよかったです!

231 ■無題


貼り方が全然分からなかったので凄く参考になりました!
無事貼る事が出来ました!^〇^

有難うございます!^^。

232 ■バナー

チュロ酢さん
無事に貼れたようでよかったです(^∇^)

233 ■こんばんは

ほかの(ルームに飛ぶとか)は同じやりかたでいいのでしょうか?

234 ■他のやり方

♡㌧㌧留美㌧㌧♡さん
こんばんは。

はい、同じやり方ですよ。
飛び先のURLを変更すればおkです。

235 ■無題

意味がさっぱり分かりません・・・・・・

236 ■はじめまして。


タグを使わせていただいたのですが、


「リクエストは既に処理中であるか無効です 」

と表示されてしまいます。
表示されないものもありました。

何か違うんですか?

ご回答よろしくお願いします。

237 ■リクエスト処理

ちゆさん
初めまして。

>「リクエストは既に処理中であるか無効です 」
これは保存がうまくできなかった時に現れるものなのでもう一度保存してやれば消えますよ。
何回やってもダメな場合は一度そのページを更新して再度やり直してみてください。

違いは保存されたか保存されてないかです。

238 ■無題


成る程!
よくわかりました。

ありがとうございます。

239 ■いえいえ

ちゆさん
解決できたようでよかったです。

240 ■無題

できました!ありがとうございます

241 ■おめでとうございます

ぽてと@永遠の5歳さん
無事にできたようでよかったです。

242 ■無題

おかげ様でありがとうございました<m(__)m>

☆☆

243 ■いえいえ

おみっつぁんさん
参考になったようでよかったですm(__)m

244 ■無題

すいません
バナーってなんですか?
教えてください

245 ■バナー

✿ミィ~ちゃん✿さん
せっかくパソコンをお持ちなのでバナーで検索してみてください。
バナーの意味が分かったらこの記事を見て挑戦してみましょう。

246 ■無題


役に立ちました!

ありがとうございます!

247 ■こちらこそ

≪海≫さん
見て頂いてありがとうございます。
役に立ったようでよかったです(・∀・)

248 ■無題

画像のアドレス(URL)がでてきません。

プロパティまでは出てきたのですが、URLだけないんです・・・

無料バナー作成工房で作ったものなんですけど・・・。

249 ■画像のアドレス

きなぴぃさん
先ほど確認したのですがプロパティの中にありましたよ。
やり方を間違ってる可能性があるのでもう一度記事をよく読んでやってみてください。

250 ■無題

もう一回初めから作り直したらできました!

本当にありがとうございました。

251 ■おめでとうございます

きなぴぃさん
無事に出来あがったようでよかったです。

252 ■無題

いきなりすいません。
とび先のブログ・サイト名のURLはどうやって取り出すんですか?

253 ■無題

You are perfect!! ありがとう:)

254 ■いえいえ

華さん
どういたしまして~。

255 ■無題

アニメのバナーが中々貼れなくて

困っていましたが、おかげさまで無事貼れました!

本当にありがとうございました!!

256 ■アニメのバナー

ルル★⌒(●ゝω・)さん
無事にはれたようでよかったです(・∀・)

257 ■無題

バナーのやり方がわかりました。
ありがとうございました

258 ■いえいえ

✿なぁたん✿さん
やり方が分かったようでよかったです。

259 ■助かりました

すごく困っていたんですが
おかげで無事バナーが付きました

ありがとうございました

今後も読みたいので
読者申請しました

可能であれば承認おねがいいたします。

めがねっこ

260 ■いえいえ

めがねっこさん
無事にバナーが貼れたようでよかったです。
読者承認しておきました。
よろしくお願いします。

コメント投稿

[PR]気になるキーワード

ピースのAMEBLO CANTABILE