新しいエディターGutenberg

WordPressの新しいエディタとTinyMCE の設定で使い易くする


スポンサーリンク

WordPressの新しいエディター Gutenberg (Block Editor)

新しいエディター、使ってみれば思っていたよりも使いやすいかも?旧エディターに戻す方法もありますが、今後のことを考えると、新しいエディターに慣れておいた方がいいかも?!

WordPressの新しいエディター Gutenberg (グーデンベルグ)は、ブロック毎に分け投稿できます。

スポンサーリンク

新しいエディターの使いにくい点

古いエディター(クラシックエディター)から変わって、まず感じた使いにくい点は次の3点ですが、
使い方に慣れたら、この3点は克服できそうです。

  • 作表のセル内のヘッダーの指定・文字色の変更など
  • ブロックの移動が面倒
  • クラシックエディターのツールバーが使いにくい

作表(テーブル)のヘッダー・文字色などの変更方法

クラシックエディターの方がセル内のヘッダー指定や文字の変更が簡単です。

これは新しいエディターで作表したものです。

スタイルヘッダー
文字の色

このまま利用すると、表中の文字の色の変更は簡単にはできませんが、新しいエディターでも設定を変えると文字の色の変更は簡単にできるようになります。(下記参照 TinyMCE の設定)

ヘッダーセルにする場合は、詳細設定でHTML編集に変え、ヘッダーにしたいセルの<td>を<th>に書き換えます。

これはクラシックエディターで作表したものです。

スタイル ヘッダー
文字の色

ヘッダーの指定、文字の色の変更も簡単でした。

ブロックの移動の仕方

使い始めはブロックの移動が面倒に感じましたが、これも慣れると使いやすくなります。

ブロックの移動は2つ以上のブロックを同時に移動させることもできます。移動させたいブロックを選択(カーソルで反転させる)し、下または上を選びます。

新しいエディターGutenberg

クラシックエディターのツールバーとスクロールバー

クラシックエディターを選択するとツールバーが表示され、それを利用して記事を書くことができます。(ツールバーの設定・ボタンの追加などは下記を参照

設定を表示させている時は、2本のスクロールバーが表示されます。外側のスクロールバーが設定用のスクロールバーで内側がエディターのスクロールバーです。

クラシックエディターを使う時は、設定のスクロールバーを一番上にして利用すると使いやすいです。

新しいエディターの利点

メディアの挿入・並べ替え・スタイルの設定が簡単になり、直感的に操作できます。

次のことが簡単にできるようになりました。

  1. 文章の途中に余白を入れる
  2. 文章の途中を2分割(カラム)以上にする
  3. 写真を横並びにする
  4. リンクボタンを設置する
  5. ダウンロードボタンを設置する
  6. 2ページ以上にする(改ページ)

1.文章の途中に余白を入れる

レイアウト要素スペーサーを選択し、好きな大きさの余白を入れることができます。

  1. レイアウト要素のスペーサーを選択する
  2. 好きな大きさまで青い丸を広げる

2.ブロック毎にレイアウトを変更する

記事の中の一部を分割したり、余白を入れたり、ブロック毎にレイアウトを変更できます。

本文の途中を4カラムに分割する

  1. レイアウト要素のカラムを選ぶ
  2. 1つのブロックを2つのブロックに分かれる
  3. +でブロック内のレイアウトなどを指定する

画像は、2カラムを更に2カラムして、4カラムにしています。

4カラムにしてみました。文章でもメディアでもリンクでも挿入することができます。

3.新しいエディターの写真の投稿が簡単

新しいエディター Block Editor(Gutenberg)は、メディアコンテンツの挿入がとても簡単です。

投稿画面の右上の設定(歯車のアイコン)をクリックすると、サイドバーツールが表示され、文書や各ブロック毎の細かい設定ができます。

ギャラリーで写真を横並びに投稿する

  1. 一般ブロックでギャラリーを選択する
  2. 掲載したい写真をアップロードまたは複数選ぶ
  3. ギャラリー作成をクリック
  4. 投稿画面の左側でカスタムする
新しいエディターGutenberg
並べる画像の数は変更できます。

画像(メディア)の横に文章を入れる

レイアウト要素ブロックメディアと文章を選択すると次のように投稿できます。

メディアの位置を左右変更することができます。

画像にタイトルを入れる

一般ブロックカバーを選択すると次のような投稿ができます。

新しいエディターGutenberg
画像の上にタイトルを入力できます。

4.ボタンの設置が簡単

ファイルをダウンロードするボタンやリンクのボタンを簡単に設置できます。

ボタンを設置する

レイアウト要素でボタンを選択すれば、ボタンを設置できます。ボタンの名前、リンクするURLを入力します。ボタンの色や形、文字の色は変更できます。

新しいエディターGutenberg
ボタンの色やスタイルを変更できます。

5.ファイルを表示するボタンをつける

  1. 一般ブロックのファイルを選択する
  2. ファイルをアップロードまたは選ぶ
  3. 選択をクリック

↓次のように表示されます。ファイル名を参照にしました。文字色などの変更ができます。

6.改ページの設置が簡単

レイアウト要素から改ページを選ぶだけです。

Classic Editor(クラシックエディター)

Classic Editor のサポートは2021年末までとのこと。まだ先ですし、
Block Editor(Gutenberg)も変わっていくと思いますが、新しいエディターの投稿に慣れた方がよさそうです。

現在、Classic Editor を併用していますが、自分なりの使い方を会得した方もいらっしゃると思います。

Block Editor(Gutenberg)とTinyMCE

設定→TinyMCE Advanced で古いエディター( Classic Editor)と新しいエディター( Block Editor)の設定ができます。

エディターの設定( TinyMCE Advanced )

Block Editor(Gutenberg) とClassic Editor(TinyMCE)のタブがあります。Block Editor(Gutenberg) の設定をします。

ブロックエディタのツールバー

メインのツールバーの他に利用したいボタンがある場合、代替サイドツールバーに表示させます。


新しいエディターGutenberg

下線を追加しました。編集ページのサイドバーのFormattingに追加されてます。

サイドツールバー

設定ボタンをクリックすると、編集ページにサイドツールバーが表示され、そこに追加したボタンやテキストの色・背景色の指定ができます。

Text Color

テキストの色・背景色を指定するツールバーを追加したい場合は、「はい」にチェックを入れます。


新しいエディターGutenberg

Classicブロックのクラシックエディターの設定

クラシックブロックのツールバーは幅が狭いので重要なボタンだけを追加して下さいとのこと。エディタメニューを有効にしますにチェックを入れることを推奨しています。

必要なボタンだけを追加します。

新しいエディターGutenberg

取消ボタンと下線を追加しました。

ブロックの色指定とText Colorの違い

ブロックの色指定はテーブルやリストでは表示されません。テーブル内やリストで文字色・背景色を変えたい場合はText Colorの追加設定をしておきます。

ブロックの色指定の場合

文字色→aaaaabbbcccc

背景色 aaaabbb

Text Colorで指定した場合

文章の一部だけの色の変更が可能です。

Text Color →aaaabbbbbccccccddddddeeeeee


background color aaaabbbbbbbb


About ゆきを

ジャンルに拘らずに、好きなことを書いてます。 趣味であったり、覚書きであったりします。 むずかしい言葉を使わず、流行りの言葉を使わないように書いてます。