HCZ BLOG

WordPressで楽天・Yahoo・Amazonリンク対応の立体的ボタンを作成する方法

2025年10月10日

Categories | ブログ（WordPress) Amazon

ブログ（WordPress）記事内に使える、ネット通販向けの“かっこいいリンクボタン”を作りました。

CSSだけで作れる「横並び・立体的・クリックしたくなるボタン」の作り方を紹介します。

下のサンプルは実際に稼働しているリンクボタンです。

✅ サンプル（動作確認）

Auto Amazon Links: プロダクトが見つかりません。

楽天で見る Yahoo!ショッピングで見る Amazonでチェック

✅ 立体的3Dボタンの作り方（コピペOK）

この記事では、次のようなボタンを作ります：

✅ CSSだけでOK（JavaScript不要）
✅ 立体的3Dボタン＋ホバーで浮く
✅ 横並び対応（スマホは自動で縦並び）
✅ テーマに干渉されずに表示可能

Step1：HTMLを記事内に貼る

WordPressの記事本文（テキストモード）に以下を貼ります。

<div class="hiziri-shop-buttons">
<!-- 楽天ボタン -->
<a href="【楽天商品ページURL】" target="_blank" class="hiziri-btn hiziri-rakuten">楽天で見る</a>
<!-- Yahooボタン -->
<a href="【Yahoo商品ページURL】" target="_blank" class="hiziri-btn hiziri-yahoo">Yahoo!ショッピングで見る</a><!-- Amazonボタン -->
<!-- Amazonボタン -->
<a href="【Amazon商品リンク】" target="_blank" class="hiziri-btn hiziri-amazon">Amazonでチェック</a>
</div>

Step2：CSSを追加する

WordPressテーマによってはデザインが崩れたり、CSSが反映されないことがあります。

その場合におすすめなのが プラグイン「Simple Custom CSS」 です。

「Simple Custom CSS」を入れると、投稿内でもCSSが確実に反映されます。
プラグインにCSSを書き込めば、テーマの干渉を回避できます。
無料で、投稿や固定ページに影響されずCSSを反映できます。

✅ Simple Custom CSS 実装方法

WordPress管理画面 → プラグイン → 新規追加
「Simple Custom CSS」 と検索してインストール＆有効化
管理画面 → Custom CSS → カスタムcssの追加 を開く
タイトルに「shop-buttons」など任意の名前をつける
下のCSSをコピペして保存


.hiziri-shop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin: 20px 8px;
}

.hiziri-btn {
  flex: 1 1 120px; /* 自動横並び、最小幅120px */
  max-width: 165px; /* 最大幅を設定 */
  background: linear-gradient(145deg, #555, #222); /* 立体感グラデーション */
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px; /* 文字小さめ */
  padding: 8px 8px; /* 上下8px / 左右8px にして左右余白控えめ */
  border-radius: 12px;
  /* ボタン自体に立体的な影 */
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.3),
    0 8px 12px rgba(0,0,0,0.2),
    0 12px 20px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hiziri-btn:hover {
  transform: translateY(-4px); /* ホバーで少し浮く */
  box-shadow: 
    0 8px 12px rgba(0,0,0,0.3),
    0 12px 20px rgba(0,0,0,0.25),
    0 16px 28px rgba(0,0,0,0.15); /* ホバーで影を強化 */
  background: linear-gradient(145deg, #666, #333); /* ホバーで少し明るく */
}

/* 個別色 */
.hiziri-rakuten { background: linear-gradient(145deg, #e03, #bf0000); }
.hiziri-yahoo { background: linear-gradient(145deg, #ffd633, #ffcc00); color: #111; }
.hiziri-amazon { background: linear-gradient(145deg, #ffb733, #ff9900); color: #111; }