WordPressブロックエディタ（Gutenberg）で難しいコードは使わずに「記事を見やすくする方法」STEP５、今回は「レイアウト」編です。
レイアウトで役立つ「カラム・区切り・余白・改行指定・非表示」の使い方を図解を使って解説していきます。
💡 VK Blocksでできること一覧と導入方法はコチラ！ブロックエディタを使いやすく便利にしてくれる無料プラグインです✨
それではスタートです！
カラムで横並びレイアウトを作ろう
WordPressの標準ブロックです。ブロックを横並びに２つ、３つと配置することができるブロックです。モバイルでは自動的に縦並びに表示してくれます。
カラムを使うとこのように要素を横並びにすることができます！
ブロックを入れる箱が横並びになっていて、その中にそれぞれブロックを配置しています。
＼カラムブロックの全体構成イメージ（２カラムの場合）／
カラムブロック基本設定
カラムブロックを追加
- プラスボタンをクリック
- ブロック検索「カラム」と入力
- カラムブロックをクリック
カラム詳細設定
２分割、３分割を選べます。幅の割合は後でも変更できます！
- プラスボタンをクリックすれば、それぞれにブロックを追加できる
- ブロックの配置設定（上揃え、中央揃え、下揃え）
- 【カラム設定】選択したカラムの幅（割合）を設定できる
カラムの編集メニューが表示されないor選択できない時の対処法
カラム作ったはずなのに編集メニューがでてこない…
そんな時はカラムブロックの内側にあるブロックを選択している可能性が大きいです。外側のブロックの選択方法について下記の記事で解説してますので参考にしてみてくださいね！
２種類の区切りブロック
「区切り」「ページ区切り」ブロックがあります！
＼デフォルト（上）・幅広線（真ん中）・ドット（下）／
区切りブロック
区切ブロックを追加
- クリックでブロックを追加
- ブロック検索で「区切り」と入力
- 「区切り」ブロックをクリック
区切り詳細設定
- 配置のボタンですが、中央揃えしかできません
- 【スタイル】３種類のスタイルから選べる
- 【色設定】１２色＋カスタムカラーで好きな色に変更できる
ページ区切り（改ページ）
ページ区切りブロック追加
- クリックでブロック追加
- ブロック検索で「区切り」と入力
- 「ページ区切り」をクリック
設定は特になし
次のページにしたい箇所の直前にページ区切りブロックを追加するだけでOKです！
余白（VK Blocks）
パソコン、スマホ、タブレットと様々な大きさの画面でWEBサイトを見ます。それぞれの画面サイズに適した表示に対応して変化するレスポンシブ機能をうまく活用できると、さらに記事が見やすくなります！
そこで大事になってくるのが「余白設定」。画面の大きさに合わせて適切な幅を選ぶだけでも見やすさが変わってきます。
ここからは一見地味だけど、大事なお役立ちブロックです
レスポンシブスペーサー
VK Blocksで追加されるブロック「レスポンシブスペーサー」。これがとても便利です。その名の通り、レスポンシブ（表示する画面の大きさによって表示を変える）機能を兼ね備えたスペーサー（余白）ブロックです。
WordPress標準ブロックにもスペーサーがありますが、VK Blocksならレスポンシブ設定が簡単にできるのでおすすめです。
ブロックとブロックの間に追加する場合
ブロックを前に挿入
- 縦３点アイコンをクリックしてブロック編集メニューを表示
- 「前に挿入」をクリック
レスポンシブスペーサーブロックを追加
- プラスボタンをクリック
- ブロック検索「レスポンシブ」と入力
- レスポンシブスペーサーをクリック
レスポンシブスペーサーの設定
詳細設定
余白タイプ
- height・・・余白の高さを指定する（上のブロックの余白は消せない）
- margin-top・・・上のブロックの余白を消して高さを指定できる
margin-topの方が指定した高さそのままを表示してくれるのでオススメ！
単位
- px・・・固定の幅を指定できる（絶対値）
- em、rem、vw・・・割合で指定できる（相対値）
シンプルにpxで指定でOK！相対値がわかる人はうまく活用してください♪
PC、タブレット、スマホと３種類の余白幅をそれぞれ指定できるので、プレビューで試しながら調整してみてくださいね。
改行指定（VK Blocks）
画面サイズ毎の改行指定
VK Blocksの拡張機能「画面サイズ毎の改行指定」。パソコンでは改行したい文章だけど、スマホでは改行せずに表示したいということが簡単に設定できます。
設定方法
- 改行を入れたいところにカーソルを合わせる
- クリックして改行メニューを表示
指定したい改行メニューをクリックするとショートコードが入力されます。例えば、スマホとタブレットに改行を入れたいときは「xs」と「sm」と「md」の両方を入力します。それぞれのサイズは下記のメモを参考にしてください。
サイズ参考MEMO
- xs：～576px（一般的なスマホ）
- sm：576px ～768px（小さめタブレットなど）
- md：768px～992px （一般的なタブレット）
- lg：992px～1200px（一般的なPC）
- xl：1200px～1400px（大きめPC、モニターなど）
- xxl：1400px～（モニターなど）
※端末によってサイズが変わるので上記はあくまで参考です
テキストの改行禁止指定
例えば「テーブル（表）」ブロックや「メディアとテキスト」ブロックを使う時など、デバイスの画面サイズによって文字が意図しない部分で自動的に改行されてしまうことがあります。その改行を禁止できる機能です。
改行禁止指定の設定
- 改行したくないテキストを選択
- クリックしてその他メニューを表示
- 「No wrap」をクリック
▼
画面サイズによる非表示設定（VK Blocks）
改行と同じように「このブロックはスマホでは表示したくない！」ということを簡単に設定できます。
非表示設定
- 設定したいブロックを選択
- 右側ブロック編集メニューの「非表示設定」でデバイスの画面サイズによって非表示にするかを指定（改行指定の時と同じ要領で指定します）
例えば、画像のサイズをスマホとPC分けて表示したい時にも役立ちます。スマホ用画像にはlg,xl,xxlを非表示設定、PC用画像にはxs,sm,mdを非表示に設定すればOKです。（編集画面では２つのブロックが存在します）
WordPress記事を見やすくする方法ステップ５「レイアウト」編でした！ブロックの配置のカスタマイズにぜひ活用してみてくださいね。
次回は「リンク＆埋め込み」編としてボタン装飾やYouTube、SNSの埋め込みなどを紹介したいと思います！
最後まで読んでいただきありがとうございました！
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ
▼MeBeはConoHa WINGレンタルサーバーを使用しています😇
