GIMPでイメージマップ(画像内に複数リンク)を作ってみよう - 稼げない初心者アフィリエイト救済 ASAP塾

アフィリエイト川柳にご投票いただきありがとうございました。
近日結果をブログにUPいたします。

 

カエテンクロスレビュー&特典ページはバナーをクリック↓


カエテンクロスSEOテンプレート あずレビュー&特典

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

GIMPでイメージマップ(画像内に複数リンク)を作ってみよう

GIMPを普段使わないあずですが
イメージマップを作りたい時だけ使います。

イメージマップ???
画像内に複数のリンクを埋め込むことです。

簡単な例を作ってみたのでご覧ください。

画像内に複数のリンクを埋め込めるイメージマップ


適当なイメージマップ画像を作ってみました。
「Pixlr」高機能・軽快・画像作成無料ツールで作りました)

SEO対策済無料ブログテンプレートはこちらアメブロのアクセスアップに効果的なツールはこちら無料で1カラムレビューページを作れるツールはこちら
3つの「こちら→」があります。
それぞれ別ページへのリンクが貼ってあります。
(今回あずのレビューページにリンクさせていただいております)

このように画像内に複数リンクを埋め込むことができます。
イメージマップを使うと
ヘッダーバナーにリンクを埋め込むこともできるわけです♪


画像を作りアップロードする


リンクを埋め込みたい元画像を作りましたら
イメージマップを設置したいブログやサイトにアップロードします。
画像URLをメモしておいてください。


GIMPのイメージマップ作成画面を立ち上げる


GIMP上で、作った元画像を開きます。

フィルタ>ウェブ>イメージマップ をクリックします。
gimp1.gif

すると別画面が立ち上がります。
この画面でリンクを埋め込んでいきます。


リンクする部分を指定する


今回リンクしたい部分が角丸なため
多角形選択ツールをクリックして
リンクしたい部分をなぞっていきます。
(四角や丸の時はその上にあるボタンを使用します)
gimp2.gif

なぞり終わったらその場でダブルクリックします。
するとリンク設定画面が立ち上がります。


リンク先と代替テキストを入れる


立ち上がった画面で
リンク先と代替テキストを入れます。
代替テキストはaltで入ります。
マウスオーバーでタイトルを出したい場合は後でソースに「 title=""」を追加することで可能です。
gimp3.gif

適用ボタンをクリックしてますが、「OK」でいいです。

このようにしてリンクを埋め込みたい部分を一つづつ設定していきます。
今回は3つです。設定が終わるとこうなります。
gimp4.gif


完成したイメージマップを保存する


ファイル>名前を付けて保存 をクリックします。
gimp5.gif

拡張子を「.txt」にしてテキスト形式で分かりやすい場所に保存します。
gimp9.gif


保存したテキストを修正する


保存したテキストファイルを開きます。
gimp8.gif

画像URLをアップロードしたURLに変更します。
不要な部分は削除して大丈夫です。
リンク先を別窓で開かせたい場合は「 target="_blank"」を追加してください。
先ほど書いたのですが
マウスオーバーでリンク先の説明を表示させたい場合は
「 title="SEO対策済無料ブログテンプレートはこちら"」などを追加すると
リンクごとにマウスオーバー時に説明が表示されます。

イメージマップを表示させたい場所に貼り付ける


ソースの改変が終了したら、
まるごとコピーして
表示させたい場所に貼り付ければOKです!

完成を貼ってみました。(上にも貼ってありますが)
SEO対策済無料ブログテンプレートはこちらアメブロのアクセスアップに効果的なツールはこちら無料で1カラムレビューページを作れるツールはこちら


ブログトップのインフォメーションにインパクトを与えれたり
ヘッダーバナーからもリンクを送れたり
アフィリエイターに使える部分がありますので
使いたくなったらこの記事に来てみてくださいね♪

記事がお役に立てましたら1票お願いします。励みになります!
  •  人気ブログランキング   FC2ブログランキング 

  • #HANDLE#、いつもありがとうございます!!(o´∀`o)ノ<おきてがみ] 足あとを残せます。後ほど訪問させていただきます☆…おきてがみ
  • 質問・感想・相談、メールはお気軽に(o´∀`o)ノ

    あずへのメールはこちらからどうぞ


    ←クリックでメールフォームへ
    わからない。。つまづいて前に進めない。。

    そんな時は困った時のあず頼み!
    遠慮無くメールくださいね。

    この記事を見た人はこんな記事も読んでいます

    カテゴリ別になっています。興味のあるタブをクリックしてください。

    Loading...

    コメント
    非公開コメント

    ⇒人気ブログランキング ⇒FC2ブログランキング


    いつも訪問いただきありがとうございます!!(o´∀`o)ノ

    ↓お寄せいただいたコメント

    No title

    あずさんこんばんはー小澤です^^
    おー、ついに出ましたねーGIMP!

    分かりやすくありがとうございます(*´艸`)ふふ
    って思っていた方法とは違う?!

    これは勉強になりまするφ(`д´)カキカキ
    早速活用させていただきますこれ!

    応援済みです!!!

    2011-05-01 18:57 | from 『脱サラプロブロガー』小澤竜太@GIMPで楽々画像デザイン☆

    No title

    >小澤さん
    こんばんは!

    >おー、ついに出ましたねーGIMP!
    やっと書きました~

    >分かりやすくありがとうございます(*´艸`)ふふ
    >って思っていた方法とは違う?!
    他にも方法あるんですね!
    今度教えてください(*゚ェ゚)ノ

    2011-05-01 20:01 | from ASAP塾/あず | Edit7RorUgFk

    No title

    あずさん、こんばんは!
    ひよひろです♪
    いつもお世話になってます。

    ご無沙汰してました~
    またまた、無料レポートにしたらいいのにって
    良い情報をありがとうございます。

    こんなバナーが張って有ったら
    お~って思ってもらえますね

    応援完了です。

    2011-05-01 20:21 | from アフィリエイトでお金持ちになる!

    No title

    あずさん

    こんばんは。

    RENSUKEです。


    早く試したいです。

    GIMPとライティング教材の
    往復のような生活をしているので
    嬉しい記事です。


    多分、何度も、あずさんのブログに
    御邪魔しなければ完成しないかも^^;


    大変勉強になりました。


    応援です。

    2011-05-01 21:11 | from ライティング強化中@RENSUKE

    No title

    あずさん

    こんばんは、KEN-Tです^^
    いつもお世話になります。

    この機能さりげなく便利ですね^^

    画像はインパクトがあって
    目立ちやすいのでリンクを貼る際も
    クリックされやすそうです^^

    では応援@KEN-T

    2011-05-01 22:43 | from アフィリエイトで稼ぐために必要なブログ@KEN-T

    No title

    めっちゃ勉強になりました^^

    また来ます・・・応援済☆

    2011-05-02 00:15 | from ゆみびと

    No title

    こんばんは、吉田屋です。

    へ~。
    GIMPっていろいろできるんですね。

    透明画像でも貼り付けて、
    リンクを貼るのかと思いましたが、
    最初からそのような使い方を想定した
    メニューが揃ってるんですね。

    ますますGIMPが気になってきました。

    2011-05-02 00:49 | from 吉田屋

    No title

    >ひよひろさん
    こんばんは!おひさしぶりです♪

    >またまた、無料レポートにしたらいいのにって
    >良い情報をありがとうございます。
    そっか、レポートにすれば良かった笑
    メルマガやってないからまあいいかな;

    >こんなバナーが張って有ったら
    >お~って思ってもらえますね
    興味をひく内容だとクリックされると思います~

    2011-05-02 01:44 | from ASAP塾/あず | Edit7RorUgFk

    No title

    >れんすけさん
    こんばんは!

    >早く試したいです。
    >GIMPとライティング教材の
    >往復のような生活をしているので嬉しい記事です。
    GIMPユーザーならすぐ試せますね♪
    イメージマップでしか使ってないので
    他にもすごい機能がありそう~

    >多分、何度も、あずさんのブログに
    >御邪魔しなければ完成しないかも^^;
    何度も来てください~♪
    お待ちしております(o´∀`o)ノ

    2011-05-02 01:47 | from ASAP塾/あず | Edit7RorUgFk

    No title

    >KEN-Tさん
    こんばんは!

    >この機能さりげなく便利ですね^^
    >画像はインパクトがあって
    >目立ちやすいのでリンクを貼る際も
    >クリックされやすそうです^^
    インパクト&興味をそそるKEN-Tライティングがあれば
    クリックされると思います☆
    機会があったら使ってみてください~

    2011-05-02 01:49 | from ASAP塾/あず | Edit7RorUgFk

    No title

    >ゆみびとさん
    こんばんは!

    >めっちゃ勉強になりました^^
    良かったです(*´ー`)
    やってみたら意外と簡単なので
    お試しください☆

    2011-05-02 01:51 | from ASAP塾/あず | Edit7RorUgFk

    No title

    >吉田屋さん
    こんばんは!

    >透明画像でも貼り付けて、
    >リンクを貼るのかと思いましたが、
    >最初からそのような使い方を想定した
    >メニューが揃ってるんですね。
    お!別の方法って透明画像貼る方法なのかな!
    そんなことできるのか~なるほど~
    勉強になります♪

    >ますますGIMPが気になってきました
    まだ使える機能があるようですが
    あずはこれから勉強してみます☆

    2011-05-02 01:53 | from ASAP塾/あず | Edit7RorUgFk

    わぁ

    初めてコメントします!なおとと申します!

    わぁ・・・無料でこんなにキレイな画像が作れちゃうんですね。スゴイです。

    応援していきますね(*´∇`)ノ

    2011-05-02 03:16 | from 恋愛コンサルタントなおと

    No title

    >なおとさん
    こんばんは!
    初コメありがとうございます。

    >わぁ・・・無料でこんなにキレイな画像が作れちゃうんですね。スゴイです。
    完成度はフォトショの方がいいですが
    サクッと作りたい時に「Pixlr」は便利ですよ♪
    最近よく使ってます。

    2011-05-02 04:02 | from ASAP塾/あず | Edit7RorUgFk

    No title

    あずさん♪

    はじめまして!
    まえむきさんのブログから参りました。

    ぽちと申します!

    GIMPは画像のサイズを変更したり、
    簡単なバナーを作るくらいにしか使っていませんでした!

    こんなこともできるとは!
    “宝の持ち腐れ”でした^^;

    イメージマップを制作したい時は、
    またこの記事にお邪魔させていただきます~!


    ぽちっと応援・・・*

    2011-05-02 15:14 | from アフィリエイトのもやもやがスッキリ!*ぽち

    No title

    あずさんこんにちはー

    うおおーGINPでイメージマップできるんですね~

    すごいな~

    この技術を使うと一気にサイトの質が上がりますね^^

    さすがあずさんっすね~^^

    ではでは、なまら応援ポチポチ( ´艸`)シシシ

    2011-05-02 16:13 | from 賢威と言えば!マメボーw

    No title

    >ぽちさん
    こんばんは!

    >まえむきさんのブログから参りました。
    ありがとうございます♪

    >GIMPは画像のサイズを変更したり、
    >簡単なバナーを作るくらいにしか使っていませんでした!
    >こんなこともできるとは!“宝の持ち腐れ”でした^^;
    なにげに高性能な無料ツールですよね!
    アフィリにも有効だと思うので試してみてください☆

    >イメージマップを制作したい時は、
    >またこの記事にお邪魔させていただきます~!
    お待ちしてます(*´ー`)ノ

    2011-05-02 20:05 | from ASAP塾/あず | Edit7RorUgFk

    No title

    >マメボーwさん
    こんばんは!

    >GINPでイメージマップできるんですね~すごいな~
    GIMPさん、重いけどなかなかやりますよね~

    >この技術を使うと一気にサイトの質が上がりますね^^
    シンプルなブログに一発目立つのあると
    目をひきますよね♪
    うまく使って欲しい技術です。

    2011-05-02 20:08 | from ASAP塾/あず | Edit7RorUgFk

    GIMP!

    GIMPって確かインストールしたな、くらいにしか覚えていませんでした(笑)

    こんな機能があるとは!

    最近はFacebook中心になっていますが、なにかで使って見ようかな。

    いつも勉強になります。
    ありがとうございます。

    Firefox 4の「バーチャルパーク トゥムクマケ」
    Twitterのつぶやきが3D表示される
    すべて HTML + CSS + JavaScript で構成されているそうです。

    2011-05-03 10:47 | from pao

    RE:GIMP!

    >paoさん
    こんにちは!

    >最近はFacebook中心になっていますが、なにかで使って見ようかな。
    機会があったら使ってみてください♪
    Facebookはあずにとって未知の世界です~
    何をしたらいいのか。。

    >いつも勉強になります。
    >ありがとうございます。
    いえいえ、いつも記事読ませていただき
    自分の色んな面に気付かされています。
    今後も宜しくです!

    >Firefox 4の「バーチャルパーク トゥムクマケ」
    >Twitterのつぶやきが3D表示される
    >すべて HTML + CSS + JavaScript で構成されているそうです。
    全然何のことが知らなくて調べてみました!
    コード名に国立公園の名前をつけているんですね~
    知床もあってビックリしました
    「バーチャルパーク トゥムクマケ」見てきました~
    HTML5とCCS3だとフラッシュみたいことできるんですよね。
    アップルさんはこれを見越してフラシュ嫌いなのかな。(アドビが嫌いなのか)
    いやーすごいですよね。あんなことできちゃうんだ。
    教えていただきありがとうございます!

    2011-05-03 15:49 | from ASAP塾/あず | Edit7RorUgFk

    承認待ちコメント

    このコメントは管理者の承認待ちです

    2015-12-02 12:26 | from -

    トラックバック

    http://xxxasapxxx.blog134.fc2.com/tb.php/252-76048254