【簡単コピペOK】プラグインやカエレバなしでアフィリエイトリンクを作成する方法。

はじめに


この記事を参照して頂けると、プラグインなしで以下のようなアフィリエイトリンクを作成することができますので、よろしければご参照ください。

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング
基礎から応用まで網羅されており、痒い所に手が届く感じの本でした。

なお、今回のアフィリエイトリンクは以下のサイトにあるCSSやHTMLを元に作成しました。

最近カエレバの表示がおかしくなったので、カエレバ風リンクをCSSで自作してみた【コピペ可】

プラグインを使用して、アフィリエイトを作ると言えば、「WP Associate Post R2」や「Rinker(リンカー)」が有名ですよね。

私は 「WP Associate Post R2」 を導入して、チャレンジしてみましたが、アフィリエイトリンクをうまく表示させることができませんでした。

プラグインを導入すると、サイトの表示スピードが落ちたり、更新が必要になったり、テーマのバージョンアップに伴って不具合が生じる可能性もあるため、プラグインの導入はすぐに諦めました。

次に「カエレバ」を使用して、リンクを挿入してみました。

デザインはネットで調べればCSSをコピペできるものもたくさん出てきますので、問題はないのですが、「posted with カエレバ」の表示が邪魔で仕方ありません。

ブログの読者の方にとって 「posted with カエレバ」 の表示は必要ないからです。

「カエレバ」を使用する以上、 「posted with カエレバ」 は消すことができませんので、「カエレバ」の使用を断念しました。

また、 「カエレバ」 や「プラグイン」を使用すると今後不具合が発生する可能性があるため、少し面倒かもしれませんが、直接HTMLにアフィリエイトリンクを貼り付けて表示させることにしました。

牛 吹き出し用
不具合が発生する度に対処する方が面倒だよね(‘_’)

アフィリエイトリンクの導入方法【実例】

①記事のはじめでご紹介したサイトにアクセスして、CSSをコピーします。

②「ワードプレス」の「カスタマイズ」を開いて、「追加CSS」をクリックします。

簡単コピペOK】プラグインなし。カエレバなし。シンプルでオシャレなAmazonと楽天とyahoo!のアフィリエイトリンクを作成する方法。

③先ほどコピーしたものを貼り付けて、「公開」ボタンをクリックして、CSSを反映するようにしておきます。

④次は上記のサイトの以下のHTMLをコピーします。

最近カエレバの表示がおかしくなったので、カエレバ風リンクをCSSで自作してみた【コピペ可】

⑤「カスタムHTML」のブロックエディタにコピーしたHTMLを貼り付けます。


⑥紹介したい商品の「商品画像」、「商品タイトル」、「商品説明」、「各ボタンのURL」「pinコード」を入力します。

そうすると以下のように表示されました。

アフィリリンク

文字の色や配列がおかしいように思います。

「カッパチャレンジ」さんのブログでは「Luxeritas」というテーマが使用されており、私の使用テーマ(THE THOR)と違うことが原因だと考えます。

ワードプレスサイトの使用テーマを調べる方法は以下をご参考にしてください。

【wordpress】パソコン初心者でも簡単!サイトの使用テーマ・プラグインを調べる方法。

アフィリエイトリンクの表示がおかしかったので、修正したCSSとHTMLを次に載せています。

完成コード【コピペOK】

★HTML★

<div class="kaerebahu-box">
 <div class="kaerebahu-imgbox">
  <span style="color: #ff0000;">**商品画像**</span>
 </div>
 <div class="kaerebahu-title">
  <span style="color: #191918;">**商品タイトル**</span>
  <div class="kaerebahu-textbox">
   <span style="color: #191918;">**商品説明**</span>
   <div class="kaerebahu-desc">
    <div class="kaerebahu-kobox kaerebahu-amazon"><a class="aflink" href="**アマゾンURL**" target="_blank" rel="noopener">Amazon</a>
    </div>
    <span class="kaerebahu-kobox kaerebahu-rakuten"><a class="aflink" href="楽天URL" target="_blank" rel="noopener">楽天</a></span>
    <span class="kaerebahu-kobox kaerebahu-blue"><a class="aflink" href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=**7桁のコード**&amp;pid=**9桁のコード**&amp;vc_url=**バリューコマースのソースURL**" target="_blank" rel="noopener noreferrer">Yahoo!<img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=**7桁のコード**&amp;pid=**9桁のコード**" width="1" height="1" border="0"></a></span>
    <div class="clear"></div>
    </div>
   </div>
  </div>
 </div>

★CSS★

.kaerebahu-box{
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 1px solid #d1d1d1;
    /*margin: 0 8px;*/
}
.kaerebahu-imgbox{
    width: 160px;
    margin-right: 10px;
    float: left;
    text-align: center;
	  padding-top: 30px;
}
.kaerebahu-textbox{
    width: 100%;
		font-size: 12px;
		margin-top: 100px;
}
.kaerebahu-title{
    font-size: 16px;
    margin-bottom: 10px;
}
.kaerebahu-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.kaerebahu-kobox{
    width: 120px;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}
.kaerebahu-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}
.kaerebahu-amazon{
    border: 1px solid #F3A847;
}
.kaerebahu-amazon a{
    color: #F3A847;
}
.kaerebahu-rakuten{
    border: 1px solid #BF0000;
    color: #BF0000;
}
.kaerebahu-rakuten a{
    color: #BF0000;
}
.kaerebahu-blue{
    border: 1px solid #1995DF;
    color: #1995DF;
}
.kaerebahu-blue a{
    color: #1995DF;
}
@media screen and (max-width: 399px) {
 
    .kaerebahu-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }

修正した箇所はあまり覚えていません。 よろしければお使いください。

最後に

達成 完了の挿入画像

アフィリエイトリンクを作成しても、広告ブロックの拡張機能やアプリを導入していると以下のように表示されます。

広告のブロック対策

広告ブロック対策については以下の記事をご覧ください。

〇【広告ブロック対策】アフィリエイトの邪魔はさせないぞ!!【実例あり】

コピペOK】「posted with カエレバ」の表示を消したい、なるべくプラグインを導入したくない方にオススメ!!おしゃれなアフィリエイトタグを挿入しよう!!
ツイートもチェックしよう!