カスタム基礎 第2回
続オリジナルアイコンを使ってボタンやバナーを作ろう♪
第2回の今回で仕上げに入ります
お楽しみに![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
前回用意したもの
①クリックしたときの移動先URL (説明ではツイッターにしています)
②アイコン画像のアップロード先URL
こちらの二つを使います
まずはじめに次の文字列をメモ帳にでもコピーしてください
<a href="クリックした時の移動先URL" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のある場所" width="画像の幅" height="画像の高さ"></a>
何のことやらさっぱりな文字列ですね~![汗](https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif)
ここでまず赤字の部分に①のURLを張り付けましょう!
同様に青字には②のURLを貼り付けます。
<a href="クリックした時の移動先URL" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のアップロード先URL" width="画像の幅" height="画像の高さ"></a>
ピンクのマウスポインタを置くと出るコメントには好きな言葉を。
今回はツイッターでフォローするにしました。
注意
画像の幅と高さは今回は130px(幅などの単位)にしますが
他のアイコンとならべた時に大きさを揃えたいときに調節して下さい
それと説明の中で文字列が長くて改行されてますが実際には改行は入れてません
例:ツイッターでフォローするボタン
<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>
これをコピーして
デザインの変更→サイドバーの設定→フリースペースの編集で
出てきた画面に貼り付けて保存したら、
完成![クラッカー](https://stat.ameba.jp/blog/ucs/img/char/char2/098.gif)
さっそく自分のブログを確認してみましょう![目](https://stat.ameba.jp/blog/ucs/img/char/char2/242.gif)
これを使えば友達のブログのフリースペースに自分のブログへ
飛ぶバナーを設置してもらうこともできますね
色々試してみましょう![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
どうでしょう2回にわたって説明しましたがへたくそでわかんないよ~
とかうまくいかないよ~という方はコメントなどでおっしゃってくださいね![!!](https://stat.ameba.jp/blog/ucs/img/char/char2/176.gif)
それではお疲れ様でした![グッド!](https://stat.ameba.jp/blog/ucs/img/char/char2/187.gif)
第1回目はこちら
特別編はこちら
第2回の今回で仕上げに入ります
お楽しみに
![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
①クリックしたときの移動先URL (説明ではツイッターにしています)
②アイコン画像のアップロード先URL
こちらの二つを使います
まずはじめに次の文字列をメモ帳にでもコピーしてください
<a href="クリックした時の移動先URL" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のある場所" width="画像の幅" height="画像の高さ"></a>
何のことやらさっぱりな文字列ですね~
![汗](https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif)
ここでまず赤字の部分に①のURLを張り付けましょう!
同様に青字には②のURLを貼り付けます。
<a href="クリックした時の移動先URL" title=" マウスポインタを置くと出るコメント"><img src="アイコン画像のアップロード先URL" width="画像の幅" height="画像の高さ"></a>
ピンクのマウスポインタを置くと出るコメントには好きな言葉を。
今回はツイッターでフォローするにしました。
注意
![ビックリマーク](https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif)
他のアイコンとならべた時に大きさを揃えたいときに調節して下さい
それと説明の中で文字列が長くて改行されてますが実際には改行は入れてません
例:ツイッターでフォローするボタン
<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>
これをコピーして
デザインの変更→サイドバーの設定→フリースペースの編集で
出てきた画面に貼り付けて保存したら、
![](https://stat.ameba.jp/user_images/20101006/13/how-i-got-over/4c/d1/p/o0128012810786034965.png?caw=800)
完成
![クラッカー](https://stat.ameba.jp/blog/ucs/img/char/char2/098.gif)
さっそく自分のブログを確認してみましょう
![目](https://stat.ameba.jp/blog/ucs/img/char/char2/242.gif)
![ひらめき電球](https://stat.ameba.jp/blog/ucs/img/char/char2/089.gif)
飛ぶバナーを設置してもらうこともできますね
色々試してみましょう
![音譜](https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif)
どうでしょう2回にわたって説明しましたがへたくそでわかんないよ~
とかうまくいかないよ~という方はコメントなどでおっしゃってくださいね
![!!](https://stat.ameba.jp/blog/ucs/img/char/char2/176.gif)
それではお疲れ様でした
![グッド!](https://stat.ameba.jp/blog/ucs/img/char/char2/187.gif)
第1回目はこちら
特別編はこちら