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

2022-01-19
2022-02-14
wordpress
332view

wordpress

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

1 はじめに
2 アフィリエイトリンクの導入方法【実例】
3 完成コード【コピペOK】
4 最後に

はじめに

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

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング

基礎から応用まで網羅されており、痒い所に手が届く感じの本でした。

Amazon

楽天 Yahoo!

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

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

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

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

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

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

退屈なことはＰｙｔｈｏｎにやらせようノンプログラマーにもできる自動化処理プログラミング /オライリ-・ジャパン/アル・スウェイガート

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

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

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

不具合が発生する度に対処する方が面倒だよね(‘_’)

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

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

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

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

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

⑤「カスタム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;
    }

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