別のサイトのリンクを貼る時、なるべくならそのサイトの情報が伝わりやすい画像リンクを貼りたいと~
誰もが思っているかも知れません。
はてなの、自動で形成されるリンクも良いのですが・・・・・
それよりも、他には無いリンクを貼りたい!人に、簡単に画像リンクを作成する方法を伝授したいと思います。
そもそも画像リンクって一体どんなモノ?
と言う~基本的な所から説明しますと、よくあるバナーだったり商品画像クリックすると購入画面に行けたりするのが、画像リンクになります。
私のブログでは~最近ではこの記事~
の、下の方に、こんな画像リンクを貼っているんですが~
この、貼ってある画像がyou tubeのリンクになっているのですが、クリックすると別窓で移動する事が出来る様に仕込んでいるのです。
因みに、この画像は、動画からwindowsのシッピングツール(ハサミのアイコンの)と言うツールで部分的に画像をカットして保存して使っています。
~と言うか、この画像も~あの画像も~シッピングツールで切抜きして保存しているので、かなり使えます!!
どんな手順でこの別窓でリンク先サイトに移動する事が出来るのか~順を追ってみる事に
しましょう。
1>サイトを選ぶ
まずはリンクしたいサイトを選びますが、今回はこのサイトのこのページにリンクしようと思います。
はてなの~このリンクでもイイんですけどね、何か~迫力に欠けるって言うか、オリジナリティは全く見いだせない~と言うか~。
と、思ったら、早速行動です。
このサイトのこの部分を開いて~
この部分をカットします。
おお~!(゜O ゜)大迫力!!
2>リンクタグの作成
で、どうやってリンクを作るのかと言うと~
このタグを用意して欲しいんですよ。
おっと!!
これはたくさんですねー!笑
私はこうやって普段からストックしているんですが、要は、
<a href=""target="_blank"><img src=""></a>
このタグを使うのですね。
別窓表示させるのに必要なのが~target="_blank"なのですが、時々既存のタグを貼ったままにしておくと、ブログを表示していたページでリンク先に飛んでしまう事があるので、リンクタグを注視してみてください。
で、そのリンクタグですが、
<a href="(ここにリンクしたいサイトのURLを貼る)"target="_blank">
んですね。
貼ったら~次に、
<img src="(リンクしたい画像のアドレスを貼る)"></a>
んですが、その画像のアドレスはどこから持ってくるのかと言うと~
この記事のHTML編集画面ですが、「この部分をカットします」の下の画像コードをそのままコピペするのです。
と、出るんですが、この中のこの部分を~
コピペして、この部分
<img src="(リンクしたい画像のアドレスを貼る)"></a>
に、貼って下さい。
すると、こんな感じになる筈です。
これを、HTML画面で貼りつけると~こんな感じで表示されるのです。
画像クリックして見てください!
花火のサイトに行けるはずです。
でも、何か画像がデカいから嫌だな~と言う場合は~
このツールを使います。
縮小専用のツールなんですが、この表示に記載している数値はお好みで変えられるので、あくまでも私の使用例としてご理解ください。
このツールは、上の画像クリックでダウンロードサイトに行けるので、是非入手してみてください。
使い方はダウンロードサイトに載っていますが、色々数字を入れて小さくして使って覚えた方がイイかも知れません。
色んな加工も出来るので、結構使えるツールだと思いますよ☆
因みに、先程の花火のリンク画像を縮小して作った画像リンクは~
こんな感じに、なりました!
サイズは、タテ300 ヨコ280!!
小さい!!ですね笑
と言う感じで~サイトのリンクを貼ると~
色々便利だったり分かりやすくなったりして、良いかと思います。
縮小AIRで画像を加工してみたりして、一風変わった画像リンクを作ってみてもイイかも知れません。
お好みの画像を作って楽しいリンクを貼って行きましょう~。
と言う事で、また次回!
スポンサードリンク