コードプレイヤー実装ガイド

当社のHTMLコードはHTML/JavaScriptを扱えるあらゆるCMSで実装できます。各プレイヤータイプには異なる動作とカスタマイズ設定があります。

プレイヤーのカスタマイズ方法は2つあります。通常のCSS手法と、ウィジェットコード内に属性を追加する方法です。CSS変数の詳細はこちらを参照してください。

フローティングプレイヤー

フローティングプレイヤーはサイト上の特定の配置場所を占めないため、実装が比較的簡単です。特定のページに実装する場合はそのページの本文内に、スイト全体に表示する場合はサイトのヘッダー内に配置します。

フローティングプレイヤー FAQ

プレイヤーが左下にあり、チャットやクーポン等を隠してしまっています。場所を変更できますか？

可能です！player_placement属性を追加することで変更できます。オプションは「top-left」「top-right」「bottom-right」「bottom-left」です。例: player_placement="top-left"

より詳細な位置指定にはマージンをCSSで変更できます。

• 例: --fw-player-margin: 16px 24px 32px 12px;

プレイヤーが大きすぎます。小さくできますか？

可能です！以下のCSS変数で設定できます：
--fw-player-height
--fw-player-width

閉じた後にページに戻るとフローティングプレイヤーが再表示されます。一度閉じたら再表示されないようにできますか？

可能です。イベントを監視し、Cookieを使ってプレイヤーの読み込みを制御する方法で実現できます。CMSによって実装が異なるため、カスタマーサクセスマネージャーにご相談ください。

ストーリーブロック

ストーリーブロックの重要な利点は、フルスクリーン不要でアクションを操作できることと、モバイル体験に最適化されていることです。

デスクトップでは2つの表示方法があります。ページ幅いっぱいのコンテナーと、特定の場所に配置するコンテナーです。

モバイルでのストーリーブロックの表示例です。フルスクリーン不要でアクションオプションが表示されます。

ストーリーブロック FAQ

デスクトップ表示の予備スペースをなくしたいです。

ページ幅いっぱいに広がらないコンテナーを設定し、その中にコードを配置するだけです。

ストーリーブロックを見た後にフローティングプレイヤーを表示できますか？

スクロールした後にピン留めできます。スクリプト内にdock=trueを追加します。

ストーリーブロックの背景色を変更するには？

CSS変数: --fw-player-background

フォントをカスタマイズするには？

CSS変数: --fw-font-family

カルーセル

カルーセルは各種動画を展示し、ユーザーがスクロールして視聴したい動画をクリックできる優れた方法です。モバイルでは1と⅓動画のみ表示されます。

カルーセル FAQ

フォントをカスタマイズするには？

CSS変数: --fw-font-family

サムネイルのサイズや間隔を変更できますか？

属性size=mediumで変更できます（mediumとlargeの2つのみ。デフォルトはlarge）。さらなるカスタマイズはCSSで可能です。