多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
★バナーを使ったリンクの仕方&バナーが作れるサイト★
Animal Skinではオリジナルのバナーを配布しています。^^
文字リンクよりも若干楽しい感じになるので、もしよかったら使ってくださいね~♪








さて、ここではバナーとリンクについてのあれこれをおはなししたいと思います。


興味を持たれた方、詳しくは...↓をクリックで続きを読んでください。





実は、バナーの貼り方についての質問は予想以上にあったりするわけでして...
なので、ここではまずタグを公開しちゃいます。
簡単なんですよ~。^^

本当のことをいえば、本来はバナーをダウンロードして、自分のPCにいちど確保してからそれを再びブログサーバー上にアップして使うのが理想的なのですが...エキブロは直リンもできるようなので、どうしてもPCにダウンロードしてやるリンクの貼り方がわからないという人向けに、一応直リン用タグを...^^;
(でもやり方がわかる人はできればダウンロードしてくださいね~)

最初の肉球足跡のバナーを使ってリンクしたい場合は...こちらをメニュー欄などにコピぺ。

<a href="http://animalskin.exblog.jp" target="_blank"><img src="http://pds.exblog.jp/pds/1/200807/09/38/animalskinbanner1.gif" border="0"></a>


2つ目の小さいのでリンクしたい場合は...こちらをどうぞ。
<a href="http://animalskin.exblog.jp" target="_blank"><img src="http://pds.exblog.jp/pds/1/200807/09/38/animalskinbanner2.gif" border="0"></a>


3つ目の流れる文字のバナーでリンクしたい場合には...こちらをどうぞ。
<a href="http://animalskin.exblog.jp" target="_blank"><img src="http://pds.exblog.jp/pds/1/200807/09/38/animalskinbanner3.gif" border="0"></a>



すると...こんな風にリンクできるようになります。^^








メモ帳欄内でセンタリング(横幅内の中央に持ってくること)したいという人は、<center>と</center>で、希望箇所をくくってしまうとできます。



ところで、HTMLをよく知らないという人のために少し詳しく解説すると、

target="_blank" というのは、クリックしたときに別窓が開くということです。
すでに開いているウィンドウの画面を切り替える形でリンク先へ飛ばしたい場合は、ここを削っちゃえばOKということです。

画像URLのすぐ後にある border="0" というのは、画像の周りに縁取りのような枠ができるのを防いでいます。
これを忘れちゃったために、リンクバナーの一つ一つの周囲が青や紫の縁取りで囲まれちゃってる人を実は結構見かけるんですよね。
なのですっきりした画面を作るためにも、これは必要ですね。^^


f0165338_6998.gif


ちなみに「リンク文字や画像にカーソルを乗せるとペコンとへこむように見えるエフェクト」は...

CSS編集内のリンク部分の文字色設定の4つ目、
A:HOVERの{}の中に

position:relative; top: 1px; left: 1px;

というのを付け加えるとできるようになります。^^


もちろんこのタグを使えば、どんな画像をもリンクバナーにすることができます。
要するに同じタグで、リンク先と使用画像URLを変えればいいだけですからね。

トップ画像をオリジナルにして、オリジナルのフォントでブログタイトルを入れた場合、
同様に設定するとトップ画像をクリックして画面をリロードすることができるようになります。
(もちろんその場合のリンク先はご自分のブログURLでね)

ブログのサイドバーは横幅が150pxである場合はほとんどなので、
ブログに一番貼りやすい、または貼ってもらいやすいバナーは
横幅が80px~90px、縦が30px~34pxの「マイクロバナー」や「ミニバナー」と呼ばれるサイズのものです。

ちなみに、肉球マークがペタペタとなっているAnimal Skinバナーが90px × 34px、猫背景の上を文字が流れるタイプのバナーは88px31pxとなっています。


フォトショなどのプログラムがないとバナーが作れないと思っている人もいることでしょう。
もちろん、好きな写真を入れたり本当にオリジナルなものを作りたい人は、そういったグラフィックソフトが必要ですが、ブログタイトル程度が入った簡単なバナーであれば、ダウンロードしないでもいい(←ポイント高し!)オンラインのジェネレータで作ることができます。^^



いくつか紹介するので、興味のある人は試してみると楽しいかも...♪

私がAnimal Skin用バナーとして配布している3つのうち、肉球足跡のと、文字が流れるものは手持ちのプログラムで製作したものです。

...が、小さくて細いのはジェネレータによるものです。
英語サイトですが簡単なツールなので、あちこちいじっているうちにできると思います。^^

難点が一つだけあって、出来上がったバナーをPCに保存するときに、GIFやJPGではなくPNGになってしまうことです。
そのままだとちょっと使いにくいので、私はそれを後でフォトショでGIF画像に変換してます。

Adam Kalsey’s Botton Maker



こういう小さいのは、いかにもITっぽいというか、好きな人は好きですよね。^^
目立たないようにたくさんのバナーを貼りたい人にはいいかな...って、こういうバナーを作ってくれてるかどうかはリンク先のブログ/HPの管理人次第なのではありますが...(笑)


ツートーン・ベータ版



無料ですし、よくできてると思います。
シンプルで大人っぽいバナーが欲しい人にはいいんじゃないかな。^^

試しに一つ作ってみました・・・⇒


AutoLogo
開いたページの右側にある「リンク用ミニバナー作成」というのをクリック。



うーん...どちらかというと古いタイプのデザインかも。
ブログというものがここまで一般的になる前、HP用のバナーとして活躍したような感じ。
でもデザインの選択もたくさんあって、いいのかもしれません。
個人的にはもう少し今風な感じだったらいいのにな~とも思いますけどね。^^;
(なのでサンプルもつくりませんでした・笑)



無料バナー作成工房★ 



これは選択肢も多いし、よくできてますね~。
88×31のバナーがいとも簡単にできちゃいます。
女性ウケしそうなカワイイ系のデザインがたくさんありますね。
用意されたたくさんの背景の中から一つ選んで、好きなロゴを入れるのはもちろん、
自分の手持ちの写真を使っても作れるというのもポイント高いと思います。

・手持ちの写真(88×31に近いような小さいモノが理想)を使ってバナーを作りたい人用は
こちら

↓試しに作ってみました。

f0165338_5341745.jpg



・配布されている背景に文字だけを入れたい人用は
こちら

↓試しに作ってみました。

f0165338_5354991.gif


両方とも、文字の位置を動かすのがちょっと面倒なのですが(マウスで簡単に移動...というわけではないので)、まあそれも慣れればどうっていうことないと思います。

そしてなんと...私が手持ちのアニメーションGIF製作プログラムで作ったような、流れる文字のバナーまで作れちゃう!

...ということなのですが、これは自分でコマごとの画像を用意する必要があるらしい。
GIFアニメって、結局は昔のパラパラマンガと同じ仕組みですからね。
まあ、ここまでジェネレータでできるようになってたらよかったんですけどね~。惜しい!^^;
でもやってみたい人は...⇒こちら


ちなみにこのサイトはおそらく本来ヤフーブログ利用者のために製作されたもののように見えるのですが、エキブロもこんなサービスがあったらたくさんの人に喜ばれそうなのに...とも思いました。
エキサイトはブログサーバーの中では比較的コンサバで遊び心が少ないですからね。
(そこが好き...という私のような利用者もいるのも事実ですが)



...というわけで、バナーやリンクなどについてでした。

そして最後に...Animal Skinへのリンクをしてくださってる皆様、ありがとうございます♪ ^^
[PR]
Top▲ | by mari_ca by animal_skin | 2011-12-29 00:00 | バナーを使ったリンクの仕方
<< ★自分で撮った写真等をブログの... | ページトップ | ★プルダウンによる「最新の記事... >>
↓質問はこちらへ↓