かまさんちのぶろぐ

[ぶろぐ]や[アフィリエイト]を楽しく続ける為のぶろぐデス。

 当サイト、ページにはプロモーションが含まれている場合があります。 

kamasanchi-blog

簡単リンク自作編:CSS・HTMLだけで導入できるアフィリエイト用ぶろぐパーツ[買ってよリンク]を作りました。

CSS・HTMLだけで導入できるアフィリエイト用ぶろぐパーツ[買ってよリンク]

f:id:kamasanchi:20210922023557p:plain

やっぱりネーミングセンスないですよね… 

f:id:kamasanchi:20210922013450p:plain

だまらっしゃい!! 

今回はアフィリエイト用ぶろぐパーツ[買ってよリンク]の紹介と、その使い方を解説します。

f:id:kamasanchi:20210922013534p:plain

今回の記事はこんな方に読んでほしい… 

  • ぶろぐで収益化デビューしたい方
  • アフィリエイトを始めたい方
  • ASPAmazon提携が通らない方
  • リンクを使い分けたい方
  • デザインを変えたい方

 

[買ってよリンク]とは

f:id:kamasanchi:20210922013534p:plain

買ってよリンク]は、ぶろぐやアフィリエイトで収益を生んでくれるリンクボタン(簡単リンクの模造品)の事です。 

ぶろぐやアフィリエイトに取り組んでいる方であれば簡単リンクカッテネをご存じの方も多いと思いますが、[買ってよリンク]を知っている方は少ないことでしょう。

f:id:kamasanchi:20210922023557p:plain

そんなもの誰も知りませんよ… 

f:id:kamasanchi:20210922013450p:plain

ですよね… 

買ってよリンク]はぶろぐを始めたてで、ASPの審査が通らないかたや、すぐにアフィリエイトをやってみたい方の為に作った誰でも導入可能なアフィリエイト用ぶろぐパーツ(リンクボタン)です。

f:id:kamasanchi:20210922013534p:plain

見てもらった方が早いですね… 

f:id:kamasanchi:20210922023557p:plain

さすが模造品ですね… 

f:id:kamasanchi:20210922013450p:plain

だろ…! 

上記の[買ってよリンク]は、はてなブログ用にアレンジを加えたものですが、他のぶろぐでもWordPressでも導入可能です。

アフィリエイトOKのサイトのみです。

f:id:kamasanchi:20210922013534p:plain

ついでなので簡単リンクとカッテネも見てみましょう。 

もしもアフィリエイトの簡単リンク

 
f:id:kamasanchi:20210922013534p:plain

もしもアフィリエイトアフィリエイト界隈ではとても有名で№1、№2を争うASPです。 

上記の形(アマゾン含み)で簡単リンクを使用する為にはもしもアフィリエイトに登録し、アマゾンと楽天とそれぞれとの提携が必要になります。

f:id:kamasanchi:20210922013534p:plain

Yahoo!ショップは最初からくっついてた気がします。 

※もう覚えてないです… 

カッテネのリンク

f:id:kamasanchi:20210922013534p:plain

デザインをいじってるのでオリジナルのものと見た目は違います。 

【こんな方におすすめ】

  • プログラムを書いたことがない方
  • 始めてみたけどつまづいている方
  • HTMLとCSSを一緒に進めている方
f:id:kamasanchi:20210922013450p:plain

元のデザインに戻すのが面倒くさいのでいじったまま載せました。 

このカッテネWordPressプラグインに存在するリンクボタンですが、元はCSSとHTMLで出来ているのでコードを抜き出して使う事も編集してアレンジを加えて使う事も出来ます。

f:id:kamasanchi:20210922013534p:plain

CSSの知識が少しあれば誰でもできます。 

リンクボタンの種類も豊富なので、何種類もボタンを付けたい場合はカッテネの導入もありだと思いますが、CSSコードでデザインの編集(アレンジ)には知識が必要になります。 

f:id:kamasanchi:20210922013450p:plain

WordPressプラグインで中身を見れると早いですが、検索すると紹介している方もいらっしゃいます。 

※詳細はググってください… 

[買ってよリンク]を使うメリット・デメリット

f:id:kamasanchi:20210922013534p:plain

買ってよリンクにはメリット、デメリットが存在します。 

[買ってよリンク]メリット

簡単リンクやカッテネ同様の効果が[買ってよリンク]にはあります。

f:id:kamasanchi:20210922013534p:plain

それは機会損失を回避できることです。 

アフィリエイトはぶろぐやサイトからリンクを踏んでもらう切っ掛けを作るのが仕事になります。

そのためリンクボタンの選択肢はそのまま切っ掛けを作ることにつながり選択肢が無いという状況はそのまま機会損失=収益減につながります。

f:id:kamasanchi:20210922013534p:plain

アフィリエイトについて詳しく知りたい方は下記の記事参照してください。 

kamasanchi.hatenablog.com

[買ってよリンク]デメリット
f:id:kamasanchi:20210922013534p:plain

[買ってよリンク]にはどうしてもデメリットができてしまいます。 

買ってよリンク]はHTMLの編集が絶対不可欠で、色々なサイトからパーツを持ってこなければ成立しません。

f:id:kamasanchi:20210922013450p:plain

要は…めんどくさいです。 

単純に簡単リンクを使う事が出来るならもしもアフィリエイトに登録して簡単リンクを使用することが効率的です。

f:id:kamasanchi:20210922013534p:plain

あくまで代替え品としての利用をおすすめします。 

[買ってよリンク]の使い方

f:id:kamasanchi:20210922013534p:plain

買ってよリンクに話を戻します。 

買ってよリンク]は簡単なHTMLの編集とSCCのコピペ(編集OK)で導入可能なアフィリエイトに取り組むためのぶろぐパーツです。

f:id:kamasanchi:20210922013534p:plain

今回用意したパーツは以下4点です。 

  1. はてなブログ用3リンクタイプ
  2. はてなブログ用2リンクタイプ
  3. どこでも用3リンクタイプ
  4. どこでも用2リンクタイプ
f:id:kamasanchi:20210922013534p:plain

違いは疑似要素ではてなブログ用のアイコンを使用しているか、使用していないかなので正直ほとんど差はありません。 

[買ってよリンク]各デザイン

1、はてなブログ用3リンクタイプ

2、はてなブログ用2リンクタイプ

【こんな方におすすめ】
  • CSS・HTMLを勉強中の方
  • Webデザインを勉強中の方
f:id:kamasanchi:20210922013534p:plain

はてなブログ用のアイコンがワンポイントで入っているだけです。 

AmazonのリンクだとわかるようにAmazonのアイコンを使用していますが楽天等の画像を使いたいときは楽天のアイコンにも変更することができます。

※後述します。

3,どこでも用3リンクタイプ

【こんな方におすすめ】
  • お金の勉強を始めたい方
  • 自由を手に入れたい方

4,どこでも用2リンクタイプ

【こんな方におすすめ】
  • ゆる副業を始めたい方
  • スキマ時間を有効活用したい方
f:id:kamasanchi:20210922013534p:plain

アイコン表示は無いので別のぶろぐサイトでもCSSとHTMLでの編集が可能であれば使用することができます。 

コピペ用[買ってよリンク]CSS&HTML

f:id:kamasanchi:20210922013534p:plain

使用するHTMLと対象のCSSをコピペして使いますが、HTMLは必ず編集が必要です。  

※編集方法は後述

1、はてなブログ用3リンクタイプ

HTML

<div class="hatena-katteyo">
<div class="hatena-katteyo-child">
<div class="hatena-katteyo-image">[画像リンク]</div>
<div class="hatena-katteyo-text">
<div class="hatena-katteyo-title">[テキストリンク]</div>
<div class="hatena-katteyo-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="hatena-katteyo-btns">
<div class="hatena-katteyo-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="hatena-katteyo-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
<div class="hatena-katteyo-btns-child-orange"><a target="_blank" rel="noopener" href="#">Yahoo!ショッピングへ</a></div>
</div>
</div>

CSS

.hatena-katteyo {
  box-sizing: border-box;
  width: 95%;
  padding:10px 10px 5px 10px;
  text-align:center;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
 }
.hatena-katteyo-child {
  display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  width: 95%;
  margin: 5px auto;
 }
.hatena-katteyo-image {
  text-align: center;
  box-sizing: border-box;
  max-width: 50%;
  height: auto;
  position: relative;
 }
 
 .hatena-katteyo-image:before {
  font-family: blogicon;
  content: "\f034";
  margin-left:2px;
  font-size: 0.8em;
  position: absolute;
  right:-18px;
  bottom:3px;
  color: #0000ff;
 }
 
 .hatena-katteyo-image:hover:before {
  font-family: blogicon;
  content: "\f009";
 }
 

.hatena-katteyo-image img {
  box-shadow: 1px 1px 5px -2px #aaaaaa;
  margin: 0;
}

.hatena-katteyo-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  text-align:left;
 }

.hatena-katteyo-title a{
  display:block;
  text-decoration: none;
  font-size: 0.9em;
  color: #0000ff;
 }
 
.hatena-katteyo-title a:after{
  font-family: blogicon;
    content: "\f034";
    margin-left:2px;
    font-size: 0.8em;
}
 
.hatena-katteyo-title a:hover:after{
  font-family: blogicon;
    content: "\f009";
}

.hatena-katteyo-description {
  margin-top: 5px;
  margin-left: 8px;
  font-size: 0.8em;
 }
  
.hatena-katteyo-btns {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  box-sizing: border-box;
  width: 99%;
  margin: 0px auto;
}
.hatena-katteyo-btns a{
  display:block;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  text-decoration: none;
  font-weight:bold;
  line-height:2.0;
  text-align:center;
  font-size: 0.9em;
  border-radius: 8px;
  color:#ffffff;
}

.hatena-katteyo-btns a:hover {
  color: #000000;
}

.hatena-katteyo-btns a:hover:after{
  font-family: blogicon;
    content: "\f009";
    font-size: 0.8em;
    margin-left:2px;
}

.hatena-katteyo-btns img {
    position: absolute;
}

.hatena-katteyo-btns-child-black{
    width:85%;
    margin: 5px auto;
}
.hatena-katteyo-btns-child-black a {
  background: #000000;
}
.hatena-katteyo-btns-child-black a:hover {
  background-color: #aaaaaa;
}


.hatena-katteyo-btns-child-red{
    width:85%;
    margin: 5px auto;
}
.hatena-katteyo-btns-child-red a {
  background: #ff0000;
}
.hatena-katteyo-btns-child-red a:hover {
  background-color: #ffddff;
}


.hatena-katteyo-btns-child-orange{
    width:85%;
    margin: 5px auto;
}
.hatena-katteyo-btns-child-orange a {
  background: #ff9900;
}
.hatena-katteyo-btns-child-orange a:hover {
  background-color: #ffee11;
}
@media (min-width: 601px) {
.hatena-katteyo-image {
  width: 22%;
 }
.hatena-katteyo-text {
  margin-left: 5px;
  width: 75%;
 }
.hatena-katteyo-btns-child-black{
    width:32%;
}
.hatena-katteyo-btns-child-red{
    width:32%;
}
.hatena-katteyo-btns-child-orange{
    width:32%;
}
}
2、はてなブログ用2リンクタイプ

HTML

<div class="hatena-katteyo2">
<div class="hatena-katteyo2-child">
<div class="hatena-katteyo2-image">[画像リンク]</div>
<div class="hatena-katteyo2-text">
<div class="hatena-katteyo2-title">[テキストリンク]</div>
<div class="hatena-katteyo2-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="hatena-katteyo2-btns">
<div class="hatena-katteyo2-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="hatena-katteyo2-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
</div>
</div>

CSS

.hatena-katteyo2 {
  box-sizing: border-box;
  width: 95%;
  padding:10px 10px 5px 10px;
  text-align:center;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
 }
.hatena-katteyo2-child {
  display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  width: 95%;
  margin: 5px auto;
 }
.hatena-katteyo2-image {
  text-align: center;
  box-sizing: border-box;
  max-width: 50%;
  height: auto;
  position: relative;
 }
 
 .hatena-katteyo2-image:before {
  font-family: blogicon;
  content: "\f034";
  margin-left:2px;
  font-size: 0.8em;
  position: absolute;
  right:-18px;
  bottom:3px;
  color: #0000ff;
 }
 
 .hatena-katteyo2-image:hover:before {
  font-family: blogicon;
  content: "\f009";
 }
 

.hatena-katteyo2-image img {
  box-shadow: 1px 1px 5px -2px #aaaaaa;
  margin: 0;
}

.hatena-katteyo2-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  text-align:left;
 }

.hatena-katteyo2-title a{
  display:block;
  text-decoration: none;
  font-size: 0.9em;
  color: #0000ff;
 }
 
.hatena-katteyo2-title a:after{
  font-family: blogicon;
  content: "\f034";
  margin-left:2px;
    font-size: 0.8em;
}
 
.hatena-katteyo2-title a:hover:after{
  font-family: blogicon;
  content: "\f009";
}

.hatena-katteyo2-description {
  margin-top: 5px;
  margin-left: 8px;
  font-size: 0.8em;
 }
  
.hatena-katteyo2-btns {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  box-sizing: border-box;
  width: 99%;
  margin: 0px auto;
}
.hatena-katteyo2-btns a{
  display:block;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  text-decoration: none;
  font-weight:bold;
  line-height:2.0;
  text-align:center;
  font-size: 0.9em;
  border-radius: 8px;
  color:#ffffff;
}

.hatena-katteyo2-btns a:hover {
  color: #000000;
}

.hatena-katteyo2-btns a:hover:after{
  font-family: blogicon;
    content: "\f009";
    font-size: 0.8em;
    margin-left:2px;
}

.hatena-katteyo2-btns img {
    position: absolute;
}

.hatena-katteyo2-btns-child-black{
    display: inline;
    width:85%;
    margin: 5px auto;
}
.hatena-katteyo2-btns-child-black a {
  background: #000000;
}
.hatena-katteyo2-btns-child-black a:hover {
  background-color: #aaaaaa;
}


.hatena-katteyo2-btns-child-red{
    display: inline;
    width:85%;
    margin: 5px auto;
}
.hatena-katteyo2-btns-child-red a {
  background: #ff0000;
}
.hatena-katteyo2-btns-child-red a:hover {
  background-color: #ffddff;
}

@media (min-width: 601px) {
.hatena-katteyo2-image {
  width: 22%;
 }
.hatena-katteyo2-text {
  margin-left: 5px;
  width: 75%;
 }
.hatena-katteyo2-btns-child-black{
    width:48%;
}
.hatena-katteyo2-btns-child-red{
    width:48%;
}
}
3、どこでも用3リンクタイプ

HTML

<div class="katteyo">
<div class="katteyo-child">
<div class="katteyo-image">[画像リンク]</div>
<div class="katteyo-text">
<div class="katteyo-title">[テキストリンク]</div>
<div class="katteyo-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="katteyo-btns">
<div class="katteyo-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="katteyo-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
<div class="katteyo-btns-child-orange"><a target="_blank" rel="noopener" href="#">Yahoo!ショッピングへ</a></div>
</div>
</div>

CSS

.katteyo {
  box-sizing: border-box;
  width: 95%;
  padding:10px 10px 5px 10px;
  text-align:center;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
 }
.katteyo-child {
  display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  width: 95%;
  margin: 5px auto;
 }
.katteyo-image {
  text-align: center;
  box-sizing: border-box;
  max-width: 50%;
  height: auto;
  position: relative;
 }
 
.katteyo-image img {
  box-shadow: 1px 1px 5px -2px #aaaaaa;
  margin: 0;
}

.katteyo-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  text-align:left;
 }

.katteyo-title a{
  display:block;
  text-decoration: none;
  font-size: 0.9em;
  color: #0000ff;
 }

.katteyo-description {
  margin-top: 5px;
  margin-left: 8px;
  font-size: 0.8em;
 }
  
.katteyo-btns {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  box-sizing: border-box;
  width: 99%;
  margin: 0px auto;
}
.katteyo-btns a{
  display:block;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  text-decoration: none;
  font-weight:bold;
  line-height:2.0;
  text-align:center;
  font-size: 0.9em;
  border-radius: 8px;
  color:#ffffff;
}

.katteyo-btns a:hover {
  color: #000000;
}

.katteyo-btns img {
    position: absolute;
}

.katteyo-btns-child-black{
    width:85%;
    margin: 5px auto;
}
.katteyo-btns-child-black a {
  background: #000000;
}
.katteyo-btns-child-black a:hover {
  background-color: #aaaaaa;
}


.katteyo-btns-child-red{
    width:85%;
    margin: 5px auto;
}
.katteyo-btns-child-red a {
  background: #ff0000;
}
.katteyo-btns-child-red a:hover {
  background-color: #ffddff;
}


.katteyo-btns-child-orange{
    width:85%;
    margin: 5px auto;
}
.katteyo-btns-child-orange a {
  background: #ff9900;
}
.katteyo-btns-child-orange a:hover {
  background-color: #ffee11;
}
@media (min-width: 601px) {
.katteyo-image {
  width: 22%;
 }
.katteyo-text {
  margin-left: 5px;
  width: 75%;
 }
.katteyo-btns-child-black{
    width:32%;
}
.katteyo-btns-child-red{
    width:32%;
}
.katteyo-btns-child-orange{
    width:32%;
}
}
4、どこでも用2リンクタイプ

HTML

<div class="katteyo2">
<div class="katteyo2-child">
<div class="katteyo2-image">[画像リンク]</div>
<div class="katteyo2-text">
<div class="katteyo2-title">[テキストリンク]</div>
<div class="katteyo2-description"><strong>【こんな方におすすめ】</strong>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
</div>
</div>
<div class="katteyo2-btns">
<div class="katteyo2-btns-child-black"><a target="_blank" rel="noopener" href="#">Amazonで確認</a></div>
<div class="katteyo2-btns-child-red"><a target="_blank" rel="noopener" href="#">楽天市場で確認</a></div>
</div>
</div>

CSS

.katteyo2 {
  box-sizing: border-box;
  width: 95%;
  padding:10px 10px 5px 10px;
  text-align:center;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
 }
.katteyo2-child {
  display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  width: 95%;
  margin: 5px auto;
 }
.katteyo2-image {
  text-align: center;
  box-sizing: border-box;
  max-width: 50%;
  height: auto;
  position: relative;
 }

.katteyo2-image img {
  box-shadow: 1px 1px 5px -2px #aaaaaa;
  margin: 0;
}

.katteyo2-text {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  text-align:left;
 }

.katteyo2-title a{
  display:block;
  text-decoration: none;
  font-size: 0.9em;
  color: #0000ff;
 }

.katteyo2-description {
  margin-top: 5px;
  margin-left: 8px;
  font-size: 0.8em;
 }
  
.katteyo2-btns {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-content: center;
	align-content: center;
  box-sizing: border-box;
  width: 99%;
  margin: 0px auto;
}
.katteyo2-btns a{
  display:block;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  text-decoration: none;
  font-weight:bold;
  line-height:2.0;
  text-align:center;
  font-size: 0.9em;
  border-radius: 8px;
  color:#ffffff;
}

.katteyo2-btns a:hover {
  color: #000000;
}

.katteyo2-btns img {
    position: absolute;
}

.katteyo2-btns-child-black{
    display: inline;
    width:85%;
    margin: 5px auto;
}
.katteyo2-btns-child-black a {
  background: #000000;
}
.katteyo2-btns-child-black a:hover {
  background-color: #aaaaaa;
}


.katteyo2-btns-child-red{
    display: inline;
    width:85%;
    margin: 5px auto;
}
.katteyo2-btns-child-red a {
  background: #ff0000;
}
.katteyo2-btns-child-red a:hover {
  background-color: #ffddff;
}

@media (min-width: 601px) {
.katteyo2-image {
  width: 22%;
 }
.katteyo2-text {
  margin-left: 5px;
  width: 75%;
 }
.katteyo2-btns-child-black{
    width:48%;
}
.katteyo2-btns-child-red{
    width:48%;
}
}

[買ってよリンク]HTML編集方法

f:id:kamasanchi:20210922013534p:plain

編集方法はどれも同じようなものなので、はてなブログ用3リンクタイプを使用して説明します。 

はてなブログや、WordPressではHTMLでの編集が可能です。

<style></style>(スタイルタグ)を使って記事編集ページを利用して作るとデザインを確認しながら作ることができるのでおすすめです。

※<style></style>(スタイルタグ)はHTML編集でCSSを記述できるタグで間にCSSを入れ込むだけです。

f:id:kamasanchi:20210922013534p:plain

HTMLの編集手順は4つです。 

  1. 画像のリンクを差し込む
  2. タイトル(テキスト)リンクを差し込む
  3. おすすめを箇条書きする(任意)
  4. 各ボタンのURLorテキストリンクを差し込む
画像のリンクを差し込む
f:id:kamasanchi:20210922013534p:plain

まず、画像のリンクを差し込みます。 

アフィリエイトで使用する画像は著作権等の問題を回避する為になるべく画像タイプのリンクを差し込んだ方が無難です。

※自作の画像(写真)は問題ありません。

f:id:kamasanchi:20210922013534p:plain

画像はAmazonアソシエイトから持ってきます。 

Amazonアソシエイトは誰でも登録可能なAmazon専用のアフィリエイトASPです。

f:id:kamasanchi:20210922013534p:plain

登録するだけで審査もありません。 

ですが、登録後一定期間以内に3件の成果を上げなければアカウントがなくなってしまうので注意も必要です。

※何度でもリトライ可能です。

f:id:kamasanchi:20210922013534p:plain

期間は半年だったと思います。 

まだAmazonアソシエイトの登録をしていない方はコチラから登録をしておきましょう。

f:id:kamasanchi:20210922013534p:plain

それでは先に進めます。 

まず、Amazonアソシエイトで商品検索を行います。  

Amazonアソシエイトの商品検索では商品名、Amazonの商品ページURL、ASIN等の商品コードから検索することができ、検索後、対象の商品がみつかったらリンク作成ボタンを押して該当商品のアフィリエイトリンク作成ページへと進みます。

Amazonアソシエイトの商品検索方法

該当商品のアフィリエイトリンク作成ページへ進んだら、画像のみを選択し、対象のHTMLコードをコピーし[画像リンク]と差し替えます。

Amazonアソシエイト商品画像の選択方法

f:id:kamasanchi:20210922013534p:plain

これで画像リンクが[買ってよリンク]に入りました。 

買ってよリンク進捗:画像差し込み後

Amazonアソシエイトではなく、楽天アフィリエイトから画像を持ってくることも出来ますが、そこは任意です。

ただ、はてなブログ用ではAmazonのアイコンを使用しているのでCSSの変更も必要になります。

買ってよリンクアイコン変更方法

f:id:kamasanchi:20210922013534p:plain

その他のアイコンに変更することも出来ます。 

気になる方は下記の記事を参照してください。 

kamasanchi.hatenablog.com

タイトル(テキスト)リンクを差し込む
f:id:kamasanchi:20210922013534p:plain

続いてテキストリンクを差し込みます。 

テキストリンクもAmazonアソシエイトから持ってくるとそのままの流れで作れるのでおすすめです。

f:id:kamasanchi:20210922013534p:plain

先ほどのAmazonアソシエイトページから今度はテキストのみを選択します。 

テキストのみを選択すると、テキストリンクのHTMLを生成できるのでそのまま[テキストリンク]部分と差し替えるだけです。

Amazonアソシエイト:テキストリンクの生成方法

f:id:kamasanchi:20210922013534p:plain

これでテキストリンクが差し込まれました。 

買ってよリンク進捗:テキストリンク差し込み後

f:id:kamasanchi:20210922013534p:plain

次に進みますが、Amazonアソシエイトは閉じずに待機です。 

※まだ使います。 

おすすめを箇条書きする
f:id:kamasanchi:20210922013534p:plain

次の箇所は使用する、しないは任意です。 

使用すると、もしかするとクリック率が上昇する可能性もありますが、書いてある言葉によっては下がる原因になる場合もあります。

f:id:kamasanchi:20210922013534p:plain

使用する場合は慎重に言葉を選び、使わない場合はまるっと消しても大丈夫です。 

買ってよリンク:箇条書きリスト

f:id:kamasanchi:20210922013534p:plain

箇条書き部分はただのリスト形式なので記事画面で書き換えてもHTML編集で書き換えても大丈夫です。

買ってよリンク進捗:箇条書きリスト書き換え後

各ボタンのURLorテキストリンクを差し込む
f:id:kamasanchi:20210922013534p:plain

最後に各種ボタンをリンクボタンに変更していきます。 

買ってよリンクではテキストリンク、URLのどちらでも使用できるようにつくってあるので任意(使用可能な)の方法で使い分けして大丈夫です。

f:id:kamasanchi:20210922013534p:plain

下記はそれぞれの変更箇所です。 

買ってよリンク:リンクボタンHTML変更箇所

テキストリンク用のHTMLを使ってボタンにしたい場合は<a~・・・~/a>までのHTMLをまるまる入れ替え、URLを使ってリンクボタンを作りたい場合は#をURLに挿しかえます。

f:id:kamasanchi:20210922013534p:plain

順番にそれぞれ変更してみます。 

Amazonリンクボタンの場合

f:id:kamasanchi:20210922013534p:plain

先ほどのAmazonアソシエイトページを再度使用します。 

AmazonアソシエイトのテキストリンクHTMLを生成するページではテキストを書き換えることが可能で、リンクを選択するとアフィリエイト用のURLも生成できます。

Amazonアソシエイト:テキストリンクの変更方法

f:id:kamasanchi:20210922013534p:plain

Amazonアソシエイトはどちらを使っても問題なく動作します。 

楽天リンクボタンの場合

f:id:kamasanchi:20210922013534p:plain

楽天のリンクボタンを作るためには楽天アフィリエイトにログインしなければ利用することができません。  

楽天アフィリエイト楽天ユーザーであればだれでも利用することができるサービスなので、楽天ユーザーであれば楽天アフィリエイトを開きログインするだけで大丈夫ですが、楽天ユーザー登録をしたことがない場合はまず楽天会員になる必要があります。

f:id:kamasanchi:20210922013534p:plain

買い物もできるので会員になってて損はないと思います。 

f:id:kamasanchi:20210922013534p:plain

それでは、先にすすめますが、一旦離脱する場合はブックマークして後から確認できるようにしましょう。 

※検索に引っかかるかわかんないので…

f:id:kamasanchi:20210922023616p:plain

かまさんちのぶろぐって検索したらすぐ出てきます。 

楽天アフィリエイトにログインすると商品検索ができます。

商品を検索し、該当の商品が出てきたら商品リンク(作成ボタン)を押すとアフィリエイトリンク生成ページへと移行します。

楽天アフィリエイト商品検索方法

f:id:kamasanchi:20210922013534p:plain

楽天アフィリエイトではテキスト部分の編集ができないのでリンクのみを選択してURLのみを取り出します。 

楽天アフィリエイト:アフィリエイトURL生成方法

f:id:kamasanchi:20210922013534p:plain

URLを取り出したら楽天リンクボタンのコード内の#を取り出したURLに差し替えます。 

楽天アフィリエイトで取得したテキストリンクHTMLのテキスト部分は編集しても大丈夫ですが、編集時のルール等も存在するのでURLで利用しておいた方が無難です。

Yahoo!ショッピングリンクボタンの場合

f:id:kamasanchi:20210922013534p:plain

Yahoo!ショッピングの商品をアフィリエイトで紹介する場合、ASPへの登録が必要になります。 

利用しない場合は[買ってよリンク]の2リンクタイプを利用していただければここまでの手順で完成していますが、リンクボタンを一つ減らすとその分、成果への機会を減らすことにつながるのでそのまま損失であると言えます。

f:id:kamasanchi:20210922013534p:plain

アフィリエイトは切っ掛けを作ることに注力します。 

機会損失は基本的にNGなので出来ることはやるべきです。 

Yahoo!ショッピングと提携が可能なASPもしもアフィリエイトバリューコマースです。

どちらも、審査が存在しますが、出来たてのぶろぐサイトでも最低限必要な事ができているサイトであれば審査に通過できます。

※正しく運営している証明としてお問い合わせや、プライバシーポリシーの設置、数記事の投稿が完了している状態を作りましょう。

f:id:kamasanchi:20210922013534p:plain

無料ぶろぐでも審査に通過できるので普通にぶろぐをやっている人ならおそらく大丈夫です。 

 

※どちらも審査に通過すればYahoo!ショッピングが提携先に入っているはずです。

f:id:kamasanchi:20210922013534p:plain

今回はもしもアフィリエイトを使って作っていきます。 

まず、もしもアフィリエイトへログインし、提携中のプログラム一覧からYahoo!ショッピングの「広告リンクへ」もしくは「どこでもリンクへ」をクリックするとアフィリエイトHTML生成ページへと移行します。

もしもアフィリエイト:提携中広告作成方法

アフィリエイトリンクHTMLの生成ページ(どこでもリンク)ではYahoo!ショッピングの任意のページからURLを引っ張て来てテキストリンクのHTMLが生成できます。
任意のURLを「リンク先」に入力し「リンクテキスト」に表示したい文字を打ち込み、「どこでもリンクを作成する」をクリックすると必要なHTMLが生成され、生成されたHTMLを[買ってよリンク]のYahoo!ショッピングコード内<a~・・・~/a>を差し替えるとYahoo!ショッピングのリンクボタンが出来上がります。

もしもアフィリエイト:アフィリエイトHTML生成方法

f:id:kamasanchi:20210922013534p:plain

以上で買ってよリンクが出来上がります。 

買ってよリンク出来上がりイメージ

アフィリエイト用ぶろぐパーツ[買ってよリンク]まとめ

[買ってよリンク]はHTMLとCSSをコピペして使えるぶろぐの収益化したい方向けのアフィリエイト用ぶろぐパーツです。

任意の(使いたい)タイプのCSSとHTMLをコピーして各ぶろぐで所定の場所に貼り付けHTMLを編集することで使用することができます。

編集箇所は[画像][商品タイトル(テキストリンク)][おすすめ箇条書きリスト][各種リンクボタン]の4つです。

f:id:kamasanchi:20210922013534p:plain

各タイプはボタンの増設も可能です。 

※今度記事にします。 

アフィリエイトをやってみたいという方がいましたら是非[買ってよリンク]を活用してみてください。

あとがき

[買ってよリンク]の使い方を解説しましたが、あくまで[買ってよリンク]はASPAmazon提携が通っていない方や、お試しでアフィリエイトに取り組んでみたいという方向けのぶろぐパーツになります。

f:id:kamasanchi:20210922013534p:plain

この[買ってよリンク]はぶろぐを始めたての友人にどんなものか知ってもらうために作成したものです。

ASPAmazon楽天の提携が承認されたら簡単リンクなどに切り替えていく方が正直作業効率は全然良いです。

ちなみにですが…もしもアフィリエイトバリューコマースもどちらのASPにもAmazon楽天とのアフィリエイト提携が可能ですが、審査が存在します。

f:id:kamasanchi:20210922013534p:plain

楽天は結構すんなり通ります。 

ですがAmazonは少しぶろぐサイトを育てないと提携が承認されないので、ぶろぐサイトが育つ(承認される)まで代替え品としての利用をおすすめします。

f:id:kamasanchi:20210922013534p:plain

もちろんずっと使ってもらってもOKです。 

※ただ、アマチュアWebデザイナーが作ったという認識はしておいてください。

f:id:kamasanchi:20210922013534p:plain

今回はこれで終わりです。 

お疲れ様でした。 

f:id:kamasanchi:20210922023616p:plain

ありがとうございました。 

 

Sponsored Links