LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yun_98(ゆん)

WordPressにAmazon書籍の美しい埋め込みボックスを作る方法【JINテーマ対応・コピペだけ】

Last updated at Posted at 2025-10-26

はじめに

WordPressでAmazon Associatesの書籍リンクを貼るとき、デフォルトのリンクだと見た目が地味ですよね。

この記事では、コピペだけで実装できる美しいAmazon書籍埋め込みボックスの作り方を紹介します。

完成イメージ

おすすめ書籍.jpg

特徴：

  • 🎨 コーラルオレンジの温かみのあるデザイン
  • 📱 スマホ完全対応（レスポンシブ）
  • 🖼️ 画像左側配置（PCとタブレット）
  • ✨ ホバーエフェクト付き
  • 🚫 ボタンに下線なし
  • 💻 JINテーマでも動作確認済み

実装方法は2パターン

方法1：CSSファイル版（理想）

  • メリット：一度設定すれば、HTMLはシンプル
  • デメリット：JINテーマでは動作しない可能性が高い

方法2：インラインスタイル版（推奨・確実）

  • メリット：どんなテーマでも確実に動作
  • デメリット：HTMLが長くなる

【重要】JINテーマではインラインスタイルで

結論から言うと、JINテーマを使っている場合は、インラインスタイル版を使用しないとレイアウトがうまく実装できませんでした。

なぜCSSファイル版が動かないのか

JINテーマで外部CSSファイルを使った場合、以下のような問題が次々と発生しました：

問題1：Flexboxが効かない

/* これを書いても... */
.amazon-book-link {
  display: flex;
  flex-direction: row;
}

結果： 画像が左に来ない、縦並びになる

原因： JINテーマ独自のCSSが以下のように上書きしてくる

/* JINテーマのCSS（推測） */
.entry-content a {
  display: inline-block; /* これが優先される */
}

問題2：!important を付けても動かない

/* !important を付けても... */
.amazon-book-link {
  display: flex !important;
  flex-direction: row !important;
}

結果： それでも画像が左に来ない

原因： JINテーマのCSSの詳細度（specificity）が高すぎる

/* JINテーマのCSS（推測） */
body .entry-content .amazon-book-link {
  /* より詳細度が高いセレクタ */
}

問題3：画像の幅が制御できない

.amazon-book-image {
  width: 160px !important;
}

結果： 画像が勝手にリサイズされる、幅が効かない

原因： JINテーマがすべての画像に対して以下を適用

/* JINテーマのCSS */
.entry-content img {
  max-width: 100%;
  height: auto;
}

問題4：h3タグにJIN独自のスタイルが適用される

.amazon-book-text h3 {
  border: none !important;
  padding: 0 !important;
}

結果： それでもJINのh3スタイル（ボーダー、背景色など）が残る

原因： JINテーマのh3には複雑なスタイルが設定されている

/* JINテーマのCSS */
.entry-content h3 {
  border-left: 4px solid #xxx;
  padding-left: 15px;
  background: linear-gradient(...);
}

問題5：box-sizingの違い

.amazon-book-box * {
  box-sizing: border-box !important;
}

結果： パディングやボーダーの計算がおかしくなる

原因： JINテーマはデフォルトで box-sizing: content-box を使っている箇所がある

試した対策と失敗の記録

対策1：!important を全てに付ける → ❌ 失敗

.amazon-book-link {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  /* すべてに!importantを付けた */
}

結果： それでも画像が左に来ない

対策2：詳細度を上げる → ❌ 失敗

body .entry-content .amazon-book-link {
  display: flex !important;
}

結果： 少し改善したが、まだ完璧ではない

対策3：order プロパティで順序制御 → ❌ 失敗

.amazon-book-image {
  order: -1 !important; /* 最初に表示 */
}

結果： display: flex が効いていないので order も無効

対策4：Simple Custom CSS and JS プラグインを使う → ❌ 失敗

結果： プラグインを使っても、JINテーマのCSSの方が優先される

対策5：キャッシュクリアを何度も試す → ❌ 失敗

結果： キャッシュの問題ではなかった

なぜインラインスタイルなら動くのか

インラインスタイルは CSSの優先順位が最も高い ため、どんなテーマのCSSよりも優先されます。

CSS優先順位（高い順）：

  1. インラインスタイル ← 最強
  2. IDセレクタ + !important
  3. クラスセレクタ + !important
  4. IDセレクタ
  5. クラスセレクタ
  6. 要素セレクタ
<!-- これは絶対に優先される -->
<div style="display: flex; flex-direction: row;">
  ...
</div>

JINテーマのCSSがどれだけ複雑でも、インラインスタイルには勝てません。

実際の苦労した作業の流れ

  1. 最初： CSSファイル版で実装
  2. 問題発生： JINテーマで画像が左に来ない
  3. 対策1： !important を追加 → 効果なし
  4. 対策2： 詳細度を上げる → 少し改善するも不十分
  5. 対策3： プラグインを変える → 効果なし
  6. 対策4： キャッシュクリアを繰り返す → 無駄な作業
  7. 対策5： JINテーマのCSSを調査 → 複雑すぎて特定困難
  8. 最終手段： インラインスタイル版に変更 → 一発で解決！

所要時間： 約2時間の試行錯誤...

インラインスタイル版のデメリットを補う方法

「HTMLが長くなる」というデメリットがありますが、以下の方法で対処できます：

方法1：テンプレートファイルを作る

デスクトップに amazon-book-template.html を作成して保存

<!-- amazon-book-template.html -->
<div style="border: 2px solid #FF9966; ...">
  ...
</div>

使うときはコピペして、URL・タイトル・画像だけ変更

方法2：スニペットツールを使う

ショートカットキーでテンプレートを呼び出せます。

方法3：WordPress用のショートコードを作る

functions.php に以下を追加（上級者向け）：

function amazon_book_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '',
        'image' => '',
        'title' => '',
        'desc' => ''
    ), $atts);
    
    return '<div style="border: 2px solid #FF9966; ...">' . 
           '...' . 
           '</div>';
}
add_shortcode('amazon_book', 'amazon_book_shortcode');

使用例：

[amazon_book url="https://amzn.to/xxx" image="https://..." title="書籍名" desc="説明"]

それぞれ解説していきます。

【結論】JINテーマならインラインスタイル版推奨

上記の理由から、JINテーマを使っている場合は、最初からインラインスタイル版を使うことを強く推奨します。

無駄な試行錯誤を避けて、確実に動作する方法を選びましょう。

方法1：インラインスタイル版（推奨・確実）

どんなテーマでも確実に動作する方法です。JINテーマならこれ一択！

HTMLテンプレート（コピペ用・スマホ対応版）

記事内で以下のHTMLを カスタムHTMLブロック に貼り付けます。

<div
  style="
    border: 2px solid #ff9966;
    border-radius: 12px;
    margin: 30px 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 153, 102, 0.2);
    max-width: 100%;
    width: 100%;
  "
>
  <div
    style="
      background: linear-gradient(135deg, #ff9966 0%, #ff8552 100%);
      color: #fff;
      padding: 12px 24px;
      font-weight: bold;
      font-size: 1.1em;
      display: flex;
      align-items: center;
      gap: 10px;
    "
  >
    <span style="font-size: 1.3em; line-height: 1">📚</span>
    <span>おすすめ参考書</span>
  </div>
  <div style="padding: 24px">
    <a
      href="AmazonのURL"
      target="_blank"
      rel="nofollow noopener"
      class="amazon-book-responsive"
      style="
        display: flex;
        flex-direction: row;
        gap: 20px;
        text-decoration: none;
        color: inherit;
        align-items: flex-start;
      "
    >
      <div
        class="amazon-book-image-mobile"
        style="
          flex-shrink: 0;
          width: 160px;
          min-width: 160px;
          max-width: 160px;
          margin: 0;
          padding: 0;
        "
      >
        <img
          src="書籍画像URL"
          alt="書籍タイトル"
          style="
            width: 100%;
            height: auto;
            display: block;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 0;
            padding: 0;
          "
        />
      </div>
      <div style="flex: 1; display: flex; flex-direction: column; min-width: 0">
        <h3
          style="
            font-size: 1.3em;
            margin: 0 0 12px 0;
            padding: 0;
            color: #2c3e50;
            line-height: 1.5;
            font-weight: bold;
            border: none;
            background: none;
          "
        >
          書籍タイトル
        </h3>
        <p
          style="
            color: #666;
            line-height: 1.7;
            margin: 0 0 16px 0;
            padding: 0;
            font-size: 0.95em;
            flex-grow: 1;
          "
        >
          書籍の説明文をここに書きます。
        </p>
        <span
          class="amazon-book-button-mobile"
          style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: #ff9966;
            color: #fff;
            padding: 12px 28px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 0.95em;
            align-self: flex-start;
            text-decoration: none;
            border: none;
            cursor: pointer;
            width: fit-content;
          "
          >Amazonで見る →</span
        >
      </div>
    </a>
  </div>
</div>

使い方

  1. 上記のHTMLをコピー
  2. カスタムHTMLブロックに貼り付け
  3. 以下を編集：
    • AmazonのURL → Amazon Associatesの短縮URL
    • 書籍画像URL → Amazonの商品画像URL
    • 書籍タイトル → 実際のタイトル
    • 書籍の説明文 → 実際の説明文
  4. 公開

これだけで完成！CSSファイルは不要です。

方法2：CSSファイル版（参考・他のテーマ向け）

JINテーマ以外で、テーマのCSSが干渉しない場合はこちらの方法も使えます。

ただし、JINテーマでは動作しない可能性が高いので、最初からインラインスタイル版を使うことを推奨します。

ステップ1：CSSを追加

WordPress管理画面から カスタムCSS に以下を追加します。

推奨プラグイン： Simple Custom CSS and JS

/* JINテーマのデフォルトスタイルをリセット */
.amazon-book-box,
.amazon-book-box * {
  box-sizing: border-box !important;
}

/* Amazon書籍埋め込みボックス */
.amazon-book-box {
  border: 2px solid #FF9966 !important;
  border-radius: 12px !important;
  margin: 30px 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(255, 153, 102, 0.2) !important;
  transition: all 0.3s ease !important;
  max-width: 100% !important;
  width: 100% !important;
}

.amazon-book-box:hover {
  box-shadow: 0 4px 16px rgba(255, 153, 102, 0.3) !important;
  transform: translateY(-2px) !important;
}

.amazon-book-header {
  background: linear-gradient(135deg, #FF9966 0%, #FF8552 100%) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.amazon-book-icon {
  font-size: 1.3em !important;
  line-height: 1 !important;
}

.amazon-book-content {
  padding: 24px !important;
}

.amazon-book-link {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.3s ease !important;
  align-items: flex-start !important;
}

.amazon-book-link:hover {
  opacity: 0.95 !important;
  text-decoration: none !important;
}

.amazon-book-image {
  flex-shrink: 0 !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  order: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.amazon-book-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

.amazon-book-link:hover .amazon-book-image img {
  transform: scale(1.03) !important;
}

.amazon-book-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.amazon-book-text h3 {
  font-size: 1.3em !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  color: #2c3e50 !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
  border: none !important;
  background: none !important;
}

.amazon-book-text p {
  color: #666 !important;
  line-height: 1.7 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 0.95em !important;
  flex-grow: 1 !important;
}

.amazon-book-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #FF9966 !important;
  color: #fff !important;
  padding: 12px 28px !important;
  border-radius: 25px !important;
  font-weight: bold !important;
  font-size: 0.95em !important;
  align-self: flex-start !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

.amazon-book-button:hover,
.amazon-book-link:hover .amazon-book-button {
  background: #FF8552 !important;
  transform: translateX(3px) !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* レスポンシブ - スマホのみ対応 */
@media (max-width: 600px) {
  .amazon-book-link {
    flex-direction: column !important;
    gap: 18px !important;
  }
  
  .amazon-book-image {
    width: 100% !important;
    min-width: auto !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  .amazon-book-text h3 {
    font-size: 1.1em !important;
  }

  .amazon-book-text p {
    font-size: 0.9em !important;
  }

  .amazon-book-button {
    align-self: center !important;
  }
}

/* タブレット・PC用の強制設定 */
@media (min-width: 601px) {
  .amazon-book-link {
    flex-direction: row !important;
  }
  
  .amazon-book-image {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    order: -1 !important;
    margin: 0 !important;
  }
  
  .amazon-book-button {
    align-self: flex-start !important;
  }
}

完成です！

注意： JINテーマでは上記の方法でも動作しない可能性があります。その場合は、素直にインラインスタイル版を使用すると良いかもしれません。

Amazon画像とリンクの取得方法

📸 商品画像の取得

  1. Amazon商品ページを開く
  2. 商品画像を右クリック
  3. 「画像アドレスをコピー」 を選択
  4. コピーしたURLを貼り付け

取得できるURL例：

https://m.media-amazon.com/images/I/51AbCdEfGh._AC_SL1500_.jpg

🔗 アフィリエイトリンクの取得

  1. Amazon Associates にログイン
  2. 商品を検索
  3. 「リンク作成」 をクリック
  4. 短縮URL（https://amzn.to/xxxxx）をコピー

カスタマイズ方法

🎨 色を変更したい場合

以下の4箇所を変更してください：

  1. ボーダーカラー：#FF9966
  2. ヘッダーのグラデーション：#FF9966 と #FF8552
  3. ボタンカラー：#FF9966
  4. ボタンホバー時：#FF8552

カラーコード変換ツール：
https://www.peko-step.com/tool/tfcolor.html

📏 サイズを変更したい場合

  • 画像サイズ：width: 160px; の 160px を変更
  • パディング：padding: 24px; の 24px を変更
  • 余白：margin: 30px 0; の 30px を変更

📖 ヘッダーラベルのバリエーション

<!-- パターン1 -->
<span class="amazon-book-icon">📚</span>
<span>おすすめ参考書</span>

<!-- パターン2 -->
<span class="amazon-book-icon">📖</span>
<span>あわせて読みたい</span>

<!-- パターン3 -->
<span class="amazon-book-icon">💡</span>
<span>この本もチェック</span>

<!-- パターン4 -->
<span class="amazon-book-icon">✨</span>
<span>人気の書籍</span>

<!-- パターン5 -->
<span class="amazon-book-icon">🎯</span>
<span>試験対策本</span>

トラブルシューティング

画像が左に来ない

原因： テーマのCSSが強力で上書きされている

解決策1： すべてのCSSに !important が付いているか確認

解決策2： インラインスタイル版を使用

解決策3： HTMLで画像を先に書く

<a href="...">
  <!-- 画像を先に -->
  <div class="amazon-book-image">...</div>
  <!-- テキストを後に -->
  <div class="amazon-book-text">...</div>
</a>

スマホで崩れる

原因： レスポンシブCSSが効いていない

解決策： メディアクエリ（@media）がCSSに含まれているか確認

ボタンに下線が表示される

原因： テーマのリンクスタイルが適用されている

解決策： text-decoration: none !important; を追加

JINテーマでの注意点

JINテーマは独自のCSSが強力なので、以下を確認してください：

  1. ✅ Simple Custom CSS and JS プラグインを使用
  2. ✅ すべてのプロパティに !important を付ける
  3. ✅ キャッシュをクリア（JINテーマ設定 + ブラウザ）
  4. ✅ 古いCSSを削除してから新しいCSSを追加

それでもダメなら、インラインスタイル版を使ってください。

まとめ

この記事では、WordPressにAmazon書籍の美しい埋め込みボックスを実装する方法を紹介しました。

重要なポイント

JINテーマを使っている場合：

  • ✅ インラインスタイル版を使う（確実に動作）
  • ❌ CSSファイル版は避ける（動作しない可能性が高い）

他のテーマを使っている場合：

  • ✅ CSSファイル版も試せる（管理しやすい）
  • ✅ インラインスタイル版も使える（確実）

なぜインラインスタイルじゃないとダメだったのか

JINテーマは独自のCSSが非常に強力で、外部CSSファイルでは以下の問題が発生しました：

  1. Flexboxが効かない → 画像が左に来ない
  2. !important でも上書きできない → 詳細度の問題
  3. 画像の幅が制御できない → テーマのスタイルが優先される
  4. h3タグのスタイルが残る → ボーダーや背景色が消えない
  5. box-sizingの違い → レイアウトが崩れる

インラインスタイルはCSS優先順位が最も高いため、どんなテーマのCSSよりも優先されます。

約2時間の試行錯誤の末、インラインスタイル版で一発解決しました。

実装方法のまとめ

  1. インラインスタイル版HTMLをコピー
  2. カスタムHTMLブロックに貼り付け
  3. URL・画像・タイトル・説明文を編集
  4. 公開

これだけで完成！CSSファイルは不要です。

完成したら：

  • 📱 スマホでも確認
  • 🖱️ ホバーエフェクトを確認
  • 🔗 Amazonリンクが正しく動作するか確認

無駄な試行錯誤を避けて、最初から確実に動作する方法を選びましょう！

参考リンク

この記事が役に立ったら、LGTM（いいね） をお願いします！🙌

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?