ブロックエディタ操作（レイアウト編②）
目次
STEP11：レイアウト（カラムブロック）
Lv1：「カラム」ブロックを配置し、各カラムに段落ブロックを設定しよう
Lv2：「カラム」ブロックのカラムを増やそう
Lv3：「カラム」ブロックのカラム幅を変えよう
Lv4：「カラム」ブロックの配置を変えよう
STEP12：レイアウト（再利用可能ブロック）
Lv1：何度も繰り返し使うブロックを「再利用可能」に登録しよう！
Lv2：「再利用可能」ブロックを呼び出して配置しましょう！
Lv3：「再利用可能」ブロックの内容を変更しよう
STEP11：レイアウト（カラムブロック）
Lv1：「カラム」ブロックを配置し、各カラムに段落ブロックを設定しよう
問題
「カラム」ブロックを追加し、各カラムの中に「段落」ブロックを設定しよう。
完成例
あああああああああああああああああああああああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
方法
- 演習ブロック「★」にカーソルを入れる
- 「★」を消す
- エディター内の「ブロックの追加」ボタンからポップアップを開く
- 検索ボックスに「カラム」と入力してブロックを絞り込み、配置する
- 開始時のパターン「30/70」を選択する
- 左右の [ + ] ボタンを押し、段落ブロックを追加し、適当な文字を入れる。
演習：やってみましょう
★
レイアウトを行うのに、カラムブロックはよく使います！スマートフォンでは縦１列に並びますよ！
Lv2：「カラム」ブロックのカラムを増やそう
問題
「カラム」ブロックのカラムを、設定サイドバーから増やしましょう。
完成例
あああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううう
方法
演習ブロック「★」を消して、Lv1で作成したブロックをコピペする。
- ブロックパンくずリストで、親のカラムブロックを選択しましょう
- 設定サイドバーの「カラム」の数を３にしましょう
- 新しくできたカラムに、段落ブロックを追加し、適当な文字を入力しましょう
演習：やってみましょう
★
カラムブロックに配置した段落ブロックにカーソルがある状態でブロックパンくずリストを見ると、「カラム」が２つありますね。左のカラムが親、右のカラムが子になります。
Lv3：「カラム」ブロックのカラム幅を変えよう
問題
「カラム」ブロックのカラム横幅を、設定サイドバーから変更しましょう。
完成例
あああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううう
方法
演習ブロック「★」を消して、Lv1で作成したブロックをコピペする。
- 「う」にカーソルを入れる
- ブロックパンくずリストで、幅を変更する子カラムブロックを選択します
- 設定サイドバーの「カラム設定」から、数値（％）を変更しましょう
- 変更した数値に合わせて他のカラムの横幅も変化します
演習：やってみましょう
★
横幅はPCで閲覧する時のみ反映されます！最大100％で、テキストの配分を見ながら調整してみてくださいね。
Lv4：「カラム」ブロックの配置を変えよう
問題
「カラム」ブロックのカラムを、設定サイドバーから増やしましょう。
完成例
あああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううう
方法
演習ブロック「★」を消して、Lv1で作成したブロックをコピペする。
- ブロックパンくずリストで、親のカラムブロックを選択しましょう
- ブロックツールバーから、垂直方向の配置を選択します
- 上揃え・中央揃え・下揃えが選択できます
演習：やってみましょう
★
見た目のバランスを整えるためにも垂直方向の配置はとても大事。左右一方だけが長くなってしまう場合等に使うと見栄えがよくなります。
STEP12：レイアウト（再利用可能ブロック）
再利用可能ブロックとは
再利用可能ブロックは、ブロックまたはブロックのグループを保存して、サイトの投稿やページにあとから使用できます。頻繁に同じコンテンツを同じブロックやブロックのグループに追加する場合は、再利用可能ブロックで大幅に時間を節約できます。
Lv1：何度も繰り返し使うブロックを「再利用可能」に登録しよう！
問題
受付時間表ブロックを「再利用可能ブロック」に登録してみましょう。
完成例
方法
- 演習ブロック「★」を削除して、「/受付時間」と入力し受付時間表ブロックを呼び出します
- あなたの院の受付時間を入力してください
- ブロックツールバー > 詳細設定 > 再利用ブロックに追加
- ブロックの名前に、「受付時間」と入力し、保存ボタンを押してください。
演習：やってみましょう
| 受付時間 | 月 | 火 | 水 | 木 | 金 | 土 | 日 | 祝 |
|---|---|---|---|---|---|---|---|---|
| 〇 |
受付時間や料金・アクセス情報など、同じ情報を複数の場所で表示する場合などに使うと便利です。
Lv2：「再利用可能」ブロックを呼び出して配置しましょう！
問題
「再利用可能」ブロックを呼び出して、エディターに配置しましょう。
完成例
方法
- 演習ブロック「★」を消す。
- 「ブロック追加パネル」 ＞ 「再利用可能」 ＞ ご自分で作成されたブロックを選択
演習：やってみましょう
★
再利用可能ブロックの配置は「/」で呼び出したり、検索からでも可能です。
Lv3：「再利用可能」ブロックの内容を変更しよう
問題
「再利用可能」ブロックを呼び出して、編集します。
完成例
方法
- 演習ブロック「★」を消す。
- ご自分の再利用ブロックを配置
- 受付時間を変更（または追加）する
- 右上の「公開」ボタンの左側に「●」がついたことを確認し、一度公開ボタンを押す
- 他のページに配置しているブロックにも影響が出る、という注意書きが出るので確認してから「保存」を押す
演習：やってみましょう
★
再利用可能ブロックのデータを変更すると、これまで配置した全ての再利用可能ブロックに反映されます。
