サポート サポートへのお問い合わせ | システムステータス システムステータス
ページコンテンツ

    ページ内エクスペリエンスのスタイルのカスタマイズ

    このトピックでは、ページ内エクスペリエンスのスタイルをカスタマイズする方法について説明します。

    このスタイルは、ページ内エクスペリエンスで使用されるフォント、フォントサイズ、色を制御します。スタイルをカスタマイズするには、エクスペリエンスを編集し、左側のナビゲーションで [ スタイル ] をクリックします。

    デバイスの状態の切り替え

    ページの上部にあるリンクを使用して、デスクトップ、タブレット、モバイルなど、さまざまなデバイスの状態のスタイルをカスタマイズできます。

    既定では、スタイルのカスタマイズ時にデスクトップモードが表示されます。デバイスの状態を使用して、選択したデバイスタイプでエクスペリエンスがどのように表示されるかをプレビューできます。

    エクスペリエンスの状態の切り替え

    ページ内エクスペリエンスの視覚状態は、ビューアーがエクスペリエンスを操作すると変化します。これらの各ステートのスタイルは、ページの上部にあるリンクをクリックしてカスタマイズできます。

    次の状態をカスタマイズできます。

    • 再生前 -ビデオ再生が開始される前の最初のレンダリング時のエクスペリエンスの表示方法
    • プレイ中 -動画が再生されているときのエクスペリエンスの表示方法
    • AFTOR PLAY -ビデオの再生後のエクスペリエンスの表示方法(次のビデオの自動再生が無効になっていると仮定)

    これらの各ステートのスタイルを設定するには、州をクリックし、必要に応じてスタイルをカスタマイズします。

    テーマの選択

    テーマには、インページエクスペリエンスのスタイルをすばやく作成するために使用できる色とフォントの事前定義セットが用意されています。Gallery には既定のテーマのセットが用意されていますが、アカウント間で共有される独自のカスタムテーマを作成することもできます。エクスペリエンスにテーマを適用すると、スタイル設定オプションを使用して外観をさらにカスタマイズできます。現在のテーマは、スタイル設定メニューの上部に表示されます。この例では、[ ライト ] テーマが選択されています。

    ページ内エクスペリエンスにテーマを適用するには、次の手順に従います。

    1. 左側のナビゲーションで現在のテーマをクリックして、テーマセレクタを開きます。
    2. テーマをクリックして選択します。プレビューが更新され、テーマの色が表示されます。
    3. 完了したら、ページ上部の [ < スタイルに戻る ] リンクをクリックします。

    [ 既定のテーマをリセット ] リンクをクリックすると、エクスペリエンスに既定のテーマが適用されます。

    スタイル設定するオブジェクトの決定

    スタイル設定するオブジェクトを決定するには、エクスペリエンスのオブジェクトにカーソルを置いてみてください。ほとんどの場合、緑色のボックスがオブジェクトを囲みます。そのオブジェクトのスタイルが有効になり、適用されない他のすべてのスタイルはグレー表示されます。たとえば、オーバーレイの説明の上にカーソルを置くと、[オーバーレイ] と [ オーバーレイ説明] スタイルの両方がハイライト表示されます。オーバーレイスタイルは、オーバーレイのタイトルやオーバーレイの説明など、オーバーレイの外観を制御します。オーバーレイ説明は、ビデオ説明オブジェクトだけの外観を制御します。オーバーレイを使用すると、オーバーレイ全体をスタイル設定したり、タイトルと説明のスタイルを個別にスタイルしたりできます。

    オブジェクトの上にマウスポインタを置いたときに緑色のボックスが表示されない場合は、そのオブジェクトが GLOBAL スタイルの一部と見なされ、 GLOBAL スタイルを使用してスタイルを設定できることを示します。エクスペリエンスに追加されたテキストオブジェクトは、テキストがエクスペリエンスに配置されたときにテキストエディタを使用してスタイルを変更しない限り、 GLOBAL スタイルを使用してスタイルを変更できます。

    スタイルの変更

    スタイルパネルは、エクスペリエンスのオブジェクトのスタイルをカスタマイズするために使用されます。スタイリングパネルは、次のカスタマイズに使用できます。

    カスタム CSS ファイルも指定できます

    テキストと背景色の値の変更

    色の値を選択するには、次の手順を実行します。

    1. カラーサークルをクリックして、カラーピッカーを開きます。
    2. カラースライダを使用して、色の範囲を設定します。
    3. 不透明度スライダを使用して、色の不透明度を設定します。
    4. 色の四角をクリックして、色を選択します。
    5. [ X ] をクリックして、カラーピッカーを閉じます。

    色は、色コードを入力することによって指定することもできます。

    • 16 進数 -16 進数のカラー値は、#RRGGBB で指定されます。RR(赤)、GG(緑)、BB(青)は、色の強度を指定する00からFFまでの16進整数です。
    • RGBA -RGBA カラー値は、rgba(赤、緑、青、アルファ)で指定されます。アルファパラメータは、0.0 (完全に透明) から 1.0 (完全に不透明) までの数値です。
    • HSLA -HSLAカラー値は、HSLA(色相、彩度、明度、アルファ)で指定されます。

    上/下アイコン()をクリックして、カラーモードを切り替えます。

    フォントを選択する

    現在のフォントがスタイルパネルに表示されます。ドロップダウンリストを使用して、新しいフォントを選択します。X をクリックして、フォントピッカーを閉じます。

    フォントサイズの選択

    スタイルパネルに現在のフォントサイズが表示されます。ドロップダウンリストを使用して、新しいフォントサイズを選択します。[ X ] をクリックして、フォントサイズピッカーを閉じます。

    変更されたスタイルには、元に戻す矢印が表示されます。

    元に戻す矢印 ( ) をクリックして、スタイルを元の値にリセットします。スタイルパネルの下部にある [ すべてのデフォルトにリセット ] をクリックして、すべてのスタイルをリセットすることもできます。

    カスタムフォントを追加する

    フォントピッカーにカスタムフォントを追加するには:

    1. 左側のナビゲーションでフォントドロップダウンリストのいずれかをクリックします。
    2. [ カスタムフォントの追加 ] リンクをクリックします。
    3. CSS ファイルの URL を入力します。
    4. フォントセレクタの上部にフォントが追加されていることを確認します。

    カスタム CSS ファイルの使用

    カスタム CSS ファイルのスタイルを使用するには:

    1. 左側のナビゲーションで [ カスタム CSS ] をクリックします。
    2. CSS ファイルの URL を入力するか、CSS コードに貼り付けます。
    3. [保存]をクリックします。