CSSを使用したブランドガイドのカスタマイズ – Getty Images メディアマネージャー

新しいブランドガイドへようこそ! この記事だけでなく、ブランドガイド手引きおよびCSSを使ったBrandguide のカスタマイズを併せてご覧いただくと、新しいBrandguide へコンテンツを移行する方法を説明します。既存のBrandguide の編集機能は 2023 年 9 月 1 日に廃止されます。 2023年12月1日には、旧来のBrandguide エディターが使用できなくなります。

CSS または "Cascading Style Sheets" は、ウェブサイト全体にわたってすべてのページが均一で視覚的に楽しい外観を作成するために、ウェブ開発者が使用するデザイン言語です。 HTML は主にテキストの内容を決定しますが、CSS はウェブサイトの視覚的構造、レイアウト、美観を決定します。

CSS 構文

CSS 構文は一連のルールで構成されています。これらのルールには、セレクター、プロパティ、値の3つのパーツがあります。

Selector {
property: value;
}

セレクターはスタイルを適用する HTML 要素を表します。このプロパティは、color、font-family、margin などの HTML 要素の特定の側面を参照します。 CSS で使用されるすべてのプロパティには、受け入れられた値のセットがあります。たとえば、16 進コードやピクセル値などです。

セレクターは、複数のプロパティと値のペアを持つことができ、セミコロンで区切られています。例えば、以下では、プロパティの指定された値をすべての h1 タグに適用しています。

h1 {
font-family: comic sans;
font-size: 12px;
color: blue;
}

一般的な CSS セレクター

CSS タイプセレクター

CSS タイプセレクターは、ウェブページ内の特定のタイプのすべての要素を選択します。

一般的なタイプセレクターの例を以下に示します。

p: すべての段落タグを選択します。
a: すべてのハイパーリンクを選択します。
h1: すべての h1 ヘッダータグを選択します。
span: すべてのスパンタグを選択します。
body: Web ページ本文内のすべての要素を選択します。
button :ウェブページ上のすべてのボタンを選択します。
li: すべてのリスト項目を選択します。

CSS クラスセレクター

CSS クラスは、HTML 要素のグループを定義するために使用される属性です。これにより、単一のセレクターを使用して複数の要素をカスタマイズすることができます。 CSSでクラス名の前にピリオド(.)文字を入力することで、これを行うことができます。例えば、サンプルヘッダーと以下の段落のフォントを変更する場合は:

<h1 class="i-am-a-class">header
paragraph

以下のCSSを使って、i-am-a-classのクラスを持つすべての要素をターゲットにします。

.i-am-a-class {
font-family: helvetica;
}

CSS ID セレクター

CSS id は、ウェブページ上の単一の一意要素を定義するために使用される属性です。特定の id を持つ要素を選択するには、id の前にハッシュ (#) 記号を入力します。例えば、以下の段落のフォントを変更する場合は:

paragraph

以下の CSS を使用して、i-am-an-id の id を持つ要素のみをターゲットにします。

#i-am-an-id {
font-family: helvetica;
}

CSS プロパティ

テキストのプロパティ

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

背景のプロパティ

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

間隔のプロパティ

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

height:要素の高さを設定します。
width:要素の幅を設定します。
padding:要素のパディング空白を設定します。
margin:要素の余白を設定します

長さと単位

px:ピクセル (1px = 1/96インチ)
em:要素の font-size に対する相対値 (3em = 現在のフォントの3倍)
vw:ビューポートの幅の1%に相対する
vh:ビューポートの高さの1%に相対する
%:親要素との相対値

Chrome 開発ツールを使った要素の検索

Chrome DevTools は、Google Chrome ブラウザーに直接組み込まれた Web 開発ツールのセットです。これらのツールを使用して、任意の Web サイトで HTML 要素と既存の CSS スタイルをすばやく見つけることができます。

1. DevToolsにアクセスするには、ページを右クリックして "Inspect"を選択してください。または、Command+Option+C(Mac)またはControl+Shift+C(Windows、Linux、Chrome OS)などのショートカットキーを使用してください。
2. 開発ツールパネルを開いたら、ページの上部にある「Inspect」ツールを選択します。

3. その後、スタイルを適用するページの要素をクリックすることができます。この要素をカスタマイズするために使用できるセレクタは、エレメントタブの下にハイライトされます。下のスタイルタブには、その要素に現在適用されている CSS スタイルルールが表示されます。

4. この例では、DevTools インスペクタを使用して見つけた "nav-link" クラスを利用して、ナビゲーションリンクの色を #6b646b に変更します。また、 "!important" プロパティをこの構文の最後に入れることで、この要素に適用されている既存のスタイリングをすべて上書きします。

5. CSS が更新され、変更が保存されたら。ナビゲーションテキストの色が#6b646bに変わったことがわかります。

サードパーティ製のフォントの追加

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

サードパーティー製のフォントを2つの方法で追加できます。

URLのコピーと貼り付け

最初のオプションは、選択したフォントライブラリーに移動し、Brandguide に追加するフォントを選択し、URL をコピー&ペーストすることです。このプロセスは以下の通りです。

構文

以下の構文をコピーして、BrandguideのカスタムCSSセクションに追加できます。フォントのインポートに必要な CSS はこれだけです。別のフォントをインポートするには、フォントファミリー、ソース URL、および形式を、選択したフォントのものに変更するだけです。

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

フォント URL とフォーマットの検索:

1. 選択したフォントライブラリに移動し、ブランドガイドに追加するフォントを選択します。この場合、Google Fontsから "Satisfy" を選択します。

2. 選択したら、@import URL をコピーして新しいブラウザタブに貼り付ける必要があります。

3. これにより、フォントをBrandguideにインポートするために必要なURLとフォーマットを含むページが表示されます。

4. src URL をコピーして、font-family と一緒に @fontface コードに貼り付けます。次に、CSSボックスにコードを貼り付けます。変更は自動的に更新されます。

5. [CSSを更新] を選択して変更を保存します。

6. 新しくインポートされたフォントは、グローバル設定の「Default Typeface」ドロップダウンに表示されます。

フォントを WOFF または WOFF2 フォーマットに変換する

2番目の書体オプションは、フォントを woff または woff2 形式に変換することです。これは、TTF/otf テキストファイル形式よりも、ブラウザーに対応したウェブフォント形式です。このプロセスは以下の通りです。

独自フォント

1. フォントをwoff または woff2 形式に変換します。. これは、TTF/otf テキストファイル形式よりも、ブラウザーに対応したウェブフォント形式です。

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

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

4. グローバル設定モジュールを開きます。以下の構文をコピーして、グローバル設定のCSSセクションに追加してください。フォントのインポートに必要な CSS はこれだけです。別のフォントをインポートするには、font-family、ソース URL、および形式を、選択したフォントのものに変更するだけです。構文を入力すると、変更が保存されます。

@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}

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

p {
font-family: 'boldweb';
color: #333;
}

動画を追加する

以下の手順に従って、Brandguide に動画を追加できます。

動画のアセット詳細ページを開きます。
埋め込みタブ に移動します。
動画埋め込みコード欄に行き、リンクをコピーするを選択します。
HTMLブロックにコードを貼り付けます。