Top > 早わかり操作法 > アフィリエイトリンクの貼り方

アフィリエイトリンクの貼り方

 このページは、以前の古い記述がいくらか残っているので、必要な所だけをサラッと見てください。

文中に文字リンクを埋め込む

 アフィリエイトリンクでも、紹介文とリンクURLだけのものなら、リンクが長くても、普通のリンクと同じように文中にそのまま埋め込むことができます。たとえば、「ポータブルナビ(楽天)」。こんな感じです。
 これは、こうやって書いています。

[[ポータブルナビ(楽天)>https://a.r10.to/hlSLCl]]

 楽天の短縮URLを使うと、簡単にこういうリンクは作れます。
 ただ、短縮URLリンクは、有効期限が3年間なのと、リンク表示を規約違反にならないようにすることは、気を付けないといけません。
 また、アフィリエイト画面から作る通常作成のリンクは、リンク後半に「 target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"」というタグが入っています。
 HAIKで普通にリンクを作ると、これが入りません。楽天では、リンクは基本的に書き換えてはいけないことになっているので、この方法では、短縮URL以外の、通常のリンクは貼れません。
 これをきちんとするには、文字リンクについても、下の〔画像を文や表中に埋め込む〕を見てくださいね。

URLに日本語が入っている

 URLに日本語が入っている場合、Ver3以前は、リンクを直接書いても、うまく思うところに飛んでくれるリンクになりませんでした。
 Ver4になって、文字コードがUTF-8になったお陰で、このようなアドレスもそのまま書いて、きちんとうまくリンクが作成されるようになったようです。

 Ver3時代や、UTF-8の文字コードを採用していない短縮URLソフトShortURL AccessAnalyzerなどでは、漢字アドレスをそのまま書いても、そのままではうまく飛んでくれないので、そんな場合は、URLをピュニコード(Punycode)というものに変換するとうまくいきます。
 上にリンクしたページで、「変換モード」を「URL」にして、[更新]を押します。
 たとえば、「http://ja.wikipedia.org/wiki/Unicode一覧_0000-0FFF」というリンクの場合、「http://ja.wikipedia.org/wiki/Unicode%e4%b8%80%e8%a6%a7_0000-0FFF」とするときちんと指定したURLに飛んでくれます。

画像付きアフィリエイトリンクの場合

 このページ右のメニューバーに貼ってあるGoogle Adsenceのように、位置指定する必要がないものは、

#html{{
(ここにアフィリエイトリンクを挿入)
}}

と指定するだけで入れることができます。

 QHM時代には、簡易編集支援アイコンの[HTML]のボタンを押すと、雛形が挿入されて便利でした。
 実際の記入時には、( )は書きません。

 しかし、アフィリエイトリンクの使い方で多いのは、左右にリンク画像を表示して、文字を回り込ませるようなやりかたです。これをするのに、上の記述に追加して、

#html{{
<div align="right">
(ここにアフィリエイトリンクを挿入)
</div>
}}

の様にしたり、

#html{{
<a href="http://hb.afl.rakuten.co.jp/hsc/02c4a4bb.6456aa7e.058413ec.66bfdb26/" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hsb/02c4a4bb.6456aa7e.058413ec.66bfdb26/" border="0" align="right"></a>
}}

の様にしたりしても、Internet Explorerでは、画像の後に改行が入り、うまく後の記事が回り込んでくれません。

 有料版のサポ-トにも、 <div align="right"> の様に記述を入れる旨の説明があるのですが、実際にはそれではうまくいきません。

 そこでちょっと面倒ですが、#beforescriptなどを使って、下のようなcssを追加します。

.right{
 float:right;
}
.left{
 float:left;
}
.center{
 display: table;
 margin:0 auto;
}

 ここで、マーカー部分の、ドットの後に続くのが定義するクラス名です。

Quick Homepage Maker

#html{{
<div class="right">
(ここにアフィリエイトリンクを挿入)
</div>
}}

の様に、定義したクラス名でdivを指定すると、右に挿入されたリンクのようにInternet Explorerでもうまくいくようです。

〔コピーをしてもうまくいかない〕
 余談ですが、上記の記述をそのままコピーしても、画面表示の都合上、スペースを全角で入れているので、うまく動きません。
 「float:right;」の前のスペースは必ず半角にしてください。

慌てる前に </div>を書き忘れたりすると

 <div>の終了タグ、</div>を入れ忘れたりすると、ページ全体のブロック要素の指定がおかしくなり、メニューが下になるなど正常に表示されなくなりますから注意してください。

HTMLを使わずに、画像のアフィリエイトリンクを表示する。

 画像のURLが、.pngや.jpgで終わるのなら、&attachref();や&ref()などを使って画像を貼り付けることができるのですが、楽天のアフィリエイトリンクの画像の場合などでは、その後に更に付属の文字がくっついているので、これらを使って画像表示することができません。
 それはこれらの機能を実現しているプラグインが、画像かどうかを、ファイルの最後の拡張子(.pngや.jpgの部分)で判断しているからです。
 そこで画像かどうかの判断をもっと柔軟性を持たせて判断させるためには、\pluginの中にあるref.inc.phpの下のマーカー部分を書き加えてアップロードします。

// Image suffixes allowed
define('PLUGIN_REF_IMAGE', '/\.(gif|png|jpe?g)(.*)$/i');

 これで、文末に少々他のものが付け加わっていても、".gif"、".png"、".jpeg"、".jpg"などがあれば画像だと認識してくれるようになります。これだけで&attachref();も同じ画像ファイル判定になります。
 但しこうすることは、画像の判定に柔軟性を持たせる分、変なファイルを指定をすれば、何か障害を発生する元にもなりかねないので、改造する場合は自己責任でお願いします。

Google Adsenceの導入

 Google Adsenceを貼り付けるには、横のメニューの所は、上で説明したとおり、メニュー管理からサイドメニュー編集画面に行って、下の簡易編集支援アイコンの[HTML]のボタンを押し、その中にアフィリエイトリンクを挿入するだけです。リンクを作るときに、背景色をメニューの背景色に合わせます。
 下のAdsenceは、北摂情報学研究所推奨のように[ナビ2編集]の所に入れると、ページごとにタグを貼り付ける面倒が無くて便利です。しかしそれでは、表示を中央に寄せても、ページ全体の中央になってしまい、コンテンツの中央からははずれるので不格好です。
 また、コンテンツが少なく、メニューが縦長の場合にも、長くなったメニューの更に下にアドセンスの表示だけがさらに伸びて表示されるので不格好です。
 ですから、ページ上と下のアドセンスは、ページの内容編集の所に[HTML]で貼り付けることで対応するのが簡単です。新規ページを作るときに、アドセンスを貼ったページを雛形として読み込むことで、そのページに簡単入力します。
 アドセンスの表示を中央寄せするためには、上に挙げたようなcssを設定しておいて、

#html{{
<div class="center">
(ここにアフィリエイトリンクを挿入)
</div>
}}

とします。実際の記入時には、( )は書きません。

画像を文や表中に埋め込む

 ここまでのところで、アフィリエイトの画像やリンクをHTMLのタグのまま、Quick Homepage Makerに貼り込むやり方について、基本的な考え方を説明してきました。
 しかしこのような「#html{{」を使うやり方では、ブロック要素となってしまうので、同じ行に文字を入力することができず、下の見本のように、文や表中にリンクを埋め込むこともできません。
 ページの左右にリンクを表示するだけでなくて、やっぱり表の中にもアフィリエイト画像を表示して、説明したいですよね。
 フルパッケージの説明には、楽天のアフィリエイトOKというようなことが書いてあって、「無料だから、できないだろう」で我慢するのはどうも納得がいかないので、対処法を考えてみました。

 でも、「フルパッケージ」の楽天アフィリエイト対応というのは、HTMLを使ってリンクを貼り付けるだけだったようで、真相を知ってしまうとちょっと拍子抜けです。「誇大宣伝」=「羊頭狗肉」だったようですね。
 でもそのために、貧乏パワーの負けじ魂が炸裂したので、よしとすることにします。

rakutenプラグインの見本

&rakuten(URL,説明,IMGURL,right);&rakuten(URL,説明,IMGURL,center);&rakuten(URL,説明,IMGURL,left);
右に寄せて、文章は回り込ませる設定です。
これは、
中央に表示します。回り込みはありません。
左に寄せて表示しています。文字は回り込んで表示されます。
文字のリンクは「解除プラグ付き ポータブル パナソニック カーナビ ゴリラ CN-G1200VD 7インチ ワンセグ 」の様になります

 なお、楽天の「画像とテキスト」のリンクは、テーブルを使うので、このrakutenプラグインでは、対応していません。

rakutenプラグインの導入

  Nekyoさんの『プラグイン/自作/pyp/rakuten』のプラグインを使わせてもらって、これを元に改造しました。

 導入法は、ダウンロードしたプラグインを、無変換textモードで、/pluginフォルダにアップロードして、後は、〔画像付きアフィリエイトリンクの場合〕で説明したのと同じく、main.cssに、たとえば

.right{
 float:right;
}
.left{
 float:left;
}
.center{
 display: table;
 margin:0 auto;
}

というようなクラスを追加して指定しておくだけです。(マーカー部分の、ドットの後に続くのが定義するクラス名です。)
 このプラグインのディフォルト(書き換えないときの現状)のクラス名は、「right」「left」「center」にしてあります。別の名前にしたい人は、プラグインの最初の所に定義するところがありますから、そこをUTF-8対応エディタで書き換えてアップロードしてください。

rakutenプラグインの基本書式 R元年8月改作

 従来のプラグインは、https化した今のリンクに対応していなかったので、令和元年8月に、改作しました。

  1. #rakuten(リンクURL,リンク文字列 or 画像説明,画像URL,文字寄せ指定)
  2. &rakuten(リンクURL,リンク文字列 or 画像説明,画像URL,文字寄せ指定);

    ※注

    1.  文中や表中に入れる場合は。必ず2の書式で書いてください。1にすると、ブロック要素の指定になって、文中ではうまくいきません。
    2.  2の書式の時は、最後の「;」を忘れないようにしてください。
    3.  因数の省略は可能ですが、途中の因数を省略する場合は、「,」を忘れないようにしてください。
    4.  第2因数は、画像を指定しない場合は、画面上に表示されるリンクの文字列、画像を指定した場合は、画像の説明(画像が表示されないときに出てくる)になります。
       楽天アフィリエイトの画像リンクの場合、ここは指定せず、空欄のままにします。何か指定してしまうと、規約違反になります。
    5.  Nekyoさんのものとは、第2因数と第3因数の指定順を逆にしてあります。
    6.  第4因数を指定すると、リンクをさらに<div></div>で囲んで、classを指定します。

rakutenプラグインのダウンロード

rakutenプラグインの使い方1 画像

 たとえば、上のリンクの例では、rakutenから発行されるアフィリエイトのタグはこのようになっています。

<a href="https://hb.afl.rakuten.co.jp/hgc/1918ebdd.453fee74.1918ebde.7b83485c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fgearbox%2F1-cn-g1200vd-pin%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Fgearbox%2Fi%2F10002777%2F&link_type=pict&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0Iiwic2l6ZSI6IjgweDgwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJsZWZ0IiwicHJpY2UiOjEsImJvciI6MSwiY29sIjowLCJiYnRuIjoxfQ%3D%" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" ><img src="https://hbb.afl.rakuten.co.jp/hgb/1918ebdd.453fee74.1918ebde.7b83485c/?me_id=1276274&item_id=10002777&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fgearbox%2Fcabinet%2Fcn-g1200vd-pin-n.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fgearbox%2Fcabinet%2Fcn-g1200vd-pin-n.jpg%3F_ex%3D80x80&s=80x80&t=pict" border="0" style="margin:2px" alt="" title=""></a>

 この黄色マーカー部分の最初の方を第1因数に、後の画像へのリンクを第3因数に指定します。
 なお最近のrakutenのリンクでは「alt= ""」という部分は中身が無指定になっています。したがって、ここで何かを入れてしまうと規約違反になってしまうので、第2因数は空欄のままとします。
 文字の回り込みを指定しない場合は、これだけで、文字の回り込みをしたい場合は、〔left | center | right 〕の中から第4因数を指定します。
 たとえば、この例では、画像の説明はないので、第2因数はなしで、

&rakuten(https://hb.afl.rakuten.co.jp/hgc/1918ebdd.453fee74.1918ebde.7b83485c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fgearbox%2F1-cn-g1200vd-pin%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Fgearbox%2Fi%2F10002777%2F&link_type=pict&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0Iiwic2l6ZSI6IjgweDgwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJsZWZ0IiwicHJpY2UiOjEsImJvciI6MSwiY29sIjowLCJiYnRuIjoxfQ%3D%,,https://hbb.afl.rakuten.co.jp/hgb/1918ebdd.453fee74.1918ebde.7b83485c/?me_id=1276274&item_id=10002777&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fgearbox%2Fcabinet%2Fcn-g1200vd-pin-n.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fgearbox%2Fcabinet%2Fcn-g1200vd-pin-n.jpg%3F_ex%3D80x80&s=80x80&t=pict,right);

のように指定します。
 このような指定をすることで、「 target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;" 」「 border="0" style="margin:2px" alt="" title=""」の指定がリンク中に自動で入ります。

rakutenプラグインの使い方2 テキスト

 このrakutenプラグインの第2因数までを指定することで、テキストリンクを作ることができます。この場合、第2因数に指定した文字列が、ホームページ上に表示される文字列となり、その文字列に第一因数のURLに向かってリンクが貼られます。
 このプラグインを使うことで、「target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"」が挿入されたrakuten提供のテキストリンクと同じものをホームページ上に貼ることができます。
 なおこの場合、文中にリンクを挿入する様になりますから、書式2の方を使ってくださいね。

rakutenプラグインの用途

 名前は、rakutenプラグインとなっていますが、最初の発想が「楽天のアフィリエイトリンクをうまく表示できないか」という所から作られているだけで、以上の説明を読んでいただければ、楽天だけに限らず、文字や画像をホームページ上に貼り付けて、リンクは別ページで開くような使い方をする用途に広く使える、とても便利なプラグインであることが分かると思います。
 応用例としては、第1因数に拡大画像URLを貼り、第3因数にHP表示用の小さい画像URLを貼ると、簡単に画像を拡大する様な表示が可能になります。

Amazonのアフィリエイト

とりあえずタグをHTMLで貼り付け

 amazonのアフィリエイトリンクを貼る方法は、さほど難しく考えなくてもいいかもしれません。
 これが、amazonが発行するタグを、素直にHTMLで出力したものです。
 ここではさらに、<div class="right"></div>で囲んであります。
 amazonのテキストリンクは、URLだけなので、HAIKのリンクがそのまま使えます。画像は、右の様に、#htmlを使うか、上のrakutenプラグインでいいのではないでしょうか。
 厳密にリンクを全く同じにするためには、rakutenプラグインをちょっとだけ手直ししてamazon用のプラグインを作った方がいいのかもしれんせんが、そこまで全く同じにしなくても、支障はないような気がします。