新しい、パソコンを☆買いたい!

水彩とデジタル絵とグラブル民

スポンサードリンク

Photoshopなどの画像加工ソフトなどを使わなくても、美麗な画像リンクを作る方法~

別のサイトのリンクを貼る時、なるべくならそのサイトの情報が伝わりやすい画像リンクを貼りたいと~

誰もが思っているかも知れません。

 

はてなの、自動で形成されるリンクも良いのですが・・・・・

 

それよりも、他には無いリンクを貼りたい!人に、簡単に画像リンクを作成する方法を伝授したいと思います。

 

 

そもそも画像リンクって一体どんなモノ?

と言う~基本的な所から説明しますと、よくあるバナーだったり商品画像クリックすると購入画面に行けたりするのが、画像リンクになります。

 

私のブログでは~最近ではこの記事~

syaoruu.hateblo.jp

の、下の方に、こんな画像リンクを貼っているんですが~

 

f:id:cloise:20160825144150j:plain

この、貼ってある画像がyou tubeのリンクになっているのですが、クリックすると別窓で移動する事が出来る様に仕込んでいるのです。

 

因みに、この画像は、動画からwindowsのシッピングツール(ハサミのアイコンの)と言うツールで部分的に画像をカットして保存して使っています。

 

~と言うか、この画像も~あの画像も~シッピングツールで切抜きして保存しているので、かなり使えます!!

 

 

どんな手順でこの別窓でリンク先サイトに移動する事が出来るのか~順を追ってみる事に

しましょう。

 

1>サイトを選ぶ

まずはリンクしたいサイトを選びますが、今回はこのサイトのこのページにリンクしようと思います。

hanabi.walkerplus.com

 

はてなの~このリンクでもイイんですけどね、何か~迫力に欠けるって言うか、オリジナリティは全く見いだせない~と言うか~。

 

と、思ったら、早速行動です。

 

このサイトのこの部分を開いて~

f:id:cloise:20160825145243j:plain

 

 

この部分をカットします。

f:id:cloise:20160825144332j:plain

 

おお~!(゜O ゜)大迫力!!

 

 

2>リンクタグの作成

で、どうやってリンクを作るのかと言うと~

 

このタグを用意して欲しいんですよ。

f:id:cloise:20160825145536j:plain

 

おっと!!

これはたくさんですねー!笑

 

私はこうやって普段からストックしているんですが、要は、

 

<a href=""target="_blank"><img src=""></a>

 

このタグを使うのですね。

 

別窓表示させるのに必要なのがtarget="_blank"なのですが、時々既存のタグを貼ったままにしておくと、ブログを表示していたページでリンク先に飛んでしまう事があるので、リンクタグを注視してみてください。

 

で、そのリンクタグですが、

 

<a href="(ここにリンクしたいサイトのURLを貼る)"target="_blank">

 

んですね。

 

貼ったら~次に、

 

<img src="(リンクしたい画像のアドレスを貼る)"></a>

 

んですが、その画像のアドレスはどこから持ってくるのかと言うと~

 

f:id:cloise:20160825150426j:plain

この記事のHTML編集画面ですが、「この部分をカットします」の下の画像コードをそのままコピペするのです。

 

f:id:cloise:20160825155026j:plain

 

と、出るんですが、この中のこの部分を~

 

f:id:cloise:20160825155141j:plain

 

コピペして、この部分

 <img src="(リンクしたい画像のアドレスを貼る)"></a>

 

に、貼って下さい。

 

すると、こんな感じになる筈です。

 

f:id:cloise:20160825155243j:plain

 

これを、HTML画面で貼りつけると~こんな感じで表示されるのです。

 

f:id:cloise:20160825144332j:plain

 

画像クリックして見てください!

 

花火のサイトに行けるはずです。

 

 

でも、何か画像がデカいから嫌だな~と言う場合は~

このツールを使います。

f:id:cloise:20160825144445j:plain

 

縮小専用のツールなんですが、この表示に記載している数値はお好みで変えられるので、あくまでも私の使用例としてご理解ください。

 

このツールは、上の画像クリックでダウンロードサイトに行けるので、是非入手してみてください。

 

使い方はダウンロードサイトに載っていますが、色々数字を入れて小さくして使って覚えた方がイイかも知れません。

 

色んな加工も出来るので、結構使えるツールだと思いますよ☆

 

 

因みに、先程の花火のリンク画像を縮小して作った画像リンクは~

 

f:id:cloise:20160825153433j:plain

 

こんな感じに、なりました!

 

サイズは、タテ300 ヨコ280!!

 

小さい!!ですね笑

 

 

と言う感じで~サイトのリンクを貼ると~

色々便利だったり分かりやすくなったりして、良いかと思います。

 

縮小AIRで画像を加工してみたりして、一風変わった画像リンクを作ってみてもイイかも知れません。

 

お好みの画像を作って楽しいリンクを貼って行きましょう~。

 

 

と言う事で、また次回!

 

 

スポンサードリンク