ブロックエディター(Gutenberg)の使い方とテーマ対応状況

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

Gutenberg(グーテンベルク)とは?

Gutenberg を試す Gutenberg(グーテンベルク)は、WordPress 5.0 に搭載されたブロックエディターです。 WordPress 4.9.8 からはプラグインとしてインストールし、Gutenbergを利用することができます。

Gutenbergでは、ブロックという機能によって、見出し、文章、画像などの要素を組み合わせて作成することができます。 ブロックエディターとも呼ばれ、HTMLを記述しなくても、リッチなページを簡単に作成できるようになります。

Gutenbergの名前の由来は、活版印刷を発明した、ヨハネス・グーテンベルク(Johannes Gensfleisch zur Laden zum Gutenberg)です。

Gutenbergの使い方

※テーマやプラグインもGutenberg対応バージョンに更新する必要があります。
※バージョンアップの際は、データベース等のバックアップ作成をおすすめします。
※以下は記事執筆時点の情報です。Gutenbergのバージョンによって使い方が異なる場合があります。

Gutenbergを試す

WordPress 4.9.8 の場合、管理画面ダッシュボードで、「Gutenberg を試す」ボタンを押下します。
これで、Gutenbergが有効になります。

なお、テーマやプラグインがGutenbergに対応していない場合、 Classic Editor プラグイン をインストールして、切り換えの準備ができるまで旧エディターを使い続けることができます。

ブロックエディターインターフェイス

ブロックエディター編集画面の各部名称(WordPress 5.3時点)。 ブロックエディター編集画面インターフェイス

ブロックの作成

まずは、ブロックを作成してみましょう。
左上のプラスアイコンを押下すると、ブロックの候補が表示されます(参考:ブロック一覧)。 「見出し」を選択すると、下部に見出しブロックが追加されました。
文字を入力したり、見出しレベルを変更することができます。 「段落」を作成すると、背景色やテキスト色を変更することもできます。

ギャラリー

次に、「見出し」下のプラスアイコンから、「ギャラリー」を追加してみます。 メディアをアップロードしたり、メディアファイルを選択することができます。 「ギャラリーを挿入」すると、画像が自動的にレイアウトされました。
右サイドのメニューでは、ブロックのオプションを設定することができます。 ギャラリーでは、カラム数やリンク先を設定できます。

カバー画像

次に、「カバー画像」を追加してみます。 画像を選択すると、テキスト入力エリアが表示されます。動画も選択可能です。 テキストを入力すると、画像の上に重ねて表示されます。
画像自体に文字を入力しなくても、簡単にキャッチコピー付きの画像が作成できました。

カラム(段組)

次に、「カラム」を追加してみます。 すると、カラム(段組)レイアウトを作成することができます。カラムの中に段落や画像ブロックを追加します。
サイドバーでカラム数(列数)を設定できます。 左上の「ブロックナビゲーション」から、カラム>列>段落を選択し、それぞれにオプションを設定できます。

埋め込み

次に、埋め込みブロックから「Twitter」を追加してみます。
表示したいツイートのURLを入力するだけで、埋め込みが完了しました。 他にも、YouTube、Facebook、Instagram、などなどを簡単に埋め込むことができます。
※ブログカードを表示する場合は、埋め込み>WordPressでURLを入力する必要があります。

クラシックブロック

クラシックブロックを作成すると、ブロックエディター上で、旧エディターのように入力をすることができます。 TinyMCEボタンを利用できます。

幅広、全幅

対応するブロックでは、幅広、全幅を選択することができます。
幅広:通常ブロックより少し幅が広く表示されます。
全幅:画面幅いっぱいに表示されます。※1カラムのページで使用します。

色設定

対応するブロックでは、背景色や文字色等を選択することができます。
LIQUID PRESS では、一番左上の色は「テーマカラー」と連動しています。

並び替え

ブロックにフォーカスすると、左側に並び替えツールが表示されます。
上下アイコンを押下またはドラッグしてブロックを並び替えることができます。

複製

ブロック右側のメニュー(3点リーダー)から「複製」することもできます。

HTMLとして編集

ブロック右側のメニュー(3点リーダー)から「HTMLとして編集」することもできます。 HTMLを直接編集できるようになりました。

再利用ブロック

ブロック右側のメニュー(3点リーダー)から「再利用ブロックに追加」することもできます。
「再利用ブロック」は、ブロックの内容を保存して再利用できる、テンプレート機能です。
よく使うブロックを保存しておくと便利です。 再利用ブロック 「再利用ブロック」の名前をつけて保存します。 すると、「再利用可能」ブロックの中に、保存したブロックが表示されます。
これを選択すると、保存したブロックと同じものを簡単に作成することができます。 内容を変更する場合は、ブロックメニューから「通常のブロックへ変換」して編集します。

コードエディター

画面上部右上のメニュー(3点リーダー)から「コードエディター」に切り替えることができます。
旧テキストエディターのように、HTMLを編集することができます。
なお、ブロックはHTMLコメントで識別できるようになっています。 <!-- wp:cover-image -->...<!-- /wp:cover-image -->

既存ページの編集方法

旧エディターで作成した既存ページは、「クラシック」というブロックにまとめられます。
ブロック右側のメニューから、「HTMLとして編集」または「ブロックへ変換」することができます。
※「ブロックへ変換」すると、CSSクラスやDIV等が削除されるため注意が必要です。

パーマリンク設定

記事のタイトル部分にフォーカスすると、現在のパーマリンクと編集ボタンが表示され、編集することができます。

記事の複製方法

1. 固定ページ編集画面の右上のメニューから「すべてのコンテンツをコピー」します。 2. 固定ページを「新規作成」し、右上のメニューから「コードエディター」を選択します。
3. 本文エリアで右クリックして「貼り付け」するとコードが入力されます。 4. 「コードエディターを終了」を押下して完了です。

Gutenberg対応WordPressテーマ

LIQUID PRESS

LIQUID PRESS シリーズテーマは、Gutenbergに対応しています。
ブロックスタイルデザインや、テーマカラーが反映されるオリジナルカラーパレット、幅広/全幅オプションもサポートしています。
Gutenbergブロックエディターで、コーポレートサイトやランディングページ、オウンドメディア等をサクサク作成することができます。



また、Gutenbergは、LIQUID PRESS と相性が良いため、様々な便利な使い方があります。

Gutenberg対応プラグイン

LIQUID BLOCKS

無料!Gutenbergブロックテンプレート Gutenbergブロックテンプレートで、記事作成を効率化する、WordPress公式プラグインです。
無料!Gutenbergブロックテンプレート LIQUID BLOCKS

LIQUID SPEECH BALLOON

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

Gutenbergの便利な使い方

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

LIQUID PRESS では、ブロックスタイルを利用して簡単にデザインを変更することができます。
詳しくはブロックスタイルデザインをご参照ください。 ブロックスタイルデザイン また、LIQUID PRESS では、Bootstrap4に対応しているため、豊富なCSSクラスを利用してレイアウトやスタイリングを行うことができます。 旧エディターでCSSクラスを追加するには、テキストエディタでHTMLを入力する必要がありましたが、 Gutenbergならブロックに対して簡単にCSSクラスを追加することができます。

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

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

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

影付きのブロック

ブロックのメニュー>詳細>追加CSSクラス に、影を付ける「shadow」、パディングを付ける「p-3」を入力すると、 簡単に影付きのブロックが作成できます。 複数のCSSクラスは半角スペース区切り。

枠線付きのブロック

ブロックのメニュー>詳細>追加CSSクラス に、ボーダーを付ける「border」、パディングを付ける「p-3」を入力すると、 簡単にボーダー付きのブロックが作成できます。

角丸のブロック

ブロックのメニュー>詳細>追加CSSクラス に、「rounded」や「rounded-circle」を入力すると、 簡単に角丸や円形のブロックが作成できます。画像にも指定可能です。

テーブルブロックのオプション

ブロックのメニュー>詳細>追加CSSクラス に、「table-bordered」、「table-borderless」、「table-dark」、「table-hover」 などを入力すると、枠線あり/なし、ダークモード、ホバー対応のテーブルを作成できます。

Bootstrap4公式ドキュメント

上記は、まだまだほんの一例です 😉
使用可能なCSSクラスについて詳しくは下記をご覧ください。
https://getbootstrap.com/docs/4.1/getting-started/introduction/

デザインスキン&パーツ

簡単に使える無料のデザインスキン&パーツもあります 😉
LIQUID PRESS 無料デザインスキン&パーツ

開発状況の公開

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

関連記事

LIQUID PRESS

» 使い放題 » テーマ一覧

PageTop