Gutenbergの基本的な使い方
Gutenberg（グーテンベルク）は、WordPress 5.0 から搭載されたビジュアルエディターです。
従来のエディターはクラシックエディターと呼ばれるようになりました。
クラシックエディターはプラグインでインストールすれば使えますが、Gutenbergに切り替える事をおすすめします。
今年に入り私はレッスンもGutenbergで行うようになりました。
目次
なぜGutenbergになれたほうがいいのでしょう。
クラシックエディターはいずれ廃止になりますし、Gutenbegはスマホ対応のレイアウトが組みやすいからです。
例えばパソコンで見たとき画像や文章が３つ横並びで並べたいが、スマホで見たときは１列にしたい時などカラムを利用する事によって簡単にレイアウトできます。
・Gutenbergに対応していないテンプレートの場合は使えない機能もあります。
Gutenbergでは、「ブロック」という機能によって、見出し、文章、画像などの要素を組み合わせて作成します。
まず全体のレイアウントを把握してください。
簡単な入力を見ていきましょう。
- タイトル入力
- 見出しを入れる
- 本文（段落）入力
- 写真を複数枚入れる
- リンクを設定する
タイトルを入力
タイトルを入力した後パーマリンクを変えて英数字のページ名などに変える事ができます。
見出しを入れる
タイトルの重要度によってh1からh6まで指定できます。
中見出し、小見出しという事です。
本文（段落）を入力する
文字を入力していきます。
Enterキーを押すと段落が変わりますので同じ段落内として改行する場合はShiftキー+Enterキーを押してください。
最近のMacでは、ただの上矢印の記号（⇧）になっていたりします。
(こちらはクラシックエディターからの基本中の基本になりますのでおさえてください)
写真を複数枚入れる
レイアウント要素のカラム（段組）を入れます。
初期設定は2列ですが、右側ブロック設定の中に何列にするか設定画面があります。
それぞれ+ハンドルから画像を入れていきます。
それぞれに画像や、キャプションで文章を入れる事ができます。
幅広、全幅を選択することができます。
幅広：通常ブロックより少し幅が広く表示されます。
全幅：画面幅いっぱいに表示されます
段落内でリンクを設定
こちらはクラシックエディターから同じアイコンのスタイルなので探していただければ見つけられるのではないかと思いますがクサリのようなアイコンでリンクを設定します。
リンク先を入れてEnterキーを押すなど少しコツがいります。
ブロックの上下の移動や削除
ブロックの移動、並び替えも矢印で簡単に入れ替える事ができます。
削除する場合は各ブロックの左側ハンドルから上に詳細設定アイコンが出ますのでその中のブロックを削除で削除できます。
その他にもいろいろな事ができますのでテストページを作り様々なブロックを入れて文書・ブロック設定を触って見られることをおすすめいたします。
またプラグイン SnowMonkeyBlocks を入れると
四角でない背景や画像背景のボタン、Q&Aなどさらに違ったブロックが入れられて表現の幅が広がりますので使えるかテストしてみてください。
リストサンプル
- リストサンプルです。
- リストサンプルです。
- リストサンプルです。
メディアと文章サンプル
ルーム
テストです。
テーブルサンプル
ボタンサンプル
クラシックエディターに慣れていている方でどうもGutenbergの段落ブロック内の一部のみの文字サイズや文字色、背景色を変えたかったり下線（アンダーライン）が入れられないのが不便だなと感じられたら、
クラシックエディター時代からの有名なプラグインTinyMCE Advancedを入れれば大丈夫だと思います。
またテンプレートが対応していないと デフォルトのままではブロック領域を超える幅の画像配置の指定（幅広・全幅）はでないのでfunctions.phpに以下を書くことによって有効化、ボタンが出ます。
add_theme_support( 'align-wide' );
