機能を追加するBricの配置方法
Math Renderer，Code Highlighter，Language Switcherは，ページに機能を追加するBricです。このページでは，これらのBricを専用のBlocにまとめ，そのBlocの余白をなくして配置する方法を説明します。例としてMath Rendererを置き，続けて同じBlocにCode Highlighterを追加します。数式やコードを書く本文は，別のBlocに配置します。
スクリーンショットはBlocs 6 for Macの英語UIで撮影しています。画像内の枠は操作対象を示します。画像をクリックすると，大きな画像を開けます。対象のBricは，あらかじめインストールしておいてください。
使う範囲を決める
最初に，そのBricを現在のページだけで使うか，サイトの全ページで使うかを決めます。
| 使用範囲 | Blocを置く領域 | 管理用のIDの例 |
|---|---|---|
| 現在のページだけ | 中央のDynamic Area（通常の本文領域） | extension |
| 全ページ共通 | 上側または下側のGlobal Area | global-extension |
Language Switcherはサイト全体で使うため，Global Areaへの配置を基本とします。Math RendererとCode Highlighterは，使用するページに応じて配置先を選びます。同じ範囲で使う複数のBricは，一つの専用Blocにまとめます。
extensionとglobal-extensionは，Blocを見つけやすくするためのID名です。この名前を付けるだけで使用範囲が変わるわけではありません。全ページ共通になるのは，BlocをGlobal Areaに配置したためです。そのGlobal Areaをページ設定で無効にしたページは，共有の対象から外れます。Blocs公式のGlobal Areasの説明も参照してください。
1. 専用のBlocを作る
このページだけで使う場合
通常の本文領域にある「＋」をクリックします。既存のBlocがある場合は，その前後に表示される「＋」を使います。空のサイトから始める場合は，キャンバス中央の「＋」から最初のBlocを追加できます。
Figure 1: 青い境界線の内側にある白い本文領域の「＋」から，ページ内用のBlocを追加します。
全ページで共通して使う場合
青い境界線の外側にあるGlobal Areaの「＋」をクリックします。図は下側のGlobal Areaです。境界線の［Content below this line will show on every page.］という案内で，この線より下の内容が全ページに共通して表示されることを確認できます。追加する領域を選んだあとは，通常の本文領域と同じ手順です。
Figure 2: 境界線の案内を確認し，下側のGlobal Areaの「＋」から，全ページ共通のBlocを追加します。
1カラムの構造を選ぶ
Blocのライブラリーが開いたら，［Structure 1 Column］を選びます。これは，Bricを入れるColumnが一つある，基本的なBlocです。
Figure 3: ［Structure 1 Column］を選び，Bricをまとめて入れる場所を作ります。
追加したBlocを選択し，右側の［ID］にextensionを入力します。Global Areaに置いた場合は，global-extensionとします。以下の画面は，ページ内用のextensionを例にしています。
2. XSでPaddingをNoneにする
機能追加用のBricを収めたBlocが，公開ページに不要な上下の空白を作らないよう，PaddingをNoneにします。Math RendererとCode Highlighterの編集画面用ラベルは書き出し時に取り除かれますが，親のBlocのPaddingまでなくなるわけではありません。たとえば上下にそれぞれ100pxのPaddingがあれば，表示する内容がなくても，合計200pxの空白が生じます。
XSに切り替える
専用Blocを選択したまま，⌘4を押します。画面上部の表示が［XS］に変わります。
XSは最も小さい画面幅のブレークポイントです。新しく作ったBlocでは，XSで設定したPaddingが，より大きいブレークポイントにも引き継がれます。そのため，最初にXSで設定してからデスクトップ表示に戻すと，全画面幅で余白をなくせます。
Figure 4: ⌘4でXSに切り替えた状態です。Paddingは，まだ［Large - 100px］になっています。
Paddingを変更する
右側の設定パネルで［Padding］のメニューを開き，［None］を選びます。BricやColumnの余白ではなく，専用BlocのPaddingを変更します。選びにくいときは，左のレイヤーツリーで親のBlocを選択してください。
Figure 5: 専用Blocの［Padding］を［None］に変更します。
Blocの上下の余白がなくなります。灰色の大きな領域は，空のColumnを編集するための仮表示です。ここには，あとでBricを配置します。
Figure 6: XSでPaddingをNoneにすると，Columnの上下にあった余白がなくなります。
デスクトップ表示に戻す
⌘1を押して［LG］に戻します。Paddingが［None］のままであることを確認します。この撮影環境では，MD・SMでもNoneになっていることを確認しています。
Figure 7: ⌘1でLGへ戻した状態です。デスクトップ表示でも，PaddingはNoneのままです。
すでに別の画面幅でPaddingを個別に変更してあるBlocを使う場合は，各ブレークポイントでもNoneになっているか確認してください。Paddingの操作については，Blocs公式のBloc Paddingの説明も参照できます。
3. 最初のBricを置く
専用Bloc内のColumnを選び，中央に表示されるBric追加用の「＋」をクリックします。Blocを増やす大きな「＋」とは別の，小さなBricアイコン付きのボタンです。
Figure 8: 空のColumnの中央にあるBric追加ボタンをクリックします。
Bricのライブラリーで［Math Renderer］を選びます。見つからない場合は，検索欄に名前を入力してください。
Figure 9: ［Math Renderer］を選び，専用BlocのColumnに配置します。
4. 同じBlocに別のBricを追加する
Math Rendererを選択し，その下に表示されるBric追加用の「＋」をクリックします。新しいBlocを作らず，同じColumnに次のBricを追加します。
Figure 10: Math Rendererの下のBric追加ボタンから，同じBlocへの追加を続けます。
Bricのライブラリーで［Code Highlighter］を選びます。
Figure 11: ［Code Highlighter］を選びます。
左のレイヤーツリーで，Math RendererとCode Highlighterが同じBlocの同じColumn内に並んでいれば，配置は完了です。Global Areaに専用Blocを作った場合も，追加の方法は同じです。
Figure 12: 同じColumnに，Math RendererとCode Highlighterがまとまっています。
5. 本文は別のBlocに置く
数式やコードを入力するParagraphは，専用Blocとは別の本文用Blocに置きます。図の例では，extensionの上に本文用のBlocを作り，そのColumnにParagraphを配置しています。
Figure 13: 上が本文用のParagraph，下がMath RendererとCode Highlighterをまとめた専用Blocです。本文は仮のテキストです。
あとは本文のParagraphに数式やコードを入力し，各Bricの使い方に従ってプレビューします。編集画面の青い［Math Renderer］［Code Highlighter］は配置を管理するための表示であり，その場所に数式やコードの本文を入力するわけではありません。
Language Switcherも，専用Blocにまとめる手順は同じです。サイト全体で使う場合はGlobal Areaに配置し，そのBric固有の言語設定や切り替え対象の設定を行ってください。
Math RendererとCode Highlighterの入力例や設定は，それぞれの紹介と使い方・コード表示の説明を参照してください。Gallery Proは写真を表示する位置，Navbar Proはヘッダーとして配置するため，この専用Blocへの共通配置の対象にはしていません。