広告バッジのカスタマイズ

広告バッジの背景色を調整するには？

「Sponsored」テキストの背景を調整するには、次の手順に従ってください：

ステップ1

RGBAでカラーオプションを選択します。

ステップ2

Firework埋め込みコードの前に、次のCSSスニペットを挿入します：

<style>
fw-embed-feed {
   --fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* カスタム「Sponsored」バッジ背景 */  
}
</style>

rgba()の値を独自のカラーに置き換えてください。

広告バッジのフォントスタイルを調整するには？

Google Fontsが役立ちます！

ステップ1

Google Fontsから使用したいフォントスタイルを選択します。

ステップ2

Google Fontsから「@import」コードをコピーして、Firework埋め込みコードの前に挿入します。例：

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
</style>

広告バッジのフォントカラーを調整するには？

ステップ1

RGBAでカラーオプションを選択します。

ステップ2

Firework埋め込みコードの前に、次のスクリプトを挿入します：

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* カスタム「Sponsored」バッジフォントカラー */
}
</style>

rgba()の値を独自のカラーに置き換えてください。

ステップ3

最後に、背景を「透明」に設定し、フォントスタイルを入力します。例：

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* カスタム「Sponsored」バッジフォントカラー */
  --fw-storyblock-background: transparent;
  --fw-font-family: "Roboto Slab", serif;
}
</style>

完全な例

上記の調整を含むHTMLスクリプトの例です。

<script async type="text/javascript" src="//asset.fwpub1.com/js/embed-feed.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
fw-embed-feed {
--fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* カスタム「Sponsored」バッジ背景 */
--fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* カスタム「Sponsored」バッジフォントカラー */
--fw-storyblock-background: transparent;
--fw-font-family: "Roboto Slab", serif;
}
</style>
<fw-embed-feed
channel="playlist"
 playlist="oyrAAg"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
branding="false"
player_placement="bottom-right"
></fw-embed-feed>