ブロックエディタ使い方

【記事をデザイン】『カラム・区切り・余白・改行指定・非表示』ブロック使い方「レイアウト」編

Cinna

こんにちは、Cinna(シーナ / @web_cinna)です。

WordPressブロックエディタ(Gutenberg)で難しいコードは使わずに「記事を見やすくする方法」STEP5、今回は「レイアウト」編です。

レイアウトで役立つ「カラム・区切り・余白・改行指定・非表示」の使い方を図解を使って解説していきます。

この記事では簡単に記事をデザインするために、一部で無料プラグイン”VK Blocks”のブロックエディタ拡張機能を使っています。

それではスタートです!

カラムで横並びレイアウトを作ろう

WordPressの標準ブロックです。ブロックを横並びに2つ、3つと配置することができるブロックです。モバイルでは自動的に縦並びに表示してくれます。

MEMO

カラムを使うとこのように要素を横並びにすることができます!

MEMO

ブロックを入れる箱が横並びになっていて、その中にそれぞれブロックを配置しています。

\カラムブロックの全体構成イメージ(2カラムの場合)/

カラムブロック基本設定

カラムブロックを追加

  1. プラスボタンをクリック
  2. ブロック検索「カラム」と入力
  3. カラムブロックをクリック

カラム詳細設定

2分割、3分割を選べます。幅の割合は後でも変更できます!

  1. プラスボタンをクリックすれば、それぞれにブロックを追加できる
  2. ブロックの配置設定(上揃え、中央揃え、下揃え)
  3. 【カラム設定】選択したカラムの幅(割合)を設定できる

カラムの編集メニューが表示されないor選択できない時の対処法

Cinna

カラム作ったはずなのに編集メニューがでてこない…

そんな時はカラムブロックの内側にあるブロックを選択している可能性が大きいです。外側のブロックの選択方法について下記の記事で解説してますので参考にしてみてくださいね!

ブロックが選択できないときの対処法【WordPress使い方】ブロックエディタ- Gutenbergブロックの仕組みと外側ブロックの選択方法を解説します。グループやカラムなど複数のブロックを組み合わせて構成されているブロックは、選択したいブロックをうまく選択しにくい場合があります。そんな時の対処法です。...

2種類の区切りブロック

Cinna

「区切り」「ページ区切り」ブロックがあります!

区切りSample

\デフォルト(上)・幅広線(真ん中)・ドット(下)




ページ区切りSample

区切りブロック

区切ブロックを追加

  1. クリックでブロックを追加
  2. ブロック検索で「区切り」と入力
  3. 「区切り」ブロックをクリック

区切り詳細設定

  1. 配置のボタンですが、中央揃えしかできません
  2. 【スタイル】3種類のスタイルから選べる
  3. 【色設定】12色+カスタムカラーで好きな色に変更できる

ページ区切り(改ページ)

ページ区切りブロック追加

  1. クリックでブロック追加
  2. ブロック検索で「区切り」と入力
  3. 「ページ区切り」をクリック

設定は特になし

次のページにしたい箇所の直前にページ区切りブロックを追加するだけでOKです!

余白(VK Blocks)

パソコン、スマホ、タブレットと様々な大きさの画面でWEBサイトを見ます。それぞれの画面サイズに適した表示に対応して変化するレスポンシブ機能をうまく活用できると、さらに記事が見やすくなります!

そこで大事になってくるのが「余白設定」。画面の大きさに合わせて適切な幅を選ぶだけでも見やすさが変わってきます。

Cinna

ここからは一見地味だけど、大事なお役立ちブロックです

レスポンシブスペーサー

VK Blocksで追加されるブロック「レスポンシブスペーサー」。これがとても便利です。その名の通り、レスポンシブ(表示する画面の大きさによって表示を変える)機能を兼ね備えたスペーサー(余白)ブロックです。

Cinna

WordPress標準ブロックにもスペーサーがありますが、VK Blocksならレスポンシブ設定が簡単にできるのでおすすめです。

ブロックとブロックの間に追加する場合

ブロックを前に挿入

  1. 縦3点アイコンをクリックしてブロック編集メニューを表示
  2. 「前に挿入」をクリック

レスポンシブスペーサーブロックを追加

  1. プラスボタンをクリック
  2. ブロック検索「レスポンシブ」と入力
  3. レスポンシブスペーサーをクリック

レスポンシブスペーサーの設定

詳細設定

余白タイプ
  • height・・・余白の高さを指定する(上のブロックの余白は消せない)
  • margin-top・・・上のブロックの余白を消して高さを指定できる
MEMO

margin-topの方が指定した高さそのままを表示してくれるのでオススメ!

単位
  • px・・・固定の幅を指定できる(絶対値)
  • em、rem、vw・・・割合で指定できる(相対値)
MEMO

シンプルにpxで指定でOK!相対値がわかる人はうまく活用してください♪

PC、タブレット、スマホと3種類の余白幅をそれぞれ指定できるので、プレビューで試しながら調整してみてくださいね。

改行指定(VK Blocks)

画面サイズ毎の改行指定

VK Blocksの拡張機能「画面サイズ毎の改行指定」。パソコンでは改行したい文章だけど、スマホでは改行せずに表示したいということが簡単に設定できます。

設定方法

  1. 改行を入れたいところにカーソルを合わせる
  2. クリックして改行メニューを表示

指定したい改行メニューをクリックするとショートコードが入力されます。例えば、スマホとタブレットに改行を入れたいときは「xs」と「sm」と「md」の両方を入力します。それぞれのサイズは下記のメモを参考にしてください。

サイズ参考MEMO

  • xs:~576px(一般的なスマホ)
  • sm:576px ~768px(小さめタブレットなど)
  • md:768px~992px (一般的なタブレット)
  • lg:992px~1200px(一般的なPC)
  • xl:1200px~1400px(大きめPC、モニターなど)
  • xxl:1400px~(モニターなど)

※端末によってサイズが変わるので上記はあくまで参考です

例えば、PCでは改行なしでタブレットより小さいサイズは改行したいときは、「xs」と「sm」と「md」3つとも入れておくとカバーできます。逆にPC以上のサイズに改行を入れたい場合は「lg」「xl」「xxl」を入れておきます。

テキストの改行禁止指定

例えば「テーブル(表)」ブロックや「メディアとテキスト」ブロックを使う時など、デバイスの画面サイズによって文字が意図しない部分で自動的に改行されてしまうことがあります。その改行を禁止できる機能です。

自動的に改行してしまう例

改行禁止指定の設定

  1. 改行したくないテキストを選択
  2. クリックしてその他メニューを表示
  3. 「No wrap」をクリック

画面サイズによる非表示設定(VK Blocks)

改行と同じように「このブロックはスマホでは表示したくない!」ということを簡単に設定できます。

非表示設定

  1. 設定したいブロックを選択
  2. 右側ブロック編集メニューの「非表示設定」でデバイスの画面サイズによって非表示にするかを指定(改行指定の時と同じ要領で指定します)
MEMO

例えば、画像のサイズをスマホとPC分けて表示したい時にも役立ちます。スマホ用画像にはlg,xl,xxlを非表示設定、PC用画像にはxs,sm,mdを非表示に設定すればOKです。(編集画面では2つのブロックが存在します)

WordPress記事を見やすくする方法ステップ5「レイアウト」編でした!ブロックの配置のカスタマイズにぜひ活用してみてくださいね。

次回は「リンク&埋め込み」編としてボタン装飾やYouTube、SNSの埋め込みなどを紹介したいと思います!

Cinna

最後まで読んでいただきありがとうございました!

ABOUT ME
Cinna
Cinna
8年間働いた会社を辞めて2年間のwebデザイン長期職業訓練に通っていました。2019年入学▶︎2021年修了。デザインは独学・webは初心者からスタート。ライフスタイルが変わっても働き続けられる仕事がしたくてチャレンジすることに。まなび総合サイトmanabimon.comにてライタースタート、ライフスタイルやこれまでの体験談からの役立つ情報をよりリアルに発信するため"MeBe"を開設。