microCMSでAmazonや楽天の広告を掲載する方法

    "main": [
        {
            "fieldId": "main_text",
            "editor": "<p>microCMSのリッチエディタで<span style=\"color: #ff0000\">文字色</span>を指定できるようになった。リッチエディタで色を指定するとspanタグで囲われ、styleが当てられるとのこと。</p><figure><img src=\"https://images.microcms-assets.io/assets/8f0bc8c406f74aabab2691baa1af6a0d/23cf0653ed0e419b87a9e47583ca2d6b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-10%2023.05.20.png\" alt=\"\" width=\"1163\" height=\"694\"></figure><h2 id=\"h537e21d2f2\">便利な使い方（プリセット）</h2><p>都度、カラーコードを指定するのは面倒なので、よく使う色を予め設定しておくことも可能。設定方法は「APIスキーマ」を選択し、リッチエディタを利用しているフィールドの詳細設定メニューの下部へスクロールすると「色のプリセット」という項目があるので、そこで設定が可能。</p><figure><img src=\"https://images.microcms-assets.io/assets/8f0bc8c406f74aabab2691baa1af6a0d/e576a73a919a47a69d0893e344813115/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-10%2023.08.14.png\" alt=\"\" width=\"1174\" height=\"749\"></figure><h2 id=\"h466fd21fa3\">参照元</h2><p>さらに詳しい使い方や注意点などはmicroCMSブログを参照</p><ul><li><a href=\"https://blog.microcms.io/richeditor-textcolor/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">リッチエディタで文字色を設定できるようになりました</a></li></ul>"
        },
        {
            "fieldId": "product",
            "product_name": "Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた",
            "product_image": {
                "url": "https://images.microcms-assets.io/assets/8f0bc8c406f74aabab2691baa1af6a0d/390efc1b6be54e58b803d3a43811f313/nextjs_microcms.jpg",
                "height": 1500,
                "width": 1063
            },
            "amazon_link": "https://amzn.to/3Nlh5Tl",
            "rakuten_link": "https://a.r10.to/hPG8Js"
        },
        {
            "fieldId": "main_text",
            "editor": "<p>2回目本文</p><h2 id=\"hdddc12409d\">2回目本文見出し</h2>"
        }
    ]

export type Main = {
  fieldId: string;
  editor: string;
  product_name: string;
  product_link: string;
  amazon_link: string;
  rakuten_link: string;
  product_image: {
    url: string;
    width: number;
    height: number;
  };
};

      <div className={styles.content}>
        {data.main.map((block, index) => {
          switch (block.fieldId) {
            case "main_text":
              return (
                <div
                  key={`main_text-${index}`}
                  dangerouslySetInnerHTML={{ __html: block.editor }}
                  className={styles.content}
                />
              );
            case "product":
              return (
                <div key={`product-${index}`} className={styles.product}>
                  <Image
                    src={block.product_image.url}
                    alt={block.product_name}
                    width={block.product_image.width}
                    height={block.product_image.height}
                    className={styles.product_image}
                  />
                  <div className={styles.product_info}>
                    <span className={styles.product_name}>
                      {block.product_name}
                    </span>
                    <div className={styles.product_links}>
                      <a
                        href={block.amazon_link}
                        target="_blank"
                        className={`${styles.link} ${styles.amazon}`}
                      >
                        Amazon
                      </a>
                      <a
                        href={block.rakuten_link}
                        target="_blank"
                        className={`${styles.link} ${styles.rakuten}`}
                      >
                        楽天市場
                      </a>
                      <a
                        href="#"
                        target="_blank"
                        rel="nofollow"
                        className={`${styles.link} ${styles.yahoo}`}
                      >
                        Yahoo!ショッピング
                      </a>
                    </div>
                  </div>
                </div>
              );
            default:
              return null;
          }
        })}
      </div>

.product_image {
  width: 100%;
  height: auto;
}

.product {
  display: flex; 
  align-items: center; 
  border: 1px solid #ccc; 
  border-radius: 8px; 
  padding: 16px; 
  margin-bottom: 16px; 
  background-color: #f9f9f9; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.product_image {
  max-width: 120px; 
  height: auto; 
  margin-right: 16px; 
  border-radius: 4px; 
}

.product_info {
  display: flex;
  flex-direction: column; 
}

.product_name {
  font-size: 1.1em; 
  font-weight: bold; 
  margin-bottom: 8px; 
}

.product_links {
  display: flex; 
  gap: 12px; 
}

.product_links .link {
  padding: 8px 12px; 
  color: white; 
  text-decoration: none; 
  border-radius: 4px; 
  font-size: 0.9em; 
  font-weight: bold;
  width: -webkit-fill-available;
  text-align: center;
}

.amazon {
  background-color: #ffa724; 
  transition: background-color 0.3s ease;
}
.amazon:hover {
  background-color: #ffc766; 
}
.rakuten {
  background-color: #ff5f5f; 
  transition: background-color 0.3s ease;
}
.rakuten:hover {
  background-color: #ff7a7a; 
}
.yahoo {
  background-color: #39c0e0; 
  transition: background-color 0.3s ease;
}
.yahoo:hover {
  background-color: #5bcfee; 
}

@media (max-width: 640px) {
  .product {
    flex-direction: column; 
    align-items: flex-start;
    gap: 20px;
  }

  .product_image {
    margin: 0 auto;
  }

  .product_links {
    flex-direction: column; 
    width: 100%; 
    gap: 8px; 
  }

  .link {
    width: 100%; 
  }
}