新しいブランドガイドへようこそ! この記事だけでなく、ブランドガイド手引きおよびCSSを使用したブランドガイドのカスタマイズをご覧いただくと、コンテンツを新しいBrandguide へ移行する方法を説明します。 既存のBrandguide の編集機能は 2023 年 9 月 1 日に廃止されます。 2023年12月1日には、旧来のBrandguide エディターが使用できなくなります。
この記事では、ページ、セクション、ブロックを使用してBrandguide を構築する方法を説明します。
ページ
ブランドガイドの構成の中の最上位レベル。 ブランドガイドは、ページの集大成です。
ページを追加する
- サイドバーのページオプションに移動します。
- Add Page リンク を選択します。
- ページに名前を付けて、URLを設定します。
- ページを保存して作成する.を選択します。
ページを削除する
ページとセクションモジュールを開き、削除したいページの横にあるゴミ箱アイコンを選択します。 ページを削除した場合、そのアクションは取り消せません。そして、ページ内にあったブロックとセクションも復元できません。
セクション
セクションは、Brandguide の組織レベルにあるページ内に設置され、ブロックによって構成されます。
ブロック
ブロックはセクション内に設定されます。 左側のモジュールから、ブロックを探すことができます。 ブロックは、Brandguide のキャンバスエリアにコンテンツとして配置したい画像、テキスト、色、コードなどを格納するコンポーネントです。
ブロックを追加する
- 左側のサイドバーに移動し、ブロックオプションを選択します。
- 画像、テキスト、コード、色のブロックオプションが表示されます。 追加できるコンテンツには点線で囲まれています。
- ブロックを選択し、キャンバス領域にドラッグします。 キャンバス上の紫色の線が、ブロック配置が可能なドロップ領域を示します。
- クリックを放して、ブロックをキャンバスにドロップします。
ブロックを削除する
- ブロックのゴミ箱アイコンを選択します。 注意：ブロックを削除すると、復元できません。
ブロックを並べ替える
いずれかの方法が可能です。
- ブロックをページのどこか別の場所にドラッグ＆ドロップします。
- ブロックの右側にある矢印を使用して、ページ内を上下に移動します。
画像ブロック
画像ブロックでは、ライブラリーのコンテンツをBrandguideへシームレスに追加できます。 これにより、アセットがライブラリー内で更新された場合、アセットもBrandguide上で自動的に更新されます。 この機能の裏側で、CDNリンクが働いているからです。 ブランドの一貫性を維持するために、ライブラリーに上がっていない画像を Brandguide に直接アップロードすることはできません。 そのため、画像は必ずライブラリーにアップロードしてください。
対応している画像ファイル形式
- APNG
- AVIF
- GIF
- JPEG
- PNG
- SVG
- WebP
画像を追加する
- 左側のモジュールからイメージ アイコンを選択します。
- ライブラリー情報とともに別のモジュールが表示されます。 Brandguideに関連付けられているライブラリー またはコレクションがデフォルトとして表示されます。
- 別のライブラリーまたはコレクションを選択するには、モジュールの上部にある黒い矢印を選択します。
- 使用したい画像を探し出し、以下のいずれかの方法で追加します:
- 画像をキャンバスにドラッグ＆ドロップします。
- 画像にカーソルを合わせて、右上の…メニューを選択し、[+] Place を選択します。
- 画像にカーソルを合わせて、右上の…メニューを選択し、view detials を選択してから、[+] Place を選択します。
- 画像にカーソルを合わせて、右上の…メニューを選択し、view detials を選択してから、画像をドラッグ＆ドロップします。
画像サイズを変更する
- 画像の上へへカーソルを合わせて、右上の…メニュー を選択します。
- view details を選択します。
- placement options を開きます。
- 画像の幅と高さを変更します。
- Place を選択します。
注意：現在、これが画像サイズを変更する唯一の方法です。
テキストブロック
Brandguide にテキストを追加するには、テキストブロックをキャンバスにドラッグ&ドロップします。
テキストスタイルを変更する
グローバル設定レベルでテキストスタイルを変更すると、Brandguide レベルのすべてに適用されます。 ブロックレベルで変更した場合は、特定のブロックにのみ適用されます。
デフォルトのテキスト
- 設定へ移動します。
- 16進コードをテキストカラーボックスに入力します。
この設定は、テキストブロックを含むページ上のすべてのテキストに適用されます。
ブロックレベルのテキスト
- テキストブロックの上にカーソルを合わせます。
- WYSIWYGエディターが表示され、フォント、サイズ、テキストの色、およびテキストへのリンクや行頭記号の追加などの書式を変更できます。
- ここで行われた書式の変更は、選択したブロックにのみ適用されます。
タイポグラフィーの設定
現時点では、 ライブラリーにアップロードされているフォントを Brandguide.で利用することができません。 フォントのドロップダウンから Google Webfonts から選択することができます。 上級ユーザーであれば、CSSを使うことで、サードパーティのフォントを追加できます。 詳細については、 CSS でBrandguide カスタマイズする の記事を参照してください。 ライブラリーのサポートチームは、お客様のコードを使った構築を支援することはできません。
カラーブロック
コードブロック
コードブロックでは標準の HTML / CSS コードが利用できます。 CSS の高度な知識がある場合にのみ、このブロックを使用することを推奨します。 Brandguideに独自のコードを実装した場合、カスタマーサポートではサポートをすることができません。 コードはXSS攻撃を防ぐためにサニタイズ処理されます。
コードブロックを編集する
HTML/CSS ブロックをページに追加すると、Brandguide にカスタムコードを追加できます。 HTML はページ内の特定の場所に追加され、CSS は指定されたキャンバスの領域内に適用されます。 コード入力が終わったら、目のアイコンを選択して変更を表示します。
CSS は設定からBrandguide全般に対して編集することもできます。 そのスタイルを一番上に設定することで、全体に適用させることができます。
HTMLを使ってビデオを追加する
画像ブロックモジュールでは、動画ブロックの追加をすることができません。 しかし、ビデオ埋め込みコードを使用すれば、ライブラリーから、カスタムHTMLとビデオアセットを介してビデオを追加することができます。（こちらはCDNリンクを有効にしているお客様のみ利用できます） Brandguideに独自のコードを実装した場合、カスタマーサポートではサポートをすることができません。
- 動画のアセット詳細ページを開きます。
- 埋め込みタブ に移動します。
- 動画埋め込みコード欄に行き、リンクをコピーするを選択します。
- HTMLブロックにコードを貼り付けます。
コードブロックをサニタイズする
コードと要素の一部は、XSS 攻撃に対するセキュリティのためにサニタイズされます。
コードブロックを削除する
コードブロックを削除すると、ブロック内に書かれたすべてのコードが削除されます。 グローバル設定レベルで記述された CSS は、設定が変更されない限りそのまま残ります。
コードブロックを移動する
HTML と CSS が書かれた後にコードブロックを動かすと、ブロックやコードに意図されたデザインが正しく適用されない可能性があります。 最良の結果を得るには、ブロックの位置を決定した後にコードを書いてください。
Brandguide にカラーブロックを追加するには、キャンバスにカラーをドラッグ&ドロップします。
カラー ソース
カラーブロックは、Brandguideと紐づいたライブラリーまたはコレクションにあるカラーアセットを参照します。 Brandguideに色が表示されない場合は、ライブラリーまたはコレクションに色指定アセットがないことを意味します。 色を追加するには、ライブラリーにアセットとして追加します。
色を同期する
ライブラリ―レベルで色を変更すると、Brandguide内でも自動的に変更が反映されます。 ライブラリ―で変更が行われ、Brandguideにその変更が反映されない場合は、カラーモジュールの右上にある円形同期ボタンを選択することで、手動で同期できます。
カラーモード
モジュールとキャンバスの両方で表示するカラーモードを変更できます。
- カラーモジュールの右上隅にある設定アイコンを選択します。
- チェックボックスを選択し、HEX、RGB、CMYKを表示させてから保存を選択します。
- カラー値の横にコピーアイコンが表示されます。