Gutenberg

Gutenberg「Classic paragraphブロック」の使い方

投稿日:

WordPress5.0系のエディター「Gutenberg」は、ブロックを組み合わせて投稿を作成するようになっていて、旧式のクラシックエディターとは使い方が大きく変わりました。

しかし、「Classic Paragraph」というブロックを使うと、クラシックエディターで利用していた「TinyMCE Advanced」のエディターを使用することができ、4.0系のエディターと同じような使い方をすることも可能になります。

とは言え、「Classic Paragraphブロック」とは何か、どうやって使うのか、はじめはよく分からないこともあるのではないでしょうか。

そこで、ここでは「Classic Paragraphブロック」の使い方について説明します。

 

「Classic Paragraphブロック」とは?

まずはじめに、「Classic Paragraphブロック」がどんなものか簡単に説明します。

「Classic Paragraph」は、「Gutenberg」で使用できるブロックの一つで、プラグイン「『TinyMCE Advanced』をインストール」していて、なおかつ「Classic Paragraphブロックを使用する設定をしている」場合に使うことができます。

このブロックを使うと、WordPressの4.0系のクラシックエディターで利用していた「TinyMCE Advanced」のエディターを使った文章の作成や編集が可能になります。

 

「Classic Paragraphブロック」の使い方

では、「Classic Paragraphブロック」はどのように使うのかを説明します。

「Classic Paragraphブロック」を使いたい時には、「ブロックの追加」ボタン(プラスマークのボタン)をクリックし、「Classic Paragraph」を選択します。

すると、以下の画像のように、投稿画面のエディターの中に「TinyMCE Advanced」のエディターが現れます。

「TinyMCE Advanced」のエディター

見て分かる通り、旧式のクラシックエディターで使っていたのと同じ「TinyMCE Advanced」のエディター画面です。

「Gutenberg」は、「見出し」「段落」「画像」「テーブル」などをブロックとして、一つひとつを組み合わせて投稿を作成するようになっていますが、「Classic Paragraphブロック」を使えば、「TinyMCE Advanced」のエディターの中で見出しや画像を入れるなどの作業ができるので、クラシックエディターとほぼ同じ操作で投稿の文章を作成することが可能です。

なので、ブロックエディターの操作になれない場合には、まずは「Classic Paragraph」を使って投稿を作成しながら、次第に他のブロックの使い方に慣れていくということもできます。

こちらの記事も併せてどうぞ

WordPress新エディター「Gutenberg」の使い方

WordPressが5.0系にバージョンアップしてから、エディターの仕様が大きく変わりました。 プラグインを使えば、今までと同じクラシックエディターで投稿を作成することもできますが、ずっとクラシックエ ...

続きを見る

 

「Classic Paragraphブロック」を使うために必要な設定

次に、「Classic Paragraphブロック」を使うための設定について説明します。

「Classic Paragraphブロック」を使うためには、以下の作業が必要です。

  1. 「TinyMCE Advanced」をインストールして「有効化」する
  2. 「TinyMCE Advanced」の設定画面で「Add Classic Paragraph block」(Classic Paragraphブロックを追加する)にチェックが入っていることを確認する
  3. エディターを使いやすくするためにその他必要な設定をする

①プラグインのインストール・有効化の手順はここでは省略して、②③の詳しい操作については次の項目で詳しく説明します。

 

「Classic Paragraphブロック」を追加するための設定手順

では、まず②の「Classic Paragraphブロックを追加する」ための設定手順について説明します。

ここで行う作業は、以下のとおりです。

  1. WordPress管理画面で「TinyMCE Advanced」の設定画面を表示する
  2. 「Block Editor(Gutenberg)」タブの「Add Classic Paragraph block」にチェックが入っていることを確認する
  3. 「変更を保存」をクリックして、設定内容を保存する

具体的には、まずWordPress管理画面の「設定」をクリックし、その中にあるメニューの「TinyMCE Advanced」を選択します。

そして、以下の画像のような「エディター設定」という画面になったら、「Block Editor(Gutenberg)」というタブが選択されていることを確認します。

「TinyMCE Advanced」のエディター設定画面

そして、「Block Editor(Gutenberg)」タブの画面を少し下にスクロールすると、「高度なオプション」という項目があります。

「TinyMCE Advanced」の高度なオプションの設定画面

「高度なオプション」の一番上にある「Add Classic Paragraph block」にチェックが入っていれば、「Classic Paragraphブロック」を使うことができます。

デフォルトではチェックが入った状態になっているので、何もしなくても使えるはずですが、もし「Classic Paragraphブロック」が選択できないようであれば、ここにチェックが入っているかどうかを確認してみることをおすすめします。

なお、この設定ができていれば「Classic Paragraph」を使用することはできますが、より使いやすいようにエディターのカスタマイズができる設定があるので、その手順について以下の項目で説明します。

 

エディターのツールバーでメニューを表示・非表示にするための設定方法

次に「Classic Paragraphブロック」で追加したエディターのツールバーに表示するメニューを表示もしくは非表示にするための設定方法について見ていきます。

「TinyMCE Advanced」のエディターには、上部のツールバーに文字の装飾などするためのメニューやボタンが表示されます。

デフォルトでは、ツールバーの一番上に「ファイル」「編集」「表示」などのメニューを表示するようになっていますが、これらのメニューを表示せずに以下のような状態で使用することも可能です。

「TinyMCE Advanced」のエディターメニューを非表示にした時の画面ツールバーでメニューを非表示にする場合には、以下の設定を行います。

  1. WordPress管理画面で「TinyMCE Advanced」の設定画面を表示する
  2. 「Block Editor(Gutenberg)」タブの「Enable the editor menu(recommended)」のチェックを外す
  3. 「変更を保存」をクリックして、設定内容を保存する

つまり、以下の画像のように、デフォルトでは「Enable the editor menu(recommended)」にチェックが入っているので、もしメニューを表示する必要がない場合には、チェックボックスのチェックを外します。

「TinyMCE Advanced」でエディターメニューを使用するための設定画面

逆に、メニューを使いたいけれど表示されていないという時には、ここにチェックが入っているかどうかを確認すると良いです。

 

ツールバーに表示するボタンをカスタマイズする

次に、「Classic Paragraphブロック」のツールバーに表示するボタンをカスタマイズする方法を説明します。

「TinyMCE Advanced」エディターのツールバーには、文字の装飾をしたり、テーブルや画像を挿入したりするためのボタンが表示されますが、このボタンは自分でカスタマイズすることが可能です。

ボタンをカスタマイズする時には、以下の設定を行います。

  1. WordPress管理画面から「TinyMCE Advanced」の設定画面を表示する
  2. 「Block Editor(Gutenberg)」タブ「Toolbars for the Classic Paragraph and Classic blocks」の下に表示されているボタンから、使用したいものをドラッグアンドドロップして、ツールバーの中に移動する
  3. 使用しないボタンがツールバーの中にある場合には、ドラッグ・アンド・ドロップして、ツールバーの外に出す
  4. 「変更を保存」をクリックして、設定内容を保存する

詳しく説明すると、まず「TinyMCE Advanced」の設定画面には、以下のように文書の編集に使うボタンが一覧で表示されています。

「TinyMCE Advanced」でツールバーに表示するボタンを選択する時の画面

これらのボタンはドラッグアンドドロップで移動することが可能なので、「使用したいものを選んでドラッグアンドドロップでツールバーの中に移す」、逆に「ツールバーの中にあるアイコンを下にドラッグアンドドロップする」、という作業でアイコンのカスタマイズをすることができます。

 

「Classic Paragraphブロック」をデフォルトのブロックにする

次に、「Classic Paragraphブロック」をデフォルトのブロックとして使うための設定方法を見ていきます。

「Gutenberg」は、投稿の新規作成・編集画面で、「タイトルの入力欄にカーソルを置いてEnterキーを押す」「一番最後のブロックの下でクリックする」という操作で、デフォルトのブロックを追加することができるようになっています。

本来はデフォルトのブロックとして「段落」ブロックが追加されるようになっていますが、「TinyMCE Advanced」を有効化していると、「Classic Paragraphブロック」もしくは「クラシックブロック」がデフォルトのブロックとなるように設定されています。

「Add Classic Paragraph block」にチェックが入っていれば、「Classic Paragraphブロック」がデフォルトになりますが、チェックがいない場合には「クラシックブロック」がデフォルトになります。

この設定方法は、以下のとおりです。

  1. WordPress管理画面から「TinyMCE Advanced」の設定画面を表示する
  2. 「Block Editor(Gutenberg)」タブの「Make the Classic Paragraph or Classic block the default block(hybrid mode)」にチェックが入っていることを確認
  3. ②でもしチェックが入っていなければ、チェックを入れて「変更を保存」をクリックし、設定内容を保存する

「TinyMCE Advanced」でClassic Paragraphブロックまたはクラシックブロックをデフォルトに設定する時の画面

通常は何もしなくても問題ないですが、もし「Classic Paragraphブロック」がデフォルトで追加されない場合には、この項目を確認すると良いです。

 

まとめ

以上、「Classic Paragraphブロック」の使い方についてまとめました。

「Classic Paragraphブロック」は、WordPress4.0系で使っていた「TinyMCE Advanced」のエディターを使うことができるブロックで、プラグイン「TinyMCE Advanced」をインストール・有効化することで使用することができます。

クラシックエディターを使う時と同じように、エディターに表示するボタンのカスタマイズも可能なので、使用したいボタンだけをツールバーに表示して、投稿作成の編集に活用できます。

ただ、クラシックエディターと比べると、画面の横幅が狭くなるなど、若干使用感は悪くなりますが、「Classic Paragraphブロック」を使うことで、クラシックエディターと変わらない使用感で投稿の編集ができるので、ブロックエディターに慣れない時には、「Classic Paragraphブロック」を活用して、徐々にブロックエディターに慣れていくのがおすすめです。

 

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.