WordPressで楽天・Yahoo・Amazonリンク対応の立体的ボタンを作成する方法
2025年10月10日
Categories | ブログ（WordPress) Amazon
ブログ（WordPress）記事内に使える、ネット通販向けの“かっこいいリンクボタン”を作りました。
CSSだけで作れる「横並び・立体的・クリックしたくなるボタン」の作り方を紹介します。
下のサンプルは実際に稼働しているリンクボタンです。
✅ サンプル（動作確認）
ヴェゼル VEZEL RV3 RV4 RV5 RV6 対応 インナー アウター スカッフプレート 内側 外側 内装パーツ インテリアパネル ブラック ...
￥14,980【対応車種】 ・HONDA ヴェゼル 型式：RV3/RV4/RV5/RV6 年式：令和3年4月～ 【商品仕様】 ・カラー：ブラック ・加工：ヘアライン ・素材：ステンレス 【商品内容】 ・インナースカ... もっと読む
(2025年11月2日 00:22 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の 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; }
✅ 使い方
- WordPress投稿画面 → カスタムHTML ブロックに貼る
- 【楽天商品ページURL】 【Yahoo商品ページURL】【Amazonアフィリンク】 を差し替える
- 公開するとリンク対応の立体的が完成
以上
