CSS を使用してブランドガイドをカスタマイズする

CSS を使用して、ブランドガイドの視覚的な構造、レイアウト、美観を決定します。

ご利用可能なユーザー

プラン:

  • Brandfolder

権限:

  • 所有者
  • 管理者

Find out if this capability is included in Smartsheet Regions or Smartsheet Gov.

CSS (カスケード スタイル シート) は、Web サイトの複数のページ全体で統一された視覚的に魅力的な外観を作成するために使用される設計言語です。HTML はテキスト コンテンツを主に決定しますが、CSS は Web サイトの視覚的な構造、レイアウト、美観を決定します。

CSS のカスタマイズは、CSS に関する高度な知識がある場合にのみ推奨されます。それは、サポートがブランドガイドでのカスタム コードの実装に関する支援を行っていないためです。

Brandguide はコードをサニタイズして、XSS 攻撃を防ぎます。基礎となるブランドガイド コードはいつでも変更される可能性があり、変更すると CSS や HTML に影響する可能性があります。

ブランドガイドで CSS を使用する

  1. ブランドガイドを開きます。 
  2. 左メニューの[設定]を選択します。 
  3. [カスタマイズ]セクションまで下にスクロールし、 [CSS]テキスト ボックスにコードを入力します。 
CSS Brandguide

便利な CSS プロパティ

ブランドガイドをカスタマイズするのに役立つ CSS プロパティをいくつか次に示します。

テキストプロパティ

  • font-family: テキストのフォントを設定します。例: Arial、Times
  • font-size: フォント サイズを設定します。例: 5px、1em
  • font-weight: フォントの太さまたは太字を設定します。例: bold、200
  • color: テキストの色を設定します。例: blue、#add8e6、rgb(135,206,250)
  • line-height: 垂直方向の行間のスペース。例: 5px、1em
  • letter-spacing: 文字間のスペース。例: 5px、1em
  • word-spacing: 単語間のスペース。例: 5px、1em

背景プロパティ

  • background-color: 要素の背景色を設定します。例: blue、#add8e6、rgb(135,206,250)
  • background-image: URL に基づいて背景画像を設定します。例: url('sample-image.jpg')
  • 背景位置:背景画像の開始位置を設定します (例: 中央または 50%)

スペース プロパティ

以下のプロパティは、auto、inherit、%、または任意のCSS長さ単位を受け入れます 

  • 高さ:要素の高さを設定します。 
  • 幅:要素の幅を設定します。 
  • パディング:要素のパディング スペースを設定します。
  • マージン:要素のマージン スペースを設定します。 

長さと単位

  • ピクセル:ピクセル (1ピクセル = 1/96 1 インチ)
  • em:要素のフォント サイズに対する相対値 (3em = 現在のフォント サイズの 3 倍)
  • vw:ビューポートの幅の 1% を基準
  • vh:ビューポートの高さの 1% を基準
  • %:親要素に対して相対

サードパーティ フォントを追加する

@font-face は、ブランドガイドでサードパーティ フォントをインポートして利用できる CSS ルールです。フォントは、ブロック レベルではなく、グローバル設定レベルで CSS を使用して追加することをお勧めします。

サードパーティ フォントは、以下の 2 つの方法で追加できます。

  • 任意のフォント ライブラリに移動し、ブランドガイドに追加するフォントを選択して URL をコピーして貼り付けます。

または、

  • フォントを WOFF または WOFF2 形式に変換します。この Web フォント形式は、ttf/OTF テキスト ファイル形式よりもブラウザーとの互換性が高いです。

以下のセクションでは、それぞれの方法を説明します。

サードパーティ フォントをそのまま使用する

  1. 任意のフォント ライブラリに移動し、ブランドガイドに追加するフォントを選択します。この例では、Google Fonts のSatisfyを使用します。
  2. 選択したら、@import URL をコピーして新しいブラウザー タブに貼り付けます。 
CSS Brandguide
  1. これにより、フォントをブランドガイドにインポートするために必要な URL と形式を含むページに移動します。
CSS Brandguide

4. 以下の例のように、src URL をコピーし、@font-face コードと font-family に貼り付けます。

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

  1. コードをCSS ボックスに貼り付け、Update CSSを選択して変更を保存します。

新しくインポートされたフォントは、グローバル設定フライアウトの [既定の書体] ドロップダウンに表示されます。

使用する他のフォントのテンプレートとして、以下の構文を使用します。希望するフォントに合わせて、font-family と src URL を更新するだけです。上記の例と同じ構文です。フォントをインポートするために必要なだけです。 

@font-face {
font-family: '[Font name}';
src: url([Font SRC URL);
}

WOFF または WOFF2 形式に変換したフォントを使用する

  1. WOFF か WOFF2 へのフォント変換器を見つけます。

  2. フォントを WOFF または WOFF2 形式に変換してダウンロードします。この Web フォント形式は、ttf/otf テキスト ファイル形式よりもブラウザーの互換性が高いです。

  3. フォントを Brandfolder 内のファイル セクションにアップロードします。

  4. アセットを開き、[埋め込み] タブに移動してリンクのコピーを選択します。

  5. 下のコードをCSSボックスにコピーします。必要な font-family を設定し、URL を前の手順でコピーしたリンクに置き換えます。変更内容を保存します。 

@font-face {
フォントファミリー: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff');
}

この方法でインポートされたフォントは、デフォルトの書体ドロップダウンに表示されません。代わりに、CSSセクション内でフォントを手動で適用する必要があります。以下は、インポートされた段落タグに太字 Web フォントを適用する例です。

p {
フォントファミリー: 'boldweb';
色: #333;
}