WordPress 横並び・カラムブロックの使い方・作り方

WordPress

【WordPressカラムブロックの使い方・横並びの作り方】

WordPressではカラム(列)ブロックを利用することでを並べた横並びのコンテンツを作ることができます。

本記事では、WordPressブロックエディターにおけるカラムブロックの使い方を解説していきます。
 

■【WordPressカラムブロック】横並び・カラムブロックの使い方(動画解説版)


 


 
(※)本記事では、WordPress5.6、無料テーマLightningを利用した環境で説明しています。
 

(関連記事)ブロックエディターの使い方について

本記事では、カラムブロックの使い方に絞って説明していますが、エディターの使い方全体を勉強したい方は「【徹底解説】WordPressブロックエディターの使い方」を合わせてご参照ください。

 

カラムブロックの基本的な使い方

カラムブロックの概念

カラムブロック の概念

カラムブロックは、ブロックを横並びで表示するためのブロックです。カラムブロックの各列にそれぞれ画像や段落など任意のブロックを挿入することができます。

外側のブロックと内側のブロックから構成されます。外側ブロックは列数などの設定、内側ブロックは横幅%など設定できる項目がそれぞれ違います。
 

まずは、カラムブロックを挿入してみましょう。投稿または固定ページ編集画面を開き、「+」ボタンを押して「ギャラリー」を選択、自分の好きな画像を選択します。

カラムブロックの基本的な使い方

デザイン>カラムを選択すると、2列や3列などの横並びのブロックを挿入することができます。カラムは後から比率を変えたり列数を変えたたりすることもできます。
 


 

■表示例(PCでは横並びでスマホの場合は縦に並びます)


 

今まで横並び表示するのは難しかったので、これは便利な機能ですね!!

 

カラムブロックの使い方は簡単で、「+」ボタンを押下してカラムブロックを選択します。
カラムブロック の選択
 

カラム(列数)のデザインを選択します。列数や横幅比率は後から変更できます。
カラム(列数)の選択
 

カラムブロック が追加されました。「+」から画像や見出し・段落など任意のブロックを追加していくことができます。
カラムブロック が追加されました。
 

カラムブロックでできる基本機能は下記の通りです

■カラムブロックでできること

  • (外側カラムでできる設定)カラム列数の選択
  • (内側カラムでできる設定)カラムの横幅の設定
  • (外側及び内側カラムでできる設定)カラムの配置変更

 

挿入しようとするブロックの位置に注意

カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入されないということもでてきます。
 

■複数の+がある場合にブロック挿入位置が変わることに注意


 

左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます(次で詳しく説明)
挿入しようとしているブロックの位置に注意
 

カラム列数の変更(外側カラムでできる設定)

外側のカラムを選択した状態で、右メニューバーのカラムの列の設定で、何列にするか設定することができます。
外側のカラムを選択>カラム数(列数)を設定
 

好きな列数・幅を選択します(あとから変更可能です)


 

カラム幅の変更(内側カラムでできる設定)

内側のカラムを選択した状態で、右メニューバーのカラムの列の設定でから、何列にするか設定することができます。
内側のカラムを選択>横幅を設定
 

■カラムー配置変更の例


 

カラムの垂直方向の位置調整(外側・内側カラムでできる設定)

外側カラムまたは内側カラムを選択した状態で、カラムブロックの上に表示されるツールバーの配置アイコンを押下するとカラムの垂直方向の配置を設定することができます。
カラム垂直方向の位置調整
 

■カラムー配置変更の例


 

ブロックを選択しにくい時はブロックナビゲーションが便利

カラムブロックの中にブロックを入れたり、いくつもブロックを組み合わせていくと、対象のブロックをうまく選択できない場合があります。

その場合は、ブロックナビゲーションが便利です。

対象のブロック近くのブロックを選択してから、ブロックナビゲーションを選択すると、ブロックの階層構造を表示でき、選択したいブロックを選ぶことが便利です。また、左下に現在選択されているブロックがぱんくずリスト形式で表示されているのでそこから対象のブロックを選択することもできます。
ブロックナビゲーション、ブロックのぱんくずリスト
 

■ブロックナビゲーションを活用して複雑なブロックからピンポイントで対象ブロックを選択する


 
 

まとめ

まとめです。今回は、WordPressのブロックエディターにおけるカラムブロックの使い方を解説しました。
 

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!

カラムブロックを利用することで、横並び表示が簡単にできるようになりました。カラムブロックを活用することでレイアウトの幅がとても広がるので是非活用してみてくださいね。

 

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, , ,