WordPressではカラム(列)ブロックを利用することでを並べた横並びのコンテンツを作ることができます。
本記事では、WordPressブロックエディターにおけるカラムブロックの使い方を解説していきます。
■【WordPressカラムブロック】横並び・カラムブロックの使い方(動画解説版)
もくじ
(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
(関連記事)ブロックエディターの使い方について
本記事では、カラムブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。
カラムブロックの基本的な使い方
カラムブロックの概念
カラムブロックは、ブロックを横並びで表示するためのブロックです。カラムブロックの各列にそれぞれ画像や段落など任意のブロックを挿入することができます。
外側のブロックと内側のブロックから構成されます。外側ブロックは列数などの設定、内側ブロックは横幅%など設定できる項目がそれぞれ違います。
まずは、カラムブロックを挿入してみましょう。投稿または固定ページ編集画面を開き、「＋」ボタンを押して「ギャラリー」を選択、自分の好きな画像を選択します。
カラムブロックの基本的な使い方
デザイン＞カラムを選択すると、2列や3列などの横並びのブロックを挿入することができます。カラムは後から比率を変えたり列数を変えたたりすることもできます。
■表示例（PCでは横並びでスマホの場合は縦に並びます）
カラムブロックの使い方は簡単で、「＋」ボタンを押下してカラムブロックを選択します。
カラム(列数)のデザインを選択します。列数や横幅比率は後から変更できます。
カラムブロック が追加されました。「＋」から画像や見出し・段落など任意のブロックを追加していくことができます。
カラムブロックでできる基本機能は下記の通りです
- (外側カラムでできる設定)カラム列数の選択
- (内側カラムでできる設定)カラムの横幅の設定
- (外側及び内側カラムでできる設定)カラムの配置変更
挿入しようとするブロックの位置に注意
カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入されないということもでてきます。
■複数の＋がある場合にブロック挿入位置が変わることに注意
左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます(次で詳しく説明)
カラム列数の変更(外側カラムでできる設定)
外側のカラムを選択した状態で、右メニューバーのカラムの列の設定で、何列にするか設定することができます。
好きな列数・幅を選択します(あとから変更可能です)
カラム幅の変更(内側カラムでできる設定)
内側のカラムを選択した状態で、右メニューバーのカラムの列の設定でから、何列にするか設定することができます。
■カラムー配置変更の例
カラムの垂直方向の位置調整(外側・内側カラムでできる設定)
外側カラムまたは内側カラムを選択した状態で、カラムブロックの上に表示されるツールバーの配置アイコンを押下するとカラムの垂直方向の配置を設定することができます。
■カラムー配置変更の例
ブロックを選択しにくい時はブロックナビゲーションが便利
カラムブロックの中にブロックを入れたり、いくつもブロックを組み合わせていくと、対象のブロックをうまく選択できない場合があります。
その場合は、ブロックナビゲーションが便利です。
対象のブロック近くのブロックを選択してから、ブロックナビゲーションを選択すると、ブロックの階層構造を表示でき、選択したいブロックを選ぶことが便利です。また、左下に現在選択されているブロックがぱんくずリスト形式で表示されているのでそこから対象のブロックを選択することもできます。
■ブロックナビゲーションを活用して複雑なブロックからピンポイントで対象ブロックを選択する
まとめ
まとめです。今回は、WordPressのブロックエディターにおけるカラムブロックの使い方を解説しました。
自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
ブロックを利用することでを並べた横並びのコンテンツを作ることができます。 本記事では、WordPressブロックエディターにおけるカラムブロックの使い方を解説していき){kind=link}