Gutenberg とTinyMCE の便利な設定と高度な設定

Gutenbergの設定
WordPress
Advertisements

Gutenberg とTinyMCE の設定

前回はメインツールバーのエディタ、サイドツールバーのエディタ、Classic Paragraphとクラシックエディタに機能を追加する方法を記載しましたが、その他の設定について記載します。

前回

GutenbergとTinyMCE Advanced の設定
プラグインのインスト…

今回は画像の部分、英字の部分の設定について記載しておきます。

Gutenberg エディタの設定
Gutenberg とTinyMCE Advanced の設定

この部分の説明を細かくしていきます。

1.Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.

デフォルトはチェックが入っています。 ボタンが追加された場合、Classic Paragraph とクラシックボックスの一番上にボタンが追加されます。

2.リストスタイルオプション

リンクスタイルが追加されます。

白丸、黒丸、四角、順序付きリストの先頭記号に英大文字や小文字、順序なしリストの先頭記号に黒丸や四角、ラテン文字、ギリシャ文字、ローマ数字文字などが利用できます。

ドロップダウンメニュー

ドロップダウンメニューを開くと画像のようにリストのスタイルを選べます。

Gutenbergの設定
Gutenbergの設定 リスト

3.コンテキストメニュー

右クリックでコンテキストメニューが表示されます。

チェックを入れない場合

右クリックすると、特別なツールの追加はありません。

Gutenbergの設定
チェックを入れない場合の右クリック

チェックを入れた場合

右クリックでリンクや表の指示などできるようになります。

Gutenbergの設定
Gutenbergの設定 右クリック

4.代替リンクダイアログ

リンクボタンまたはリンクメニューのクリックでTinyMCEのダイアログが開きます。

チェックを入れなかった場合

Gutenbergの設定
Gutenbergの設定 通常のリンク

チェックを入れた場合

TinyMCEのリンクダイアログが開きます。

Gutenbergの設定
Gutenbergの設定 リンク

5.フォントサイズ

Classic Paragraph とクラシックボックスで、フォントサイズを8px~ 96pxまで簡単に指定できます。

チェックを入れた場合

Gutenbergの設定
Gutenbergの設定 フォント

段落<p>ブロックのフォントのサイズの指定

Gutenbergの設定
Gutenbergの設定 フォントのサイズの指定
Advertisements

Gutenberg とTinyMCE の高度なオプション

Gutenberg とTinyMCE の高度なオプションについて記載します。

1.Add Classic Paragraph block

Classic Paragraph ブロックを追加するか否かです。

Classic Paragraph とクラシックブロックは少し違い、クラシックブロックではできないことがあります。

Classic Paragraph とクラシックブロックの違いと便利な使い方
GutenbergW…

2. Make the Classic Paragraph or Classic block the default block

Classic Paragraph とクラシックブロックをでデフォルトのブロックにする場合にチェックを入れます。デフォルトとは、タイトルでEnterキーを押すと Classic Paragraph が挿入されます。

3.Replace the Block Editor with the Classic Editor

古いエディタ、投稿画面になります。

古い投稿画面

Gutenbergの設定
Gutenbergで旧投稿画面に設定した場合

4.Keep paragraph tags in the Classic block and the Classic Editor

段落タグ<p>タグと<br>タグを削除せず保持します。次の注意点が記載されています。

まれに予想できない振る舞いをするため、常用前に充分テストを行ってください。

Gutenberg とTinyMCE のテーブルオプション

1.Enable resizing of tables, rows, and columns by dragging with the mouse

デフォルトではチェックが入っています。マウスでドラッグすることによりテーブルの行や列のサイズが変更されます。

チェックを入れた場合

画像は縦の線をドラッグして列の幅を変えます。

Gutenbergの設定
Gutenbergの設定 表

2.When inserting a table set the HTML border attribute to 1

テーマによって上書きされない限り、border属性が1に設定され、テーブルの周囲に境界線が追加されます。

3.When inserting a table show a grid・・

デフォルトではチェックが入っています。 テーブル作成の時にグリッドが表示されます。無効になっている場合は、[テーブルの挿入]ダイアログで行数と列数を入力できます。

チェックを入れた場合

Gutenbergの設定
Gutenbergの設定 テーブル

4. Jump to the next cell when pressing the tab key while editing a table

デフォルトではチェックが入っています。Tabキーを押すと次のセルにジャンプできます。

5.Show the advanced tabs in the table properties dialogs

デフォルトではチェックが入っています。テーブルのプロパティ、セルのプロパティ、行のプロパティで高度な設定タブが表示され、背景色や枠線の色などの指定ができます。

TinyMCE 高度な設定
TinyMCE 高度な設定

Gutenberg の便利な利用法

自分でブロックを作ってBlock Editorの一覧に追加できる再利用ブロックというツールがあります。同じパターンを使いまわす時に便利です。

再利用ブロック Gutenbergの便利な利用法
再利用ブロックGut…
   
   
   

 

 

 

 

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