カスタム基礎 第２回

続オリジナルアイコンを使ってボタンやバナーを作ろう♪


第２回の今回で仕上げに入ります
お楽しみに


前回用意したもの

①クリックしたときの移動先ＵＲＬ　（説明ではツイッターにしています）

②アイコン画像のアップロード先ＵＲＬ

こちらの二つを使います


まずはじめに次の文字列をメモ帳にでもコピーしてください

<a href="クリックした時の移動先ＵＲＬ" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のある場所" width="画像の幅" height="画像の高さ"></a>


何のことやらさっぱりな文字列ですね～

ここでまず赤字の部分に①のＵＲＬを張り付けましょう！
同様に青字には②のＵＲＬを貼り付けます。


<a href="クリックした時の移動先ＵＲＬ" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のアップロード先ＵＲＬ" width="画像の幅" height="画像の高さ"></a>


ピンクのマウスポインタを置くと出るコメントには好きな言葉を。
今回はツイッターでフォローするにしました。

注意画像の幅と高さは今回は１３０ｐｘ（幅などの単位）にしますが
他のアイコンとならべた時に大きさを揃えたいときに調節して下さい
それと説明の中で文字列が長くて改行されてますが実際には改行は入れてません


例：ツイッターでフォローするボタン

<a href="http://twitter.com/mastersanpo" title=" ツイッターでフォローする"><img src="http://stat.ameba.jp/user_images/20101006/13/how-i-got-over/4c/d1/p/o0128012810786034965.png" width="130px"
height="130px"></a>

これをコピーして

デザインの変更→サイドバーの設定→フリースペースの編集で
出てきた画面に貼り付けて保存したら、





完成
さっそく自分のブログを確認してみましょう

これを使えば友達のブログのフリースペースに自分のブログへ
　　飛ぶバナーを設置してもらうこともできますね
　　色々試してみましょう


どうでしょう２回にわたって説明しましたがへたくそでわかんないよ～
とかうまくいかないよ～という方はコメントなどでおっしゃってくださいね


それではお疲れ様でした

第１回目はこちら

特別編はこちら