新しいエディター、使ってみれば思っていたよりも使いやすいかも?旧エディターに戻す方法もありますが、今後のことを考えると、新しいエディターに慣れておいた方がいいかも?!
WordPressの新しいエディター Gutenberg (グーデンベルグ)は、ブロック毎に分け投稿できます。
古いエディター(クラシックエディター)から変わって、まず感じた使いにくい点は次の3点ですが、
使い方に慣れたら、この3点は克服できそうです。
クラシックエディターの方がセル内のヘッダー指定や文字の変更が簡単です。
スタイル | ヘッダー |
文字の色 | 赤 |
このまま利用すると、表中の文字の色の変更は簡単にはできませんが、新しいエディターでも設定を変えると文字の色の変更は簡単にできるようになります。(下記参照 TinyMCE の設定)
ヘッダーセルにする場合は、詳細設定でHTML編集に変え、ヘッダーにしたいセルの<td>を<th>に書き換えます。
スタイル | ヘッダー |
---|---|
文字の色 | 赤 |
ヘッダーの指定、文字の色の変更も簡単でした。
使い始めはブロックの移動が面倒に感じましたが、これも慣れると使いやすくなります。
ブロックの移動は2つ以上のブロックを同時に移動させることもできます。移動させたいブロックを選択(カーソルで反転させる)し、下または上を選びます。
クラシックエディターを選択するとツールバーが表示され、それを利用して記事を書くことができます。(ツールバーの設定・ボタンの追加などは下記を参照)
設定を表示させている時は、2本のスクロールバーが表示されます。外側のスクロールバーが設定用のスクロールバーで内側がエディターのスクロールバーです。
クラシックエディターを使う時は、設定のスクロールバーを一番上にして利用すると使いやすいです。
メディアの挿入・並べ替え・スタイルの設定が簡単になり、直感的に操作できます。
次のことが簡単にできるようになりました。
レイアウト要素でスペーサーを選択し、好きな大きさの余白を入れることができます。
記事の中の一部を分割したり、余白を入れたり、ブロック毎にレイアウトを変更できます。
画像は、2カラムを更に2カラムして、4カラムにしています。
新しいエディター Block Editor(Gutenberg)は、メディアコンテンツの挿入がとても簡単です。
投稿画面の右上の設定(歯車のアイコン)をクリックすると、サイドバーツールが表示され、文書や各ブロック毎の細かい設定ができます。
レイアウト要素ブロックでメディアと文章を選択すると次のように投稿できます。
一般ブロックでカバーを選択すると次のような投稿ができます。
ファイルをダウンロードするボタンやリンクのボタンを簡単に設置できます。
レイアウト要素でボタンを選択すれば、ボタンを設置できます。ボタンの名前、リンクするURLを入力します。ボタンの色や形、文字の色は変更できます。
↓次のように表示されます。ファイル名を参照にしました。文字色などの変更ができます。
レイアウト要素から改ページを選ぶだけです。
Classic Editor のサポートは2021年末までとのこと。まだ先ですし、
Block Editor(Gutenberg)も変わっていくと思いますが、新しいエディターの投稿に慣れた方がよさそうです。
現在、Classic Editor を併用していますが、自分なりの使い方を会得した方もいらっしゃると思います。
設定→TinyMCE Advanced で古いエディター( Classic Editor)と新しいエディター( Block Editor)の設定ができます。
Block Editor(Gutenberg) とClassic Editor(TinyMCE)のタブがあります。Block Editor(Gutenberg) の設定をします。
メインのツールバーの他に利用したいボタンがある場合、代替サイドツールバーに表示させます。
下線を追加しました。編集ページのサイドバーのFormattingに追加されてます。
設定ボタンをクリックすると、編集ページにサイドツールバーが表示され、そこに追加したボタンやテキストの色・背景色の指定ができます。
テキストの色・背景色を指定するツールバーを追加したい場合は、「はい」にチェックを入れます。
クラシックブロックのツールバーは幅が狭いので重要なボタンだけを追加して下さいとのこと。エディタメニューを有効にしますにチェックを入れることを推奨しています。
必要なボタンだけを追加します。
取消ボタンと下線を追加しました。
ブロックの色指定はテーブルやリストでは表示されません。テーブル内やリストで文字色・背景色を変えたい場合はText Colorの追加設定をしておきます。
文字色→aaaaabbbcccc
背景色 aaaabbb
文章の一部だけの色の変更が可能です。
Text Color →aaaabbbbbccccccddddddeeeeee
background color →aaaabbbbbbbb
This post was last modified on 11/04/2019 2:04 PM