自由なレイアウトを作ろう!この記事ではブロックエディターの中でも特に便利な「カラムブロック」の基本の使い方を詳しくご説明します!カラムブロックこのブロックのおかげで、\WordPressで自由にレイアウトが作れるようになった/と言っても過言ではありません。ややこしそうに見えますが、触ってみると意外と簡単ですよ。実際に操作してみてくださいね。カラムブロックを使いこなして、かっこいいサイトを作りましょう!※注意事項この記事は、WordPress5.8.1のカラムブロックを解説しています。(2021年10月現在の最新)バージョンが違うと細かい設定などが違うことがあります。最新にしてご利用ください。「カラム」(column)とは「列」のことです。「画像」ブロックを例にして説明します。画像ブロック、まずはこんな風に入りますよね(↓)画像は1つだけ入れられます。これが普通の・・・いわゆる1カラム(1列・分割なし)の状態です。「カラムブロック」を使うと、この一行を分割してカラム(列)を増やすことができます。手順は以下の通りです。例として、カラムブロックの3分割を選んでみますね。すると、カラムブロックが3つに分かれます。それぞれに1つづつ画像を入れることができます。このように、カラムブロックを使うと「列」を増やして横並びに配置できます。画像以外でも文字や動画もブロックならなんでも入りますよ。活用していろいろな表現を試してみてくださいね。詳しい使い方の手順をご説明します。カラムブロックの使い方まず、「カラムブロック」を挿入します。カラムブロックが見当たらない場合は、ブロック一覧の「デザイン」カテゴリーから探すか、「/カラム」(または「/col」)と入力しても早いですよ。ブロック一覧/(スラッシュ)を使うと検索もできます。/(スラッシュ)+名前で検索可能するとこのようなカラムブロックが入ります。「開始時のパターンを選択します」と表示され、カラムを何分割にするか選べます。サンプルは6種類があるので、ちょうどいいものを選んでください。希望のレイアウトがない時は近いものを選んで変更しましょう。カラムは最大6個まで増やせ、50:50などの比率も変えられますよ。カラム数を変えるには、「親カラムブロック」のカラム数を変更します。1〜6まで設定できます。カラムの比率を変えるには「子カラムブロック」のカラム設定の「幅」に数字を指定します。親・・?子・・・?大石カラムブロックは「入れ子」なのがポイントです!カラムブロックは入れ子になっているので、「親子」関係を把握するのがポイントになります。ここ大事なので、詳しくご説明しますね。カラムブロックは親子関係がポイントカラムブロックは、1つの「行」という横長の大きい箱があって、その中に「カラム(列)」が入っている、入れ子の親子関係になっています。大きな横長の親カラム子カラムが複数入っている。親カラムで何分割するかを決めて、子カラムで1つの大きさを決めて中身を入れる、という感じで使っていきます。親カラムブロックにはこのような設定ができます。全体の色と、カラムの分割数を変更することができますね。そうそう、中身を作った後にカラムの数を減らすと、子カラムごと中身も削除されるのでご注意ください。カラムブロックの設定項目はこちらです。親カラムの設定項目と似ていますが、違うのは横幅サイズを指定することができること。このサンプルの場合ははじめに「3分割」を選んだので、33.33%が入っていますね。左端を70%にすると、こうなります。このように「幅」の数字を変えると、指定したカラムだけサイズを変えられます。うまく活用してくださいね。操作に慣れないうちは「親」を選択しているのか、中身の「子」を選択しているのか、どっちなのかわからなくなりがちです。ここがカラムブロックのいちばん難しいところかもしれません。以下のような方法で確認できるので、操作前に一度確認しておくとわかりやすいですよ!設定メニューで確認どこかをクリックして、右側のブロック設定メニューを見ると今「親」と「子」どちらを選択しているかがかわかります。親カラムの時どっちも名前が「カラム」なので、名前だけだとわかりにくいですよね。(英語だと「親→colmuns、子→colmunなので区別できるんだとか)そんな時はアイコンに注目してください。子カラムのアイコン親カラムのアイコンツールバーで確認また、「子」を選択している時は、よく見ると「上に親があるよー」と親カラムのボタンが表示されています。親カラムを選択している時はありません。中身の方がクリックしやすいので、「子」の方を選択していることが多いと思います。そんな時このツールバーのアイコンをクリックすると、親が選択できて便利ですよ!リスト表示で確認また、ブロックエディターには「リスト表示」という機能があります。リスト表示ボタンは投稿画面のさらに上、(i)マークの右側の横線が階段上になったマークです。これをクリックすると、左から「リスト」と呼ばれる構成表が表示されます。リスト表示にすると、どんなブロックがあって、今どこを選択しているか一目でわかります。ブロックを入れてわかりづらくなったら、このリスト機能を活用してください。使い方のご説明は以上です。続いて、カラムブロックを使う時に確認したい「レスポンシブ」(スマホ対応のこと)について解説します。【動画】カラムブロックの簡単な作り方なんか複雑で、ややこしそうですが一発でさくっと作る方法がありますよ。これ面白いのでぜひやってみてください!きっとカラムブロックが大好きになるはず・・・!カラムレイアウトにしたい画像を、とりあえず一旦全部縦に並べます。それを全部選択して、ツールバーから「カラム」に変換するだけ!見た方がわかりやすいと思うので、動画にしました。レスポンシブ(スマホ)表示も確認しよう「レスポンシブ」とは、パソコン、スマホ、タブレットなどのそれぞれの画面に合わせてレイアウトを調整する機能のことです。昔は「パソコン用」「スマホ用」と別々にページを作っていたくらいなんですよ。さっきの3カラム、パソコンだとこう見えるけどスマホも同じように見えたら・・・ちょっと小さすぎるかも。文字なんか入れてたら読めませんね。そのため、カラムブロックは横幅に合わせて自動的に改行してくれるようになっています。改行は、画像や文字などの横幅によって変わります。カラムブロックを使った時は、タブレット・スマホではどのように見えるか?確認しておいてくださいね。カスタマイズしたい時は「スマホで見る時も、3分割のままにしたい」とか、「カラムとカラムの間の幅をもう少し狭くしたい」などの細かいご要望を伺うことがあります。Proなら子カラムブロックに間隔をつける機能がついていますよ。今の段階では、初期設定のカラムブロックにはそのような細かい機能はありません。そこで、プラグインやテーマの機能を利用しましょう!詳しい方法はこちらをご覧ください、サポトピアカラムブロックをプラグインでカスタマイズ!レスポンシブや隙間の調整もできるよ!自由なレイアウトが作れる!と大人気の「カラムブロック」ですが、細かい設定機能はついていません。便利にカスタマイズできるプラグイン・テーマを詳しくご紹介します!wp-firststep.com操作がわからない時は、無料オンライン勉強会をご利用ください。Zoomでリアルタイムに操作を見ながら勉強できますよ!データを取得できませんでした。勉強会情報はこちら勉強会はこんな感じです。著者AtsukoフリーランスのWebデザイナー。MeetUpのオーガナイザーもしています。このサイトは「猫でもわかる」をモットーに、なるべくわかりやすい言葉で解説して、WordPressを楽しく続けていくために必要な情報をお届けするブログを目指しています。「こんなことが知りたい」などあればお気軽にご意見ください。ブログ記事の参考にさせていただきます。続きを読むカラムブロックをプラグインでカスタマイズ!レスポンシブや隙間の調整もできるよ!自由なレイアウトが作れる!と大人気の「カラムブロック」ですが、細かい設定機能はついていません。綺麗で使いやすいだけでなく、ユーザーコミュニティのサポートが手厚いテーマです。コミュニティで気軽に質問に答えてもらえるので、WordPressを勉強して、自分管理・運営していきたいという方に特におすすめです。Proを3年使ってみたレビューです。ご検討中の方はぜひ参考にしてください。様子や操作方法の解説などの動画をアップしています。登壇動画2021年のWordPressイベントで初心者向けのWordPressの初め方についてお話ししました。【動画】カラムブロックの簡単な作り方レスポンシブ(スマホ)表示も確認しようもっとカスタマイズしたい時は。