【Gutenberg対応】TinyMCE Advancedの初期設定方法と使い方|WordPressプラグイン

おすすめのホームページ制作↓

事業者に負担がかからないように月額利用で運営されているホームページ制作です。

今ならキャンペーンで初期費用5万円が0円になります。

固定ページ・投稿ページの編集は手の込んだカスタマイズをしようとすると、通常はどうしてもHTMLの知識が必要になってしまいます。

HTMLの記述はWordPressで初めてWEBサイトを作るような人にはなかなかハードルが高いでしょう。

そこで今回はページの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。

以前は必須プラグインでしたが、グーテンベルグが浸透しこのプラグインの必要性が今はあまりありません。
グーテンベルグエディターをしっかり使えるようになりましょう。

目次

初期設定方法

まずはインストールから初期設定方法を紹介します。

インストール方法

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。

TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに変わりますので、クリックします。

Block Editor(Gutenberg)の初期設定方法

インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。

設定項目をクリックすると以下のページが開きます。

TinyMCE Advancedプラグインの図解

Gutenbergのみを利用する場合は左側の「Block Editor」を選んでください。

もし旧エディターである「Classic Editor」を利用する場合ば右を選んでください。

※「Classic Editor」を利用するには「Classic Editorプラグイン」が必要となります。

Block Editor(Gutenberg)の設定方法

Block Editor(Gutenberg)タブには主に以下の設定項目があります。

TinyMCE Advancedプラグインのツールバー図解
  • Main toolbar
    記事執筆時に段落ブロック内で使用するツールバーの設定をします。
  • Alternative side toolbar
    画面右側のサイドツールバーの設定をします。
  • Unused buttons for the blocks toolbar
    使用しない機能をここに置きます。

設定はドラッグ&ドロップで直感的に配置することができます。
アンダーラインとマークを移動してみます。

TinyMCE Advancedプラグインのドラッグドロップの図解

以下のようになります。

TinyMCE Advancedプラグインのドラッグドロップの図解2

次にカラー関係の設定をすることができますが、特に邪魔になるものでもないので両方Yesで問題ないでしょう。

TinyMCE Advancedプラグインのカラー設定の図解

さらに下にクラシックブロックの設定がありますが、こちらは後述するクラシックエディターの設定とほぼ同じです。

ドラック&ドロップで設定できますので、「グーテンベルグ内で以前のクラシックエディターのように使いたい」という人は必ず設定しておきましょう。

TinyMCE Advancedプラグインのクラシックブロックの図解

Classic Editorの初期設定方法

Classic Editorプラグイン」使用時のクラシックエディターの設定方法です。

「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。

「設定」タブの各種機能

設定のタブでは各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。

TinyMCE Advancedプラグインの設定タブの図解
  • Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
    GutenbergのすべてのクラッシックブロックにおいてTinyMCE Advancedプラグインで設定したツールバーを一番上に表示させます。
  • リストスタイルオプション
    箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。
  • コンテキストメニュー
    編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。
  • 代替リンクダイアログ
    リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
    リンクを設定したあとならWordPressのリンク設定画面を開けます。
  • フォントサイズ
    pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。

↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、クラシックエディター利用時のビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。

設定が完了したら「変更を保存」をクリックして終了します。

使い方

Block Editor(Gutenberg)での使い方

適用するテキストをドラッグし、タブから機能を選択します。

先ほど追加した機能の中で、ここではアンダーラインを選んでいます。

TinyMCE Advancedプラグインの使い方の図解

以下のようにアンダーラインが入ります。

TinyMCE Advancedプラグインの使い方の図解2

Classic Editorでの使い方

WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。

「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。

「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。

適用するテキストをドラッグします。

ptの選択をクリックし、指定するサイズを選択します。

大きいサイズになります。

次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。

青を選択したら青色に変化しましたね。

青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。

青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。

テーマによって「TinyMCE Advanced」を使って機能を増やしているものもありますので、使いやすいようにカスタマイズしてコンテンツに集中できる環境を構築しましょう。

WordPressのおすすめプラグインについてまとめていますので、参考にしてみてください。

コメント

コメントする

目次
閉じる