Title: カラムブロック
Author: Dion Hulse
Published: 2019年3月7日
Last modified: 2024年10月5日

---

## カテゴリー

 * [はじめに](https://ja.wordpress.org/support/category/getting-started/)
 * [インストール](https://ja.wordpress.org/support/category/installation/)
 * [基本的な使い方](https://ja.wordpress.org/support/category/basic-usage/)
 * [基本的な管理](https://ja.wordpress.org/support/category/basic-administration/)
 * [カスタマイズ](https://ja.wordpress.org/support/category/customizing/)
 * [メンテナンス](https://ja.wordpress.org/support/category/maintenance/)
 * [セキュリティ](https://ja.wordpress.org/support/category/security/)
 * [高度なトピック](https://ja.wordpress.org/support/category/advanced-topics/)
 * [トラブルシューティング](https://ja.wordpress.org/support/category/troubleshooting/)

## 翻訳・改善にご協力ください

 ドキュメンテーションを現在[英語版](https://wordpress.org/support/)から翻訳中です。
どなたでも[ご協力いただけます](https://ja.wordpress.org/team/2019/08/06/359/)。

 誤字や間違った情報にお気づきの方は、各記事の下にあるフィードバックセクションから
お知らせください。

# カラムブロック

[**ブロック一覧**へ戻る](https://ja.wordpress.org/support/article/blocks/?output_format=md)

**カラムブロック**を使用すると、テキスト、メディア、その他の種類のコンテンツを最大
3カラムまで挿入できます。連続して使用すると、カラムはグリッド効果を生み出します。

空のブロックへ `/columns` (または `/カラム`)と入力して Enter キーを押す方法でも、
簡単に追加できます。

![](https://wordpress.org/support/files/2020/12/Screenshot-1.png)

_ブロック追加の詳しい方法は[こちら](https://ja.wordpress.org/support/article/adding-a-new-block/?output_format=md)
をご覧ください。_

**カラムブロック**を追加した後、最初のパターンを選びます(カラム数を変えたり、後から
カラムを追加したりできます)。デフォルトのパターン(50 / 50)で良ければ**スキップ**
オプションをクリックします。

![](https://wordpress.org/support/files/2020/12/Screenshot-2.png)

**カラムブロックの編集**

カラムを追加または削除できます。追加するには、ボックスとサイドバーの間(ボックスの
外側)をクリックしてから、**カラムを追加**アイコンをクリックします。または、**カラム
ブロック**のサイドバーの_ブロック設定_にある_カラム_パネルを使って、カラム数を変更
します(最大6カラム)。

**コンテンツの追加**

カラム数を定義したら、各カラムにコンテンツを追加します。**カラムブロック**の優れ
た点は、各カラムに他のブロックを追加できることです。

例えば、**カラムブロック**を構造として使用し、_画像ブロック_、_見出しブロック_、_
段落ブロック_を追加してサービスのグリッドを作成できます。

![](https://wordpress.org/support/files/2020/08/Screenshot-6.png)

または、**カラムブロック**と**カバーブロック**を使用して、サイトの機能ページを作成
できます。

![](https://wordpress.org/support/files/2020/08/Screenshot-7.png)

また、**カラムブロック**と**ボタンブロック**を使用して、サイトで何らかの操作をする
ようユーザーを促すこともできます。

![](https://wordpress.org/support/files/2020/08/Screenshot-8.png)

ご存知のことと思いますが、可能性は無限にあります。こんなことができる、というのを
ご覧になってみませんか。ぜひ動画でご確認ください。

## ブロックツールバー

各ブロックにはそれ固有のツールバーアイコンとコントロールがあり、エディター内でブロック
を操作できます。

**カラムブロック**には標準で5個のボタンがあります。

 * 変換またはスタイル変更
 * 移動用ハンドル
 * 配置を変更
 * 垂直配置を変更
 * 他のオプション

![](https://wordpress.org/support/files/2020/08/222.png)

**変換またはスタイル変更**

![](https://ja.wordpress.org/support/files/2021/10/カラムブロックの変換オプション.
png)

_カラムブロック_は**グループ**、または入れ子になった**カラム**(一つのカラムに独立
した_カラムブロック_が入る)へ変換できます。**グループ**を使うと_カラムブロック_の
周囲の背景色を変更できます。

他に、_カラムブロック_のスタイルを**デフォルト**と**重ね合わせ**の2種類から選べます。**
重ね合わせ**を選ぶと、隣り合わせのカラムが少し重なって表示されます。

![](https://wordpress.org/support/files/2020/08/Untitled-2.png)

**カラムブロック**を**グループ**化して色の設定を表示したエディター画面

**移動用ハンドル**

![](https://wordpress.org/support/files/2020/08/Untitled-3.png)

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

_エディター内でブロックを移動する詳しい方法は[こちら](https://ja.wordpress.org/support/article/moving-blocks/?output_format=md)
をご覧ください。_

**配置を変更**

![](https://wordpress.org/support/files/2019/03/Screenshot-1.png)

 * **幅広** – ブロックの幅をコンテンツ幅に合わせます。
 * **全幅** – 画面の幅いっぱいまでブロックの幅を広げます。

**垂直配置を変更**

![](https://wordpress.org/support/files/2020/08/Screenshot-5.png)

カラムの垂直配置を指定できます。高さが異なるカラムが混在する場合に役立ちます。

 * **上揃え** – カラムブロックの上に揃えます。
 * **中央揃え** – カラムブロックの垂直方向の中央に揃えます。
 * **下揃え** – カラムブロックの下に揃えます。

**他のオプション**

![](https://wordpress.org/support/files/2020/08/342423.png)

**追加設定を表示(非表示)**

**追加設定を表示(非表示)**オプションを使うと、エディターのサイドバーにある_ブロック
設定_パネルを表示する(または隠す)ことができます。

**コピー**

**コピー**を使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付け
できます。

**複製**

**複製**を使うと、選択したブロックを複製できます。

**前に挿入**

新しいブロックを選択したブロックの前へ挿入します。

**後に挿入**

新しいブロックを選択したブロックの後へ挿入します。

**移動**

**移動**を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に
移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すと
ブロックがそこへ移動します。

**再利用ブロックに追加**

**再利用ブロックに追加**オプションを使うと、選択したブロックを再利用ブロックのリスト
へ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

**グループ化**

ブロックをまとめて一つの単位として扱いたい場合、**グループ化**オプションを選択し
ます。例えば共通の背景色や他のブロックをグループへ追加できます。

**ブロックを削除**

**ブロックを削除**オプションを使うと、選択したブロックをコンテンツから削除できます。

## ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディター
のサイドバーにあります。_もしサイドバーが見当たらなければ、公開(更新)ボタンの隣に
ある「歯車」ボタンをクリックしてください。_

[[

**カラムブロック**には他のブロックを埋め込む機能があるため、あるカラムをクリック
すると、そのカラムに追加したブロックに応じてサイドバーの設定が変わります。例えば、
あるカラムに画像を追加した後、その画像をクリックすると、サイドバーに**画像ブロック**
の設定オプションが表示されます。

**スタイル**

[[

 * **デフォルト** – カラムとカラムの間を少し開けます。
 * **重ね合わせ** – 隣り合わせのカラムを少し重ねて表示します。

**色**

[[

**テキスト色**オプションは、テキストの色を変更できます。

**背景色**オプションは、背景色を変更できます。また**単色**か**グラデーション**か
を選べます。_グラデーション_の場合、**線形**か**放射状**かを選べます。さらに_線形_
の場合は_角度_を指定します。

**カラム**

_カラムブロックの編集_セクションで説明したように、_ブロック設定_サイドバーでカラム
数を設定できます(最大6カラム)。

カラム数を編集するには、上下の矢印をクリックするか、スライダーを左右にドラッグする
か、フィールドに直接数字を入力します。

![](https://wordpress.org/support/files/2020/08/Screenshot-10.png)

**高度な設定**

サイドバーのブロック設定の_高度な設定_パネルには、**HTML アンカー**と**追加 CSS 
クラス**のオプションがあります。

[[

**HTML アンカー**は特定の_カラムブロック_に[ユニークな Web アドレス](https://ja.wordpress.org/support/article/page-jumps/?output_format=md)
を作ることができます。その後、ページ内の_カラムブロック_へ直接リンクできます。

**追加 CSS クラス**はブロックへ CSS クラスを追加できます。その後、カスタム CSS を
書いてブロックに好みのスタイルを付けることができます。[](https://ja.wordpress.org/support/wp-admin/post.php?post=11300589&action=edit)

#### **変更履歴 **

 * 更新: 2020-08-24
    - ページ先頭に「ブロック一覧へ戻る」を追加
 * 更新: 2020-08-21
    - WordPress 5.5のスクリーンショットと動画
    - ブロックツールバーの機能変更に対応
    - ブロック設定の機能変更に対応
 * 新規作成: 2019-03-07

[原文](https://wordpress.org/documentation/article/columns-block/)

## この記事は役に立ちましたか ? どうすればさらに改善できますか ?

フィードバックを送信するには[ログイン](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fja.wordpress.org%2Fsupport%2Farticle%2Fcolumns-block%2F&locale=ja)
する必要があります。