サイト作成ソフト

WordPressエディタ「Gutenberg」の使い方　総まとめ

全体の変更を行う⋮（３点リーダ）

クリックすると以下のようなメニューが現れます。
ただし以下の場合 Classic Editor と Jetpack by WordPress.com のプラグインをインストールしてある状態になります。

表示メニュー

トップツールバー

トップツールバーをオフにした状態だと記事内のブロックに一々ツールバーが表示されます。
以下のような感じです。

しかしチェックを入れるとトップツールバーの表示が上にあるブロック・文書ツールの横に表示されます。

一々ブロックのところに表示されると煩わしい、と感じられる場合はチェックを入れておくことをおすすめします。

スポットライトモード

これを指定しておくと、フォーカスしているブロック以外が半分消えたようになります。
例えば先程のトップツールバーと言う見出しブロックに焦点を当てた場合、
それ以外のコンテンツは灰色になって薄くなっています。

フルスクリーンモード

これは記事を書くのとは関係ないWordPressの左側のメニューなどを見えないようにするというもの。
気になればチェック、というところです。

エディタメニュー

これは旧エディタにおける「ビジュアル」と「テキスト」の切り替えです。
新エディタにはカスタムHTMLというブロックがあり。
また追加のCSSもビジュアルエディタのままで挿入することができます。
なので「ビジュアル」のままでもHTMLを扱えますが、「Gutenberg」の欠点というか。
次々にブロックが生成されて。
ビジュアルモードだとよくわかりませんが、コードエディタにすると使わなかったブロックが溜まっていますので。
削除する必要があります。
わたしは記事を書いたら最後にコードエディタにして、不要なブロックを削除するようにしています。

プラグイン

旧エディタで扱える「クラッシック」と「Classic Paragraph」というブロックが装備されており。
ほぼ旧エディタと同じような間隔で作業ができますが、一番の問題は旧エディタで使うことができたプラグインで使えなくなっている物があるということです。
どうしても使いたい場合には完全に旧エディタに戻す必要があります。

旧エディタを使うためには以下のプラグインをインストールし、有効化する必要があります。

そうすると「Gutenberg」のプラグインのところに

のように出てきますので。
「クラッシックエディターに切り替え」をクリックすると旧エディタに切り替わります。

旧エディタから「Gutenberg」に戻すには旧エディタの右側に以下のような表示があります。

トップツールバーにある⋮（３点リーダ）メニュー

それぞれにブロックにあるトップツールバーの右端にある⋮をクリックすると以下のようなメニューが出てきます。

ブロック設定の非表示

ブロック設定を非表示にすると様々なブロックの動きが止まります。
なので私個人の感想では、作業がしやすくなります。

新エディタが使いづらいという方の中にはブロックが勝手に出てきたりして面倒くさいという方がいると思いますが。
ブロック設定を非表示にするだけでかなり使いやすくなります。

ただし非表示にすると右側にある様々な設定項目も消えてしまいますので。
色を付けたりテキスト設定をしたい場合はコンテンツを入れ終わったら非表示を解除します。

前に挿入・後ろに挿入

ここをクリックするかショートカットキーで指定するとブロックを前や後ろに指定することができます。
ただそれだけです^^;

HTMLとして編集

これはとても便利です。
HTMLとして編集をクリックするとHTMLで書き込めるようになり、
かつブラウザ表示では正常に記事のコンテンツになります。

<h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  	<h2>インコの種類</h2>
  	<p>インコには沢山の種類がありますが、一番お手軽なのは<span>セキセイインコ        </span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </body >

これを「HTMLとして編集」として書き込んだだけで以下のようになります。