WordPressブロックエディターでのデザインとカスタマイズ方法

LIQUID PRESS INFORMATION
WordPress 5.0 に搭載された新しいブロックエディター Gutenberg(グーテンベルク)についてご紹介します。 LIQUID PRESS は、ブロックエディターと相性が良いため、様々な便利な使い方があります。

ブロックエディターとは?

ブロックエディターの概要や基本的な使い方について、詳しくは下記をご参照ください。
ブロックエディターの使い方とテーマ対応状況

ブロックエディターでのデザイン方法

ブロックエディターによるデザイン方法をご紹介します。

ブロックの幅広/全幅

対応するブロックでは、幅広、全幅のレイアウトを選択することができます。
幅広:通常ブロックより少し幅が広く表示されます。
全幅:画面幅いっぱいに表示されます。※1カラムのページ向け。 WordPressブロックエディター ブロックの幅広/全幅

セクションのデザイン

複数のブロックをまとめてグループ化することができます。
グループブロックは、背景色や文字色を設定し、セクションとしてデザインに活用できます。

ブロックスタイルデザイン

LIQUID PRESS では、ブロックスタイルを利用して簡単にデザインを変更することができます。
詳しくは、ブロックスタイルデザインをご参照ください。 WordPressブロックエディター ブロックスタイルデザイン

ブロックパターン

WordPress 5.5 からブロックパターン機能が利用できるようになりました。
ブロックパターンは、画像や段落等の複数ブロックをまとめてデザインパターン化したものです。 個別に編集可能な点が再利用ブロックとは異なります。
  • 再利用ブロック:編集すると過去の物も変更される。個別の編集には「通常のブロックへ変換」が必要。
  • ブロックパターン:個別に編集可能。

プラスアイコンを押下し、「パターン」タブからブロックパターンを選択して挿入することができます。 WordPressブロックエディター ブロックパターン また、ブロックパターンの追加登録も可能です。

画面サイズによる出し分け

LIQUID PRESS では、ブロックのメニュー>詳細>追加CSSクラス に、表示ユーティリティを入力することで、 デスクトップとスマートフォン等でブロックを出し分けることが可能です。

画面サイズCSSクラス
xsのみ非表示(デスクトップで表示)d-none d-sm-block
xsのみ表示(モバイルで表示)d-block d-sm-none
WordPressブロックエディターでのデザイン 画面サイズによる出し分け さらに詳細な出し分けは、表示ユーティリティをご覧ください。

カラムの順番を変更する

デスクトップとスマートフォンで、カラムの順番を変更することができます。
例:「カラム」ブロックに対して、追加 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ブロックテンプレート Gutenbergブロックテンプレートで、記事作成を効率化する、WordPress公式プラグインです。
無料!Gutenbergブロックテンプレート LIQUID BLOCKS

LIQUID SPEECH BALLOON

LIQUID SPEECH BALLOON 会話 Gutenbergブロックエディターで、会話形式の吹き出しが作成できる、WordPress公式プラグインです。
吹き出しで会話ができる LIQUID SPEECH BALLOON

ブロックエディターのカスタマイズ方法

ブロックエディターを使いやすくカスタマイズする方法をご紹介します。

フルスクリーン解除

WordPress 5.5 では、フルスクリーンモードがデフォルトで有効になっています。
右上のツール設定を開き、フルスクリーンモードのチェックを外すと解除することができます。 WordPressブロックエディターカスタマイズ方法 フルスクリーン解除

トップツールバー

各ブロック上に表示される、ブロックツールバーはトップに固定することができます。
右上のツール設定を開き、トップツールバーにチェックを付けます。標準設定だと使いにくい場合は試してみてください。 WordPressブロックエディターカスタマイズ方法 トップツールバー

ブロックマネージャー

挿入する際に表示される、ブロックの候補をカスタマイズすることができます。
右上のツール設定を開き、ブロックマネージャーを押下し、使用しないブロックのチェックを外します。候補が沢山ありすぎて使いにくい場合は変更します。 WordPressブロックエディターカスタマイズ方法 ブロックマネージャー

再利用ブロックを管理

再利用ブロックを管理することができます。
右上のツール設定を開き、再利用ブロックを管理を押下すると、管理ページに遷移します。 通常の記事のように編集、削除したり、JSON形式でインポートおよびエクスポートすることができます。 WordPressブロックエディターカスタマイズ方法 再利用ブロックを管理

ブロックパターンの追加方法

WordPress公式プラグイン「LIQUID BLOCKS」でブロックパターンを作成、管理できます。 WordPress ブロックパターンの管理画面 ブロックパターンの追加方法について、詳しくは下記をご参照ください。
無料!Gutenbergブロックテンプレート LIQUID BLOCKS

開発状況の公開

LIQUID PRESS では、GitHubにてテンプレートの開発状況および更新履歴を公開しています。
詳しくは下記をご参照ください。開発状況の通知を受け取るには「Watch」してください。
https://github.com/lqdjp/liquid-press/issues

関連記事

LIQUID PRESS

» 使い放題 » テーマ一覧

PageTop