この記事では、Brandguide で利用できるさまざまな種類のブロックについて説明します。
ページ
ブランドガイドの最高組織レベル。ページを合計するとブランドガイドが作成されます。
ページの追加
- サイドバーの「ページ」オプションに移動します。
- 選択してくださいページ追加ボタン。
- ページに名前を付け、スラッグを設定します。
- 選択、保存してページを作成。
ページの削除
ページとセクションのフライアウトで、削除するページの横にあるゴミ箱アイコンを選択します。ページを削除すると、その操作を元に戻すことはできず、ページ内に格納されているブロックやセクションを復元することはできません。
セクション
セクションは、ページ内にネストされ、ブロックで構成されるブランドガイドの組織レベルです。
Brandguide では、固定ナビゲーション バーとページ セクションの折りたたみオプションが自動的にオンになります。これらは、下部にある「ページとセクション」設定内で調整できます。
Blocks
ブロックはセクション内にネストされます。左側のブロック フライアウトでブロックを見つけることができます。ブロックは、キャンバス領域にコンテンツとして存在する画像、テキスト、色、コードなどの Brandguide コンポーネントです。
ブロックの追加
- に移動左側のサイドバーを選択し、ブロックオプション。
- これにより、画像、テキスト、コード、カラー ブロック オプションを含むフライアウトが生成されます。追加できるコンテンツは点線で囲まれます。
- ブロックを選択してキャンバスにドラッグしますエリア。紫色の線キャンバス上に承認されたドロップゾーンを示します。
- クリックを離すブロックをキャンバスにドロップします。
ブロックの削除
- 選択してくださいゴミ箱アイコンブロックの上。ブロックを削除すると、回復することはできません。
ブロックの並べ替え
次の 2 つのオプションがあります。
- ドラッグアンドドロップブロックはページ上の別の場所にあります。
- 使用矢印ブロックコンテンツの右側にある をクリックすると、ブロックがページ内で上下に移動します。
画像ブロック
画像ブロックを使用すると、 BrandfolderコンテンツをBrandguide にシームレスに追加できます。つまり、 Brandfolderでアセットが更新されると、 Brandguide でもアセットが自動的に更新されます。このエクスペリエンスを実現するのが CDN です。ブランドの一貫性を促進するため、外部画像を Brandguide に直接アップロードすることはできません。
サポートされている画像タイプ
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- ウェブP
- MP4
- Microsoft Word 文書
- Microsoft PowerPoint 資料
- Microsoft Excel ファイル
画像の追加
- 選択してください画像アイコン左側のフライアウトにあります。
- Brandfolderエクスペリエンスを備えた別のフライアウトが表示されます。ブランドガイドに関連付けられたBrandfolderまたはコレクションがデフォルトで表示されます。
- 別のBrandfolderまたはコレクションを選択するには、黒い矢印フライアウトの上部にあります。
- 使用する画像を見つけて、次のいずれかの方法で追加します。
- ドラッグアンドドロップ画像をキャンバスに描きます。
- 画像の上にマウスを移動し、省略記号メニューを選択して、 [+] 場所。
- 画像の上にマウスを移動し、省略記号を選択して詳細を表示を選択し、次に[+]場所を選択します。
- 画像の上にマウスを移動し、省略記号を選択して詳細を表示を選択し、ドラッグアンドドロップ画像。
画像サイズの変更
- ホバー画像の上に省略記号を選択。
- 詳細の表示を選択します。
- 開く配置オプション。
- 画像の幅と高さを変更します。
- 場所を選択。
現時点ではこれが画像サイズを操作する唯一の方法です。
テキストブロック
ブランドガイドにテキストを追加するには、テキスト ブロックをキャンバスにドラッグ アンド ドロップします。
テキストスタイルの変更
テキスト スタイルをグローバル設定レベルで変更すると、Brandguide レベルのすべてに影響します。ブロック レベルで変更すると、その特定のブロックにのみ影響します。
デフォルトテキスト
- 設定に移動します。
- テキストカラーボックスに 16 進コードを入力します。
これは、テキスト ブロックを含むページ上のすべてのテキストに影響します。
ブロックレベルテキスト
- テキストブロックの上にマウスを置きます。
- WYSIWYG エディターが表示され、フォント、サイズ、テキストの色、書式を変更したり、テキストに箇条書きやリンクを追加したりできます。
- ここで行われた変更は、選択したブロックにのみ影響します。
タイポグラフィ
現在、ユーザーはBrandfolder のフォントを Brandguide にアップロードまたは同期します。ドロップダウンで使用できるフォントは、Google Web フォントから取得されます。上級ユーザーは、CSS を使用してサードパーティのフォントを追加できます。詳細については、 CSS を使用した Brandguide のカスタマイズに関する記事。Brandfolderサポート チームは、コードの構築についてはサポートできません。
コードブロック
コード ブロックは標準の HTML/CSS で動作します。このブロックの使用は、CSS に関する高度な知識がある場合にのみ推奨されます。カスタマー サポートは、Brandguide にコードを実装する際にサポートすることはできません。XSS 攻撃を防ぐために、すべてのコードがサニタイズされます。当社の開発者は、いつでも Brandguide コードに変更を加え、CSS や HTML に影響を及ぼす可能性があることに注意してください。
コードブロックの編集
ページに HTML/CSS ブロックが追加されると、Brandguide にカスタム コードを追加できます。HTML はページ上の特定の場所に追加され、CSS はキャンバス上の指定された領域に適用されます。コードが完成したら、目のアイコンを選択変更内容を表示します。
CSS は、スタイルを最上位レベルで設定し、下位にカスケードさせるのがベスト プラクティスであるため、設定でグローバルに編集することもできます。
HTML を使用してビデオを追加する
フライアウト イメージ ブロックは、ビデオコンテンツブロックの追加をサポートしていません。ただし、ビデオ埋め込みコードを使用すると、カスタム HTML とBrandfolderのビデオ アセットを介してビデオを追加できます。Customer support cannot help you when implementing your code into Brandguide.
- ビデオのアセットモーダルを開きます。
- に移動埋め込みタブ。
- ビデオ埋め込みコードを見つけて選択リンクをコピー。
- コードを HTML ブロックに貼り付けます。
コードブロックのサニタイズ
一部のコードとその中の要素は、XSS 攻撃に対するセキュリティ上の目的でサニタイズされます。
Javascriptは許可されていません。
コードブロックの削除
コード ブロックを削除すると、ブロックとブロック内に記述されたすべてのコードが削除されます。グローバル設定レベルで記述された CSS は、設定フライアウトで編集しない限りそのまま残ります。
コードブロックの移動
HTML と CSS を記述した後にコード ブロックを移動すると、ブロックが壊れたり、コードの意図した効果が失われる可能性があります。最良の結果を得るには、ブロックの位置を設定した後にコードを記述します。
カラーブロック
ブランドガイドにカラーブロックを追加するには、色をキャンバスにドラッグ アンド ドロップします。
色のソース
カラー ブロックは、ブランド ガイドに関連付けられたBrandfolderまたはコレクションから取得されます。ブランドガイドに色が表示されない場合は、Brandfolderまたはコレクションに色が追加されていません。色を追加するには、 Brandfolderにアセットとして追加します。
色の同期
Brandfolderレベルで色を変更すると、その変更は Brandguide 内にも自動的に反映されます。Brandfolderで変更が行われ、その違いがBrandguideに反映されていない場合は、円形同期ボタンカラーフライアウトの右上にあります。
カラーモード
フライアウトとキャンバスの両方に表示されるカラー モードを変更できます。
- 選択してください設定アイコンカラーフライアウトの右上隅にあります。
- 選択してくださいチェックボックスHEX、RGB、CMYKを表示し、保存。
- 色の値の横にコピー アイコンが表示されます。