「ブロックの配置方法」で配置したブロックは以下のような操作が可能です。
- 配置したブロックの移動
- 配置したブロックの削除
- ブロックのレイヤー操作
- ブロックツールバーでスタイルを変更
- ブロック設定でスタイルを変更
- パターンを作成
- テンプレートの作成
配置したブロックの移動方法
配置したブロックはその場所で固定されるわけではなく、後から順番を変更することができます。
- ドラッグ＆ドロップで移動する
- メニューから上下を選んで移動する
1つ目はドラッグ&ドロップで移動する方法です。編集画面でブロックを選択するとブロックの上に操作メニュー(ブロックツールバー)が表示されます。
このメニューの左の方には点が6つ並んだアイコンがあります。このアイコンをクリックしながら動かす(ドラッグする)とブロックを移動できます。
2つ目はメニューから移動する方法。ブロック上のメニューの右側にあるオプションアイコンをクリックするとさらにメニューが表示されます。
このメニューの「前に移動」で上に、「後に移動」で下に移動できます。
配置したブロックの削除
配置したブロックは削除することができます。
ブロックを削除したい場合は、ブロックを選択した状態で表示されるブロックツールバーの右側にあるオプションアイコンをクリックします。
このメニューの下の方にある「削除」をクリックすると配置したブロックが削除されます。
ブロックのレイヤー操作
ブロックは上下の移動だけでなくレイヤーパネルを使った階層の移動を行うことも可能です。
編集画面の左上にある「ドキュメントの概観」ボタンを押すとレイヤーパネルが表示されます。
このパネルにあるメニューボタンからも先ほどの移動や削除を行うことができます。
OrigamiUIで使えるブロックはブロックの中にブロックを入れることができ、ブロックを階層化することが可能です。
階層化するには以下のような方法があります。
- レイヤーパネルで入れたい場所にドラッグ&ドロップで移動
- ブロックを選択した状態で黒い「+」アイコンからブロックを配置
レイヤーパネル上で操作する場合は、移動したいブロックを移動さきにドラッグ&ドロップします。
編集画面で見た目は変わっていませんが、レイヤー上は階層化された状態になりました。
HTMLコードで説明すると以下のようになります。
// 変更前
<p>テキストをここに表示、テキストをここに表示、</p>
<div>
<h2>ここに見出しを表示</h2>
</div>
<p></p>
// 変更後
<div>
<p>テキストをここに表示、テキストをここに表示、</p>
<h2>ここに見出しを表示</h2>
</div>
<p></p>ブロックツールバーでスタイルを変更
ブロックを選択するとブロックの上にメニューが表示されます。このメニューでフォントのスタイルや配置を設定することができます。
例えば見出しブロックの場合は、HTMLタグを変更したり、太字にしたり、リンクを作るなどの操作が可能です。
WordPressで使えるデフォルトブロックの操作方法については以下の公式ドキュメントから確認することができます。
ブロック設定でスタイルを変更
ブロックを選択するとより詳細なブロック設定を行うことができます。
ブロック設定は右側に表示されます。表示されない場合は編集画面の右上にある「設定」アイコンを押すことで表示されます。
例えば段落ブロックの場合、文字のスタイル、配色、タイポグラフィ、サイズ(上下左右の余白)設定、枠線の設定などができます。
WordPressで使えるデフォルトブロックの操作方法については以下の公式ドキュメントから確認することができます。
OrigamiUIのブロック設定については以下で解説していますのでそちらでご覧ください。
- グループ
- コンテナ
- グリッド
- カラム
- オフキャンバス
- トグル
パターンを作成
WordPressでブロックを使ってスタイルやレイアウトを作成した後、それをなん度も使い回すことがあります。
例えばボタンや見出しなどのパーツは使い回すことの多いパーツです。
WordPressではこれらをパターンに登録しておくことで簡単に再利用することができる機能が用意されています。
パターンの作成と便利な使い方については以下のページをご覧ください。
リンク
テンプレートの作成
WordPressのブロックテーマではページ内で使用するボタンや見出しなどのパーツだけでなく、テンプレートそのものを管理画面上で作成できる機能があります。
WordPressメニューの「外観->エディター」でテンプレートページに移動できます。
ここでは使用中のテーマで用意されているテンプレートを編集したり、自分で新しくテンプレートを作成することができます。
テンプレートの作り方や便利な使い方については以下のページをご覧ください。
リンク
