みなさんおはようございます。
ゆっくり眠れましたか？
俺は昨日、寝不足だったんで、今は超気分スッキリです。
◆◇◆◇◆◇◆◇◆◇
前置きはさておいて、まずは一丁、目を覚ましてもらいましょう。
とりあえず、このペタボタン、押していただけませんか？
・・・いや、ペタしなくてもいいから、押してみろよ？
どうだった？
目が覚めた？
普段何気ないペタボタンは、いつもと違う動きをしませんでしたか？
・・・ん、そこのお前、押してないな？押してこい。
画像バナーを作りたい、とかオリジナルペタボタンを作りたい、
ってんだったら、まずは論より証拠！
実際に押してみて、体験したほうが手っ取り早い！
押してみた方、どうでしたか？
ああ、ついでに、フォローしてくれませんか？(笑)
◆◇◆◇◆◇◆◇◆◇
はい、今押してもらった偽ペタボタンに、今回の記事の内容が全て入っています。
前回、HTMLタグについての簡単な説明をさせていただきました。
今回はこのHTMLタグを使って、誰でも！簡単に！作れちゃう！
アメブロガー向け画像バナー・オリジナルペタボタンの作り方をご紹介します！
◆◇◆◇◆◇◆◇◆◇
さて、HTMLタグによって、文字を大きくしたり色を変えたりできる、っていうのは、
前回の記事でご説明しました。
ごちゃごちゃ言わないでさっさと
やり方だけ教えやがれっ！という方は
この記事の最後にやり方だけを書いたものを用意しましたので、
そちらを読んでくださいね！
でも、応用が利くやり方なので、読んでもらったほうがいいですよ。
今回の偽ペタボタンのHTMLタグを見てみましょう。
<a href="http://now.ameba.jp/tinydotcom/"><img alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif " width="100" height="100" /></a>
今回のHTMLタグはこんな感じになってます。
見やすいように改行しました。
横長の画像で切れちゃってますが気にしないでください。
◆◇◆◇◆◇◆◇◆◇
さて、赤い四角で囲んだ部分が、HTMLタグです。リンクタグといいます。
<a href="URL"></a>
こんな感じの構造になってます。
<a href="URL"></a>
URLの部分に、リンクさせたいところのURLを入れればいいわけです。
【例文】
<a href="http://now.ameba.jp/tinydotcom/" >フォローしてね</a>
こうやって書くと、「フォローしてね」という部分がリンクタグによって
クリックすると、フォローするページに移動するようになります。
実際に見てみましょう。
↑クリックしてみてください。
▽▲▽▲▽▲▽▲▽▲
では、この部分は？
<img alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif "
width="100" height="100" />
これはimgタグ、イメージタグといいます。
画像を呼び出すためのものです。
部分ごとに説明します。赤い文字をみてください。
<img alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif "
width="100" height="100" />
これは、alt変数って言うんですが、まぁわかりにくいので、
リンクの説明を表示させるようなものを入れるもの、とでも思ってください。
<img alt="フォローしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif "
width="100" height="100" />
こうやって書き換えると、偽ペタボタンに変化が現れます。
実際に偽ペタボタンに、マウスカーソルを合わせてみてください。
変化がわかりましたか？
さっきの偽ペタボタンとちょっとだけ違いますよね。
そういうことです。
次に進みます。赤い部分を見てください。
<img alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif "
width="100" height="100" />
これはsrc変数といいます。画像ファイルのURLが入っています。
ひらたく言うと、偽ペタボタンの絵が入っているアドレス(場所)を指します。
例えばここが、
ブラサンの絵のURLに置き換えると・・・。
<a href="http://now.ameba.jp/tinydotcom/"><img alt="ペタしてね" src=http://stat.ameba.jp/user_images/20100829/20/tinydotcom/84/d9/j/t02200100_0224010210720308661.jpg /></a>
ブラサンの写真そのものが偽ペタボタンに変わります。
さぁさぁ、なんとなく作り方がピ～ンと来ませんか？
ラストいきます！
<img alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_19.gif "
width="100" height="100" />
widthは幅、heightは高さって意味です。数値は、大きさを表します。
画像の幅、高さ、つまりヨコ・タテの大きさを指します。
色々数字をいじってちょうどいい大きさを探してみましょう。
ちなみに省略してもいいです。省略されると画像そのものの原寸大の大きさになります。
◆◇◆◇◆◇◆◇◆◇
さて、ここまでで大体のことはわかったでしょうか？
・・・え？わからない？
ごちゃごちゃ言わずにとっととやり方教えやがれと？
読まずに飛ばした？(((( ;°Д°))))
わかりました、お教えしますっ！
画像バナー・オリジナルペタボタン、いずれも原理は同じです。
今回は、リンクの作り方だけを教えます。
画像の加工の仕方や、文字入れのやり方については別の記事で書きます。
【必要なもの】
画像ファイル：デジカメの画像、イラスト、写メなど、画像ならなんでもOKです。大きさも問いません。
※JPEG、GIF、PNGのいずれかが良いと思います。
ケータイでも作れないことはないですが、パソコンで作業することをオススメします。
▽▲▽▲▽▲▽▲▽▲
①いつものように画像をアメーバブログの画像フォルダにアップデートします。
②このタグの中に必要なものを書いて、コピーします。
<a href="リンク先のURL">
<img alt="リンク先の説明文" src="画像フォルダにアップデートさせた画像のURL"/>
</a>
このタグの中の「リンク先のURL」に、リンクさせたい先のURLを入れます。
リンク先の説明文を入れてください。飛ぶ先の説明でいいです。
画像フォルダにアップデートした画像を、タグの中に入れてください。
③タブ全部をコピーして、ブログに貼り付けます。
貼り付けるときは、
HTMLタグを表示に切り替えてから貼り付けてください。
タグを非表示に戻すと・・・ちゃんと出ます！
◆◇◆◇◆◇◆◇◆◇
自画像に読者登録をリンクさせてみました。
よかったら読者登録してやっておくんなしっ！
CGデザイナーみたいな複雑な加工は本職ではないので出来ませんが、
文字入れとか簡単なものでよければ、画像加工のやり方も記事にします。
この記事を読んでわからないことがあれば、
コメントや、メッセージで質問していただいてもかまいません。
では、みなさん、またねっ！
