「WordPress初心者必見！アフィリエイトコンテンツの配置とカスタマイズ完全ガイド」

こんにちは、SouDogです。

WordPressでブログを運営するなら、アフィリエイトコンテンツの配置は収益化の重要なポイントです。しかし、初心者の方には「どうやって配置すればいいのか」「コードをどう使えばいいのか」といった壁がありますよね。

この記事では、初心者向けに具体的な手順やHTML・CSSのコードを交えながら、アフィリエイトリンクやバナーを配置する方法をわかりやすく解説します。ぜひ一緒に進めてみてください！

1. サイドバーにアフィリエイトバナーを配置する
- 手順
- 見た目を整えるCSSコード
2. 本文中にアフィリエイトリンクを自然に埋め込む
- 手順
- デザインを整えるCSSコード
3. ボタン型CTA（Call to Action）の活用
- HTMLコード
- CSSコード
4. モバイル対応（レスポンシブデザイン）を忘れずに
- レスポンシブ用CSS
5. プラグインで効率化を図る
まとめ

1. サイドバーにアフィリエイトバナーを配置する

ブログのサイドバーは、訪問者の目に留まりやすく、アフィリエイトバナーを設置するのに最適です。

手順

WordPressの管理画面を開く
「外観 > ウィジェット」を選択します。
「カスタムHTML」をサイドバーに追加
「カスタムHTML」ウィジェットをサイドバーにドラッグ＆ドロップします。
以下のHTMLコードを入力

<div class="affiliate-banner">
  <a href="https://example.com" target="_blank">
    <img src="https://via.placeholder.com/300x250" alt="おすすめバナー">
  </a>
</div>

保存して確認
保存ボタンを押し、サイトをプレビューしてバナーが表示されることを確認します。

見た目を整えるCSSコード

次に、バナーのデザインを整えます。

管理画面で「外観 > カスタマイズ > 追加CSS」を開く
以下のコードを貼り付ける

.affiliate-banner {
  margin: 20px 0;
  text-align: center;
}

.affiliate-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.affiliate-banner a:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

これで、サイドバーにスタイリッシュなバナーが表示され、ホバー時に少し拡大する動きが加わります。

2. 本文中にアフィリエイトリンクを自然に埋め込む

記事の流れに沿った形でアフィリエイトリンクを配置することで、読者にとって自然な形で商品やサービスを訴求できます。

手順

投稿編集画面を開く
WordPressで新しい投稿を作成し、「テキストモード」に切り替えます。
以下のHTMLコードを挿入

<p>この商品は使いやすさと高品質で、多くのユーザーに選ばれています。</p>

<div class="affiliate-box">
  <a href="https://example.com/affiliate-link" target="_blank" rel="nofollow">
    <img src="https://via.placeholder.com/600x200" alt="おすすめ商品">
  </a>
  <p class="affiliate-description">
    <a href="https://example.com/affiliate-link" target="_blank" rel="nofollow">
      【公式サイト】おすすめ商品の詳細はこちら
    </a>
  </p>
</div>

保存してプレビュー
商品画像とリンクが記事内に表示されるのを確認します。

デザインを整えるCSSコード

.affiliate-box {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.affiliate-box img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.affiliate-box .affiliate-description {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

.affiliate-box a {
  color: #0073aa;
  text-decoration: none;
}

.affiliate-box a:hover {
  text-decoration: underline;
  color: #005885;
}

これで記事内に目立つアフィリエイトリンクを自然に埋め込めます。

3. ボタン型CTA（Call to Action）の活用

読者の行動を促すため、目立つボタンを設置するのも効果的です。

HTMLコード

<div class="cta-button">
  <a href="https://example.com/affiliate-link" target="_blank" rel="nofollow">
    今すぐ詳細を確認する
  </a>
</div>

CSSコード

.cta-button a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff5722;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.cta-button a:hover {
  background-color: #e64a19;
}

ボタンに「今すぐ購入」「詳細はこちら」など具体的な行動を促す文言を入れるとクリック率が上がります。

4. モバイル対応（レスポンシブデザイン）を忘れずに

スマートフォンからのアクセスにも対応するため、レスポンシブデザインを取り入れます。

レスポンシブ用CSS

@media screen and (max-width: 768px) {
  .affiliate-box img {
    max-width: 100%;
    height: auto;
  }
  
  .cta-button a {
    font-size: 14px;
    padding: 8px 15px;
  }
}

これで小さい画面でも快適に閲覧できます。