ちゃんと使えば便利なブロックエディタ「Gutenberg」の使い方詳細

使い方

WordPress、バージョン5.0以降、新しいエディタGutenberg(グーテンベルク)がリリースされましたが、これまでのエディタに慣れていた方はとても使いにくく感じるかもしれません。

これまでのビジュアルエディタ上部にあったツールバーがブロックとなり、各ブロックを必要に応じて追加していく事で、編集をする形になるだけで、慣れれば便利ですし、簡単にボタンが挿入できたり、画像とテキストを横並びにレイアウト出来たりと、これまでにはコーディングでしか対応できなかったレイアウトも簡単に挿入できるようになっています。

 

使いこなすには新しい機能ブロック」に慣れる事です。

 

91765_01

 

クラシックエディタに戻したい場合は以下をご覧ください。

 

ルクセリタスをお使いの方は以下も参考にして下さい。

 

 

以前のエディタ「TinyMCE」で作成した記事は?

ブロックエディタで、「TinyMCE」で作成した記事を開くと、全体が「クラシックブロック」になっていて、ブロックで編集できません。ブロックを追加すると一番下に追加されるので「出来ない」というのは語弊がありますが、途中にブロックを挿入する為には、一度クラシックブロックを分解する感じ。

 

記事上のクラシックとなっている部分をクリックします。

クラシックブロックのツールバーが出るので、右上のメニューから

ブロックへ変換」を押すと、段落ごとに別のブロックに分離され、途中挿入なども可能になります。

 

ブロックエディタで見ると以前のビジュアルエディタのようにCSSなどがすべて反映された状態ではなく、デザインが崩れて見えるのがイヤな感じ。(環境によります)
実際の公開ページやプレビューではきちんと表示されます。

 

 

基本的な操作

ブロックの追加

ブロックの追加は、上部にある「+」マークまたは、記事内のカーソル行で出る「+」マークを押すとブロック一覧が展開します。

 

91765_02

 

ある程度使っていくと、「よく使うもの」の中に自身がよく使うブロックが出るので使いやすくなります。

  • よく使うもの
  • 一般ブロック
  • フォーマット
  • レイアウト
  • ウィジェット
  • 埋め込み

※そのほかに、テーマ独自のブロックがある場合もあります。

91765_03

 

 

ブロックの削除

削除したいブロックを選択し、上部メニューから「ブロックを削除」を押します。

91765_38

 

右サイドバーの表示・非表示

右上の設定マークを押す事で、表示・非表示の切替が可能です。

91765_14

 ↓

91765_15

 

ツールバー表示

編集中のブロックに対するツールバーを表示するには、右上の「ツールと設定をさらに表示」を押し、「トップツールバー」を選択すると表示されます。

91765_16

 

 

91765_12

 ↓

91765_13

 

コードを表示

ビジュアルエディタとコードエディタの切替えはメニューから行います。

91765_17

ビジュアルエディタ

91765_19
ビジュアルエディタ

コードエディタ

コードエディタを終了を押し、ビジュアルエディタへ戻れます。

91765_18
コードエディタ

 

要らないブロックを表示しない

右上メニューを開き「ブロックマネージャー」を選択します。

 

不要なもののチェックを外します。

 

ブロックの設定を保存して再利用する

同一設定・同一内容のブロックを複数の記事で利用する場合にはとても便利です。

再利用ブロックを挿入したブロック内容は、再利用ブロックの管理で編集を行った場合にも、すべての記事に反映されます。

 

対象のブロックを選択し、メニューから「再利用ブロックに追加」します。

 

使う時はブロックの追加から選択できます。

 

登録されているブロックが挿入されますが、設定だけでなく内容も含め登録したものがそのまま挿入されます。

 

設定だけを何度も利用したい場合

メニューから「通常のブロックへ変換」することで、編集可能になります。

 

通常ブロックに変換したものは、再利用ブロック内容が編集されても影響を受けません。

 

再利用ブロックの管理

右上のメニューから「すべての再利用ブロックを管理」を選択します。

 

一覧画面から、編集や新規追加も可能です。

 

ブロック要素

ブロック要素は5種類に分けられており、大まかな内容は以下の通りです。

一般ブロック

一般的な段落や見出しなどのブロック

フォーマット

テーブルやソースコード表示、カスタムHTMLなどフォーマットに関するブロック

レイアウト

ボタン挿入や画像とテキストの横並び表示、区切りや改ページなどのレイアウトに関するブロック

ウィジェット

ショートコードや、カテゴリー、アーカイブ、最新コメントなどワードプレスの標準ウィジェットを記事に埋め込むブロック

埋め込み

YouTube、Twitterなどを始めとする33種類の埋め込み用ブロック

 

 

ブロックの詳細

一般ブロック

91765_04

 

段落

91765_20

段落ボタンを押すと、Pタグが挿入されます。

<!-- wp:paragraph -->
<p>段落</p>
<!-- /wp:paragraph -->
通常の文章を書く場合は、このブロックになります。

段落を変えたい場合は、また「段落」ブロックを追加します。

 

見出し

91765_21

91765_11

 

見出しブロックを挿入すると以下のようなコードが挿入されます。

<!-- wp:heading -->
<h2>見出し</h2>
<!-- /wp:heading -->

 

画像

91765_22

91765_23

 

画像を入れた画面サンプル

91765_24

コードは以下のようになっています。

<!-- wp:image {"id":3592} -->
<figure class="wp-block-image"><img src="http://XXXXXX/XXX.png" alt="" class="wp-image-3592"/></figure>
<!-- /wp:image -->

 

ギャラリー

91765_25 91765_26

 

91765_28

以前のエディタからギャラリーを挿入する際に編集画面の右側にあった以下の部分が設定できる場所がなくなっています。

91765_27

 

ギャラリー挿入後、エディタ画面の右側で、上記の項目が編集可能になっています。

91765_29

 

リスト

91765_31

91765_30

コードは以下の通り

<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->

 

引用

91765_32

91765_37

コードは以下の通り <p>タグ付きで入っていました。

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>テスト</p></blockquote>
<!-- /wp:quote -->

 

音声

91765_33

91765_39

 

コードは以下の通り

<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls></audio></figure>
<!-- /wp:audio -->

 

カバー

91765_34

91765_40

コードは以下の通り

<!-- wp:cover -->
<div class="wp-block-cover has-background-dim"><div class="wp-block-cover__inner-container"></div></div>
<!-- /wp:cover -->

 

ファイル

91765_35

91765_42

ファイルを設定し、ボタンのテキストを編集できます。

91765_43

 

ダウンロードファイルの際は、ボタンをダウンロードなどとすれば簡単にダウンロードファイルの設定が出来ます。

91765_43

 

コードは以下の通り

<!-- wp:file {"id":3746,"href":"http://XXXX/XXXX.zip"} -->
<div class="wp-block-file"><a href="http://XXXX/XXXX.zip">XXXX.zip</a><a href="http://XXXX/XXXX.zip" class="wp-block-file__button" download>テキスト</a></div>
<!-- /wp:file -->

 

動画

91765_36

91765_41

コードは以下の通り

<!-- wp:video -->
<figure class="wp-block-video"></figure>
<!-- /wp:video -->

 

フォーマット

91765_05

クラシック

91765_45

91765_44

クラシックエディタの画面をブロックとして挿入する事ができ、その枠の中で以前のように編集をする事が可能です。

 

ソースコード

91765_46

91765_52

シンタックスハイライターなどを使わなくても、ソースコードを簡単に入力し、そのまま表示する事ができます。

 

カスタムHTML

91765_47

91765_53

コードエディタに切り替えなくても、カスタムHTMLブロック内に直接HTMLを記述する事ができます。

 

整形済み

91765_48

91765_54

コードは以下の通り <pre>タグが挿入されます。

<!-- wp:preformatted -->
<pre class="wp-block-preformatted"></pre>
<!-- /wp:preformatted -->

 

プルクオート

91765_49

91765_55

引用(<blockquate>タグ)を横ラインで区切った形で表示されます。

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p></p></blockquote></figure>
<!-- /wp:pullquote -->

 

テーブル

91765_50

91765_56

列数・行数を指定し「生成」ボタンを押すとテーブルが挿入されます。

91765_57

上部のメニューから列や行の追加や削除も簡単に行えます。

91765_58

 

91765_51

91765_59

ちょっとこれは不明です。タグは<pre>なので、整形テキスト形式。使い道あるのかな?

<!-- wp:verse -->
<pre class="wp-block-verse"></pre>
<!-- /wp:verse -->

 

レイアウト要素

91765_06

 

ボタン

91765_61

91765_60

ボタンリンクも簡単に挿入できます。

コードは以下の通り

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link"></a></div>
<!-- /wp:button -->

 

カラム

91765_62

91765_68

91765_69

横並びのカラムを挿入できます。

コードは以下の通り

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>B</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

 

メディアと文章

91765_63

91765_70 91765_71

画像と説明文などのテキストを横並びで表示できます。

コードは以下の通り

<!-- wp:media-text {"mediaId":3618,"mediaType":"image"} -->
<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http:/XXXXX/XXXX.jpg" alt="" class="wp-image-3618"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">テストです</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

 

続きを読む

91765_64

91765_72

文字の部分は好きなように編集可能です。

コードは以下の通りです。

<!-- wp:more {"customText":"続きを読む"} -->
<!--more 続きを読む-->
<!-- /wp:more -->

 

改ページ

91765_65

91765_73

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

 

区切り

91765_66

91765_74

<hr>タグが挿入されます。

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

 

スペーサー

91765_67

91765_75

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

 

ウィジェット

91765_07

ショートコード

91765_79

91765_76

 

アーカイブ

91765_80

 

91765_78

 

カレンダー

91765_81

91765_77

 

カテゴリー

91765_82    91765_92

 

最新のコメント

91765_83

 

最新の記事

91765_84

91765_88

RSS

91765_85

91765_90

検索

91765_86

91765_89

 

タグクラウド

91765_87

91765_91

 

埋め込み

それぞれの埋め込みはURLアドレスを入れる事で可能です。

91765_93

 

 

使い方

Posted by 綾糸