10.2. Developer Hub インスタンスのブランディングロゴのカスタマイズ

次の例に示すように、app-config.yaml ファイルの branding セクションを設定することで、Developer Hub インスタンスのブランドロゴをカスタマイズできます。

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}


    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}

ここでは、以下のようになります。

fullLogo は、展開された (固定された) サイドバー上のロゴであり、base64 でエンコードされた画像を想定しています。

iconLogo は、折りたたまれた (固定されていない) サイドバーのロゴであり、base64 でエンコードされた画像を想定しています。

BASE64_EMBEDDED_FULL_LOGO 環境変数の形式は次のように設定できます。

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

次の例は、data:_<media_type>_;base64,<base64_data> 形式を使用して BASE64_EMBEDDED_FULL_LOGO をカスタマイズする方法を示しています。

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

image/svg+xml は、イメージの正しいメディアタイプ (たとえば、image/png や image/jpeg) に置き換えます。また、それに応じてファイル拡張子を調整します。これにより、外部ファイルを参照せずにロゴを直接埋め込むことができます。

次の例に示すように、branding セクションの fullLogoWidth フィールドに値を設定して、ブランディングロゴの幅をカスタマイズすることもできます。

app:
  branding:
    fullLogoWidth: 110px


# ...

1: ロゴの幅のデフォルト値は 110px です。サポートされている単位は、integer、px、em、rem、パーセンテージです。