📋 ColorMeShopへの組み込み方法
以下のコードをColorMeShopのテンプレートに追加してください：
1. HTMLの変更 (top_page.html)
<{* インフォメーション機能 *}>
<div class="p-line-informaiton">
<div class="p-line-informaiton__wrap">
<h2 class="u-visually-hidden">NEWS</h2>
<!-- 新しいWeb Component -->
<sitarama-news-feed
max-items="21"
auto-update="true"
update-interval="900000"
api-endpoint="https://sitarama-news-feed-component.sitarama.app/.netlify/functions/get-news-items">
</sitarama-news-feed>
<!-- Web Component のスクリプト読み込み -->
<script type="module" src="https://sitarama-news-feed-component.sitarama.app/src/components/news-feed-standalone.js"></script>
</div>
</div>
<{* // インフォメーション機能 *}>
2. CSS調整 (必要に応じて)
/* ColorMeShopの既存スタイルとの調整 */
.p-line-informaiton {
padding-top: 0;
padding-bottom: 0;
background: transparent;
}
sitarama-news-feed {
width: 100%;
display: block;
}
注意:
- 実際のデプロイ時は、環境変数を本番環境用に設定してください。
- api-endpoint属性には、NetlifyアプリのURLを指定してください（例: https://sitarama-news-feed-component.sitarama.app/.netlify/functions/get-news-items）
- sitarama.jpなど外部ドメインから使用する場合は、api-endpoint属性の指定が必須です。