配信とインテリアの実話映画
WordPressを簡単に
Morning&Lunch
PCとスマホとゲーム
配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

WordPressを簡単に
WordPressを簡単に

WordPress

Morning&Lunch
Morning&Lunch

モーニング&ランチ

PCとスマホとゲーム
PCとスマホとゲーム

webNote

previous arrow
next arrow
 
Shadow

WordPressの新しいエディタとTinyMCE(Advanced Editor Tools) の設定

Block Editor WordPressの書庫
Block Editor

この記事は古い内容です。

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

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

追記

TinyMCEは、Advanced Editor Toolsに名前が変わっています。

WordPressは日々進化しています。WordPressのアップデートにより、エディター Gutenbergは使いやすくなってます。

https://wordpress.vogue.tokyo/block-editor-n
  • 作表のヘッダーの指定と文字色の変更はエディター Gutenbergでもできるようになりました。
  • Gutenbergはブロックのコピーも複製も移動も簡単です。

ブログもシンプルになってきていますし。今後 Advanced Editor Tools は不要になるかもしれません。

WordPressのエディタGutenberg (Block Editor)の簡単で便利な使い方 - WordPress を簡単に
目次 WordPressのエディター G...

Advanced Editor Tools をインストールせずにできること

  • 選択した文字の色の変更
  • 段落やリストで文字のサイズや色と背景色の変更
  • テーブル(表)の文字の色や背景色の変更
  • テーブル(表)の幅を固定できる
  • テーブル(表)のヘッダーやフッターを指定できる
  • アンカーを付ける
  • CSSの追加でスタイルを変更できる

Advanced Editor Tools のインストールで増える機能

  • 選択した文字の背景だけ変更できる
  • 簡単に書式を削除できる

ほぼ、Advanced Editor Tools がなくても利用できます。

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

使いにくい点はアップデートにより改善されています。

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

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

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

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

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

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

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

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

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

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

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

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) の設定をします。

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

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


Block Editor
Block Editor

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

サイドツールバー

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

Text Color

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


Block Editor
Block Editor

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

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

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

Block Editor
Block Editor

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

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

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

ブロックの色指定の場合

文字色→aaaaabbbcccc

背景色 aaaabbb

Text Colorで指定した場合

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

Text Color →aaaabbbbbccccccddddddeeeeee


background color aaaabbbbbbbb

タイトルとURLをコピーしました