WordPressアフィリエイトで役に立つHTMLコード

WordPressを使っていると、ボタン1つで色々なタグを挿入出来るのでとても便利ですが、

元々wordpressには備わっていないhtmlコードが書ける様になると、とてもサイトの見た目が良くなり、アフィリエイトの成約率も全く違ってきます。

プログラミングが出来る人でアフィリエイトで成功している人が多いのも、そういった理由があると思います。

このページでは、wordpressでアフィリエイトする際に活用出来るhtmlコードをいくつかご紹介していきます。

まず、どういったものか解らない方もいるかもしれませんので、代表的な一例を挙げます。

①アンカーテキストでURLリンクを貼るコード

<a href=”リンク先のURL“>アンカーテキスト</a>

コードエディターでURLと文字をそれぞれ貼り付けると

<a href=”https://www.google.com/search?client=ms-android-kddi-jp&sxsrf=ALeKk03M5BB2f49yw8LPEntngFy3_4TQRQ%3A1588749372234&ei=PGSyXtrADcT4hwP13b2oDg&q=%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9%E3%80%80%E7%9B%B8%E4%BA%92%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC&oq=%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9%E3%80%80%E7%9B%B8%E4%BA%92%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAM6BAgAEEc6BAgjECc6BAgAEAQ6BggAEAQQHjoFCCEQoAFQvjBY40tg61RoAHABeACAAZICiAGFDJIBBTAuNS4zmAEAoAEB&sclient=mobile-gws-wiz-serp”>クリックすると私のTwitterアカウントのページにとびます</a>

この様になります。

これをwordpressのコードエディターで貼ると、下の様になります。

クリックすると私のTwitterアカウントのページにとびます

では次に、商品紹介に使い易いhtmlコードをいくつか載せます。

商品紹介①

<table width=”95%” border=”1″ cellpadding=”1″ cellspacing=”0″> <tr> <th colspan=”3″ style=”background-color: #FFC;”>商品名</th> </tr> <tr> <td width=”20%” rowspan=”4″><img src=”イメージ画像URL”/></td> <th width=”30%” style=”background-color: #FFC;”>初期費用</th> <td width=”50%”>○○○円</td> </tr> <tr> <th style=”background-color: #FFC;”>価格</th> <td>○○○円</td> </tr> <tr> <th style=”background-color: #FFC;”>性能</th> <td>ここに説明分</td> </tr> </tr> </table>

この、◯部分それぞれに文字テキストと画像URLを挿入してコードエディターで入力すると、

商品紹介①

<table width=”95%” border=”1″ cellpadding=”1″ cellspacing=”0″> <tr> <th colspan=”3″ style=”background-color: #FFC;”>あつまれどうぶつの森</th> </tr> <tr> <td width=”20%” rowspan=”4″><img src=”http://overseas.minibird.jp/wp-content/uploads/2020/05/eb47ed2e-s-2-1.jpg”/></td> <th width=”30%” style=”background-color: #FFC;”>初期費用</th> <td width=”50%”>3000円</td> </tr> <tr> <th style=”background-color: #FFC;”>価格</th> <td>500円</td> </tr> <tr> <th style=”background-color: #FFC;”>性能</th> <td>世界中の著名人も楽しんでいる あつまれどうぶつの森</td> </tr> </tr> </table>

あつまれどうぶつの森
初期費用 3000円
価格 500円
性能 世界中の著名人も楽しんでいる あつまれどうぶつの森

この様になります。

また、画像のURLが解らないという人もいると思います。

画像のURLの調べ方は、

WordPressのダッシュボードのメディアから画像をアップロードすると、その画像のURLが出てきますので、それをコピーして貼り付けて下さい。

また、上のコードだと、サイズの大きすぎる画像は表示がされなくなってしまいます。

その際は、画像サイズを変更してからアップロードして下さい。

画像サイズ変更サイト

この様に、いくつも応用していく事が出来ます。

商品名
初期費用 ○○○円
価格 ○○○円
性能 ここに説明分
評価 ☆☆☆☆
その他1 テキスト
その他2 テキスト

商品名
価格 評価 備考
テキスト テキスト テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
商品名
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
価格 機能 評価
○○○円 テキスト ★★★★★
商品名
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
価格 機能 評価
○○○円 テキスト ★★★★★

商品名1
テキストテキストテキストテキストテキストテキストテキスト
商品名1
テキストテキストテキストテキストテキストテキストテキスト
商品名1
テキストテキストテキストテキストテキストテキストテキスト

<meta charset=”utf-8″><meta name=”viewport” content=”width=device-width, initial-scale=1″><link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.6.3/css/all.css” integrity=”sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/” crossorigin=”anonymous”><style>.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }.main1 p,.main1 span { line-height: 24px;font-size: 18px }.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 22px; line-height:1.2; text-align: left }.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }.margin-bottom_change{ padding-bottom: 10px !important }h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }h2:before { position: absolute;left: 0.5em;font-family: “Font Awesome 5 Free”;content: “\f14a”; }</style><div class=”main1″><h1>Item Title</h1><section class=”product_dec”><h2>Description</h2><div vocab=”http://schema.org/” typeof=”Product”><span property=”description”>こちらに商品説明を入力してください。Your item description will be placed here.</span></div></section><aside><div class=”shiharai”><h2>Payment</h2><p>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.</p></div><div class=”hasso”><h2>Shipping</h2><p>こちらに発送方法を入力してください。Your Shipping Details will be inserted here. </p></div><div class=”torihiki”><h2>Terms of Sale</h2><p>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here. </p></div><div class=”tyuui”><h2>International Buyers – Please Note:</h2><p class=”margin-bottom_change”>輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。</p><p>Import duties, taxes, and charges are not included in the item price or shipping cost. These charges are the buyer’s responsibility. Please check with your country’s customs office to determine what these additional costs will be prior to bidding or buying.</p></div></aside></div>

Item Title

Description

こちらに商品説明を入力してください。Your item description will be placed here.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です