行ブロックとスタックブロックは、複数のブロックを1行 (またはスタックブロックの場合はカラム) に挿入し、それらを均等に配置できるデザインブロックタイプです。行またはスタックブロックを使用して区切りを作成したり、カラムに含まれているかのように同じライン上にさまざまな要素を追加したりできます。
このガイド内
行ブロックを追加するには、「+」ブロック挿入アイコンをクリックし、行ブロックの場合は 行で検索し、スタックブロックの場合はスタックで検索します。これをクリックしてブロックを投稿または固定ページに追加します。
💡
キーボードを使用して、新しいラインに /row と入力して Enter キーを押すことで、新しい行ブロックを追加したり、/stack と入力して新しいスタックブロックを追加したりすることもできます。
ブロックを追加する手順についてはこちらを参照してください。
ブロックをクリックすると次のオプションのツールバーが表示されます。
行ブロックのツールバーには次のオプションがあります。
- ブロックタイプまたはスタイルを変更する。
- ブロックをドラッグする。
- ブロックを上下に移動する。
- アイテムの行端設定を変更: 左、中央、右、アイテム間のスペース。
- 配置を変更: なし、幅広、全幅。
- その他のオプション。
スタックブロックのツールバーには次のオプションがあります。
- ブロックタイプまたはスタイルを変更する。
- ブロックをドラッグする。
- ブロックを上下に移動する。
- アイテムの行端設定を変更: 左、中央、右
- 配置を変更: なし、幅広、全幅。
- その他のオプション。
📌
ブロックの幅を幅広または全幅に変更するオプションが表示されず、お使いのテーマでこれらのオプションがサポートされている場合は、ブロックがグループブロックに追加されている可能性があります。グループブロックの詳細についてはこちらを参照してください。
ブロックを選択すると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の 「設定」アイコンをクリックして設定を表示させます。このアイコンは、幅の異なる2つの列から成る正方形のアイコンです。
行ブロックはグループブロックまたはスタックブロックに変換できます。スタックブロックは、グループブロックまたは行ブロックに変換できます。
「レイアウト」セクションでは、行ブロックまたはスタックブロックの行端設定を設定できます。左、中央、右、両端揃えから選択して、行の配置を設定します。「方向」オプションを使用すると、行からスタックに切り替えることができます。
スタックブロックには、コンテンツを両端揃えに設定するオプションは含まれません。このオプションは行を均等に配置する方法として行ブロックに表示されます。
また、コンテンツの複数ラインへの折り返しをオンまたはオフに切り替えることができます。
「位置」セクションでは、「デフォルト」と「先頭固定表示」を選択できます。
- デフォルト: スクロールしてブロックを通り過ぎると、ページの他のセクションに移動するにつれ、そのブロックは見えなくなります。
- 先頭固定表示: スクロールしてブロックが元々あった位置を通り過ぎても、ブロックは固定されページ上に表示されたままになります。
高度な設定
高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。
ブロック設定サイドバーでスタイルアイコンをクリックし、ブロックのデザイン設定にアクセスします。スタイルアイコンは、半分が塗りつぶされた円の形をしています。
「色」セクションでは、行ブロックまたはスタックブロックのテキスト、背景、リンクの色を変更できます。
「色」セクションの3つのドットをクリックして、リンクを変更するオプションを追加します。
テキストとリンク: チェックのエリアをクリックしてカスタムカラーを選択するか、下の「テーマ」または「デフォルト」セクションで事前に選択された色から選択できます。
背景には、テキスト (上記) と同様の色設定に加え、無地またはグラデーション (2色以上の色を混ぜて、一定のパターン (薄い色から濃い色に変化するパターン、または1つの色が他の色に溶け込むようなパターン) で表示されること) から選択できます。
以下の設定で、ブロックのテキストの外観を調整します。
設定が表示されていない場合は、「タイポグラフィ」の右側にある3つの点をクリックします (右図)。 その後、以下のアクセスするオプションを選択できます。
- フォントサイズ
- フォントファミリー
- 外観
- 行の高さ
- 装飾
- 大文字/小文字
- 文字間隔
「フォントサイズ」ではテキストのサイズを調整できます。S サイズ、M サイズ、L サイズなど、プリセットされたサイズから選択できます。
また、以下のスクリーンショットで「1」と表示されているデフォルトの選択項目の真上にあるスライダーアイコンをクリックすると、具体的な値を設定できます。以下のスクリーンショットの「2」をクリックすると、単位を変更することができます。選択肢はemまたはremのピクセルです。
フォントファミリーは、使用するフォントスタイルを変更するオプションです。ドロップダウンメニューでフォントの一覧から選択します。
「外観」では、通常とイタリックの間、細字から極太の範囲で文字のスタイルを変更できます。
「行の高さ」では、テキストの上下の間隔を設定します。0を選択する場合は、モバイル端末でサイトを確認してください。
「装飾」には、下線と打ち消し線のオプションがあります。
「大文字小文字」ではすべて大文字、先頭文字のみ大文字、すべて小文字のいずれかにテキストを設定できます。
「文字間隔」では、テキストの文字間隔を設定します。単位は、デフォルト (ピクセル) から、パーセント、em、rem、vw、vhに変更できます。相対単位の詳細についてはこちらをご覧ください。
サイズではパディング (行ブロックの要素の周囲のスペース) を設定できます。このオプションは、背景色を使用する場合に特に関係があります。
パディングでは、「パディング」下のフィールドに値を追加すると、4辺すべてにその値を適用できます。
または、各辺に個別のパディングの値を設定することもできます。リンクアイコンをクリックすると、パディングを各側に個別に追加できるオプションが表示されます。こちらの図は、時計回りに、上、右、下、左を示しています。前の画像に表示された青いリンクアイコンをクリックすると、この表示にアクセスできます。
スタックブロックではサイズを設定するオプションはありません。これはブロック内にブロックがスタックされ、個々のブロックから、またはスペーサーブロックを使用してサイズを設定できるためです。
枠線の設定を使用して、コンテンツの周りに枠線を追加します。色、サイズ、サイズ単位 (px、%、em、rem、vw、vh) を選択できます。
デフォルトでは、これらの設定は4面すべての罫線を制御します。上、右、下、左側に特定の調整を加えるには、リンクアイコンをクリックします。
「半径」を使用すると、画像の枠線に丸みを付けることができます。半径を0に設定すると、画像の角が直角になります。
📌
クラシックテーマを使用している場合、「枠線」と「半径」の設定がサイトに表示されない場合があります。画像の枠線をカスタマイズする機能など、新しいサイトエディターのテーマをぜひお試しください。
まず、行ブロックに追加するブロックを選択します。複数のブロックを選択するには、クリックしてドラッグするか、「Shift」キーを押しながら各ブロックをクリックします (ブロックは互いに隣接している必要があります)。
ブロックツールバーが表示されます。ツールバーから行アイコンまたはスタックアイコンを選択します。下の画像では行ブロックアイコンをポイントしており、すぐ右のアイコンはスタックブロックアイコンです。
個々のブロックの配置を変更するには、既存のブロックのグループを解除する必要がある場合があります。
- エディター上部の「リスト表示」をクリックし、行ブロックまたはスタックブロックを選択します。
- ブロックツールバーの「その他」オプションアイコンをクリックします。
- 「グループ解除」オプションを選択します。
日本語サポート 
コメントを投稿するにはログインしてください。