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

    ポータルエクスペリエンスでのカスタムフォントの使用

    このトピックでは、Portal Experience でカスタムフォントを使用する方法を学習します。

    ギャラリー・サイト・エディタでは、テーマ、色、フォントを変更して、ポータル・エクスペリエンスのスタイルをカスタマイズできます。Portal Experience で独自のカスタムフォントを使用することもできます。このトピックでは、 Google フォントディレクトリの Acme フォントを使用して、ポータルエクスペリエンスをカスタマイズします。

    カスタムフォントファイルへのリンク

    Google フォントディレクトリには、ウェブページで使用できるオープンソースのフォントが用意されています。エクスペリエンスで使用するフォントを見つけます。このトピックでは、 Acme フォントを使用します。

    Googleヘルプによると、次の行を文書に埋め込む必要があります。

      <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">

    ポータルエクスペリエンスにこの行を含めるには、次の手順に従います。

    1. エクスペリエンスを編集します。
    2. 左側のナビゲーションで [ 外観と動作] [> ヘッダーとフッター ] をクリックします。
    3. [ カスタムヘッダー HTML ] <link>フィールドにタグを貼り付けます。
    4. [保存]をクリックします。

    カスタムフォントの CSS を作成する

    カスタム・フォントを使用するには、適切なテキスト・オブジェクトのスタイルを設定するために、ポータルのカスタム・ヘッダー HTML styleフィールドにタグが追加されます。

    ブラウザで提供される開発ツールは、ページ上のスタイルを設定したいオブジェクト(フォントを変更するオブジェクト)のクラス名を取得するのに役立ちます。要素名は、使用されているテンプレートに基づいて変更されることに注意してください。以下の例では、注目のビデオのフォントと、ページのビデオグリッドに表示されるビデオ名に使用されるフォントを変更します。スクリーンショットはGoogle Chromeを使用して撮影されます。

    1. ブラウザー開発ツールを使用して、フォントを変更するエクスペリエンスの要素を検査します。この場合、注目のビデオタイトルが検査されています。オブジェクトのクラス名を見つけます。
    2. [ カスタムヘッダー HTML ] フィールドに適切な CSS を追加して、注目のビデオタイトルを新しいフォントでスタイルします。
        
            <style>
              .video-name {
               font-family:Acme;
             }
            </style>
            
    3. グリッド内のビデオタイトルのクラス名を見つけます。
    4. <style>既存のタグ内に適切な CSS を追加して、グリッド内のビデオタイトルを新しいフォントでスタイル付けします。
      
            .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
             font-family:Acme;
          }
            
    5. [ カスタムヘッダー HTML ] フィールドに次の項目が含まれていることを確認します。
      <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
        <style>
            .video-name {
            font-family:Acme;
          }
      
          .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
          font-family:Acme;
        }
      </style>
    6. [保存]をクリックします。
    7. [ > レスポンシブプレビューのプレビュー ] をクリックして、更新されたフォントが表示されることを確認します。
    8. 完了したら、エクスペリエンスを公開します

    テンプレートの完全な CSS ファイルは、 > 外観と動作のカスタム設定の一部として [ CSS を表示 ] リンクをクリックして表示できます。フォントのすべてのインスタンスを変更する場合は、テンプレート CSS font-familyでのすべてのオカレンスを検索し、<style>適切なエントリをタグに追加します。