無料！Gutenbergブロックテンプレートプラグインを公開しました！
ブロックエディターとは？
ブロックエディターの概要や基本的な使い方について、詳しくは下記をご参照ください。ブロックエディターの使い方とテーマ対応状況
ブロックエディターでのデザイン方法
ブロックエディターによるデザイン方法をご紹介します。ブロックの幅広/全幅
対応するブロックでは、幅広、全幅のレイアウトを選択することができます。幅広：通常ブロックより少し幅が広く表示されます。
全幅：画面幅いっぱいに表示されます。※1カラムのページ向け。
セクションのデザイン
複数のブロックをまとめてグループ化することができます。グループブロックは、背景色や文字色を設定し、セクションとしてデザインに活用できます。
ブロックスタイルデザイン
LIQUID PRESS では、ブロックスタイルを利用して簡単にデザインを変更することができます。詳しくは、ブロックスタイルデザインをご参照ください。
ブロックパターン
WordPress 5.5 からブロックパターン機能が利用できるようになりました。ブロックパターンは、画像や段落等の複数ブロックをまとめてデザインパターン化したものです。 個別に編集可能な点が再利用ブロックとは異なります。
- 再利用ブロック：編集すると過去の物も変更される。個別の編集には「通常のブロックへ変換」が必要。
- ブロックパターン：個別に編集可能。
プラスアイコンを押下し、「パターン」タブからブロックパターンを選択して挿入することができます。
また、ブロックパターンの追加登録も可能です。
画面サイズによる出し分け
LIQUID PRESS では、ブロックのメニュー＞詳細＞追加CSSクラス に、表示ユーティリティを入力することで、 デスクトップとスマートフォン等でブロックを出し分けることが可能です。| 画面サイズ | CSSクラス |
|---|---|
| xsのみ非表示（デスクトップで表示） | d-none d-sm-block |
| xsのみ表示（モバイルで表示） | d-block d-sm-none |
さらに詳細な出し分けは、表示ユーティリティをご覧ください。
カラムの順番を変更する
デスクトップとスマートフォンで、カラムの順番を変更することができます。例：「カラム」ブロックに対して、追加 CSS クラス「order-md-0 order-2」を指定します。
デスクトップでは画像が先（左）。
スマートフォンでは画像が後（下）。
影付きのブロック
ブロックのメニュー＞詳細＞追加CSSクラス に、影を付ける「shadow」、パディングを付ける「p-3」を入力すると、 簡単に影付きのブロックが作成できます。
複数のCSSクラスは半角スペース区切り。
枠線付きのブロック
ブロックのメニュー＞詳細＞追加CSSクラス に、ボーダーを付ける「border」、パディングを付ける「p-3」を入力すると、 簡単にボーダー付きのブロックが作成できます。
角丸のブロック
ブロックのメニュー＞詳細＞追加CSSクラス に、「rounded」や「rounded-circle」を入力すると、 簡単に角丸や円形のブロックが作成できます。画像にも指定可能です。
テーブルブロックのオプション
ブロックのメニュー＞詳細＞追加CSSクラス に、「table-bordered」、「table-borderless」、「table-dark」、「table-hover」 などを入力すると、枠線あり/なし、ダークモード、ホバー対応のテーブルを作成できます。
Bootstrap4 のデザイン
LIQUID PRESS では、Bootstrap4に対応しているため、 豊富なCSSクラスを利用してレイアウトやスタイリングを行うことができます。旧クラシックエディターでCSSクラスを追加するには、テキストエディタでHTMLを入力する必要がありましたが、 ブロックエディターならブロックに対して簡単にCSSクラスを追加することができます。
使用可能なCSSクラスについて詳しくは下記をご覧ください。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
デザインスキン＆パーツ
簡単に使える無料のデザインスキン＆パーツもあります 😉LIQUID PRESS 無料デザインスキン＆パーツ
LIQUID BLOCKS
Gutenbergブロックテンプレートで、記事作成を効率化する、WordPress公式プラグインです。
無料！Gutenbergブロックテンプレート LIQUID BLOCKS
LIQUID SPEECH BALLOON
Gutenbergブロックエディターで、会話形式の吹き出しが作成できる、WordPress公式プラグインです。
吹き出しで会話ができる LIQUID SPEECH BALLOON
ブロックエディターのカスタマイズ方法
ブロックエディターを使いやすくカスタマイズする方法をご紹介します。フルスクリーン解除
WordPress 5.5 では、フルスクリーンモードがデフォルトで有効になっています。右上のツール設定を開き、フルスクリーンモードのチェックを外すと解除することができます。
トップツールバー
各ブロック上に表示される、ブロックツールバーはトップに固定することができます。右上のツール設定を開き、トップツールバーにチェックを付けます。標準設定だと使いにくい場合は試してみてください。
ブロックマネージャー
挿入する際に表示される、ブロックの候補をカスタマイズすることができます。右上のツール設定を開き、ブロックマネージャーを押下し、使用しないブロックのチェックを外します。候補が沢山ありすぎて使いにくい場合は変更します。
再利用ブロックを管理
再利用ブロックを管理することができます。右上のツール設定を開き、再利用ブロックを管理を押下すると、管理ページに遷移します。 通常の記事のように編集、削除したり、JSON形式でインポートおよびエクスポートすることができます。
ブロックパターン
WordPress 5.5 で搭載された、ブロックパターンは、ブロックの組み合わせを挿入できる機能です。
ブロックパターンの追加方法
ブロックパターンを作成して追加することも可能です。無料WordPress公式プラグイン「LIQUID BLOCKS」でブロックパターンを作成、管理することができます。
ブロックパターンの追加方法について、詳しくは下記をご参照ください。
無料！Gutenbergブロックテンプレート LIQUID BLOCKS
開発状況の公開
LIQUID PRESS では、GitHubにてテンプレートの開発状況および更新履歴を公開しています。詳しくは下記をご参照ください。開発状況の通知を受け取るには「Watch」してください。
https://github.com/lqdjp/liquid-press/issues
