「商品紹介ボタンを付けたいけど、プラグインを増やすのはちょっと怖い…」
そんな悩みを持つ方に向けて、WordPressの標準機能だけでアフィリエイトボタンを作る方法をご紹介します。
コードをコピペするだけなので、HTMLが初めてでも大丈夫です！
プラグインなしで作るメリット
便利なプラグインはたくさんあります。
でも、あえて自作するのには理由があります。
そもそも、なぜ自作するの？
便利なプラグインはたくさんありますが、あえて自作するメリットが3つあります。
① サイトが重くなりにくい
プラグインを増やすと、ページを読み込むたびに余分なデータが発生することがあります。記事が増えてくると、じわじわとサイト速度に影響が出ることも。
自作ならその心配がありません。
② デザインを自由に変えられる
色・大きさ・角丸・文字サイズなど、細かいところまで自分好みに調整できます。「もう少し大きくしたい」「色を変えたい」といった微調整もすぐできます。
③ 自分で管理できる安心感
アフィリエイトリンクには、Googleが推奨する rel="sponsored" という設定を付けるのが望ましいとされています。プラグイン任せにせず、自分で理解して設定できると安心です。
コピペOK！楽天・Amazonボタンのコード
以下のコードを、WordPressのカスタムHTMLブロックに貼り付けるだけです。
<div style="display:flex; gap:10px; margin:20px 0;">
<!-- 楽天市場ボタン -->
<a href="ここに楽天リンク"
target="_blank"
rel="sponsored noopener"
style="flex:1; background:#8f0000; color:#fff; padding:10px; text-align:center; border-radius:12px; text-decoration:none; font-weight:bold; font-size:15px;">
楽天市場で見る
</a>
<!-- Amazonボタン -->
<a href="ここにAmazonリンク"
target="_blank"
rel="sponsored noopener"
style="flex:1; background:#d48208; color:#fff; padding:10px; text-align:center; border-radius:12px; text-decoration:none; font-weight:bold; font-size:15px;">
Amazonで見る
</a>
</div>
ここに楽天リンク と ここにAmazonリンク の部分を、それぞれのアフィリエイトURLに差し替えるだけで完成です。
デザインを変えたいときはここを編集する
ボタンの見た目を変えたい場合、変更するのはこの4箇所だけです。
| 変えたい部分 | 該当コード | 例 |
|---|---|---|
| ボタンの色 | background:#8f0000; | #ff6600（オレンジ）など |
| 高さ・余白 | padding:10px; | 15pxにするとぷっくり |
| 文字サイズ | font-size:15px; | 18pxにすると大きめ |
| 角丸の度合い | border-radius:12px; | 0pxで四角、50pxで丸みが強い |
色は「カラーコード」で検索すると、好きな色のコードを調べられます。
一度登録すれば毎回ラク！「パターン登録」の使い方
毎回コードを貼り付けるのは手間です。WordPressにはパターン登録という便利な機能があるので、ぜひ使ってください。
手順
- カスタムHTMLブロックを作り、コードを貼り付ける
- ブロックを選択した状態で、右上の「︙」メニューを開く
- 「パターンを作成」を選ぶ
- 「商品紹介ボタン」などわかりやすい名前をつけて保存
次回からの使い方
記事編集画面で
/商品紹介と入力するだけで呼び出せます。あとはリンクを差し替えるだけ。とても楽になります。
忘れずに！rel=”sponsored” の設定
アフィリエイトリンクには、必ず rel="sponsored" を付けましょう。
これはGoogleが推奨している設定で、「このリンクは広告です」とGoogleに正しく伝える役割があります。サイトの信頼性を守るためにも、小さなことですが大切なポイントです。
上のコードにはすでに含まれているので、コピペした場合はそのままでOKです。
まとめ
- プラグインなしでも、コピペだけでボタンが作れる
- 色・サイズ・角丸は4箇所を変えるだけで調整できる
- パターン登録しておくと、次回から呼び出すだけで超ラク
rel="sponsored"を忘れずに付けておこう
WordPressは、プラグインを使わなくてもできることが意外と多いです。一度作ってしまえば、あとはどんどん使い回せるので、ぜひ試してみてください！
コメント