WORDPRESS

【2022年】Advanced Editor Tools(旧:TinyMCE)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法
 

専業ブロガー5年目のあずきです🐥

 

WordPressで確実に入れておきたい、超定番プラグインの1つ…

Advanced Editor Tools
(旧:TinyMCE Advanced)

について、その導入手順と設定方法をブログ初心者さん向けに1から解説していきます

 

「Advanced Editor Tools」は、WordPressにおける投稿・固定ページの編集画面で…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 top-01

↑ こちらの、「ツールバー」と呼ばれるエリアに表示されている各種アイコンについて…

  • アイコンの種類を増やしたり
  • アイコンの配置を並べ替えたり
  • 使わないアイコンを非表示にしたり

といったことができるプラグインです

もちろん無料のプラグインだよ!
 

ちなみに大前提として、「Advanced Editor Tools」の設定は…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 top-02

↑ このように…

  • ブロックエディタ(グーテンベルグ)用の設定
  • 旧エディタ(クラシックエディタ)用の設定

という「2パターン」の編集エディタにわかれていますが、今回ご紹介するのはそのうちの…

旧エディタ(=クラシックエディタ)

における設定手順となります

 
 

ということで、今回は3つのステップで丁寧に解説していきます🐥

  1. 「Advanced Editor Tools」の導入手順(インストールと有効化)
  2. 「Advanced Editor Tools」の基本的な設定方法
  3. ツールバー「2行目以降」のアイコンが表示されない場合の対処方法
さっそく見ていこー!

【2022年】Advanced Editor Tools(旧:TinyMCE)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

ステップ1:WordPressプラグイン「Advanced Editor Tools」の導入手順【インストールと有効化】

WordPress ヘッダー c-01

はじめに

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

BackWPupのおすすめな設定方法
【2022年】BackWPupのおすすめな設定方法を初心者向けに解説【WordPressプラグイン/ブログデータを自動でバックアップ】

続きを見る

 

はじめに…

プラグイン「Advanced Editor Tools」の導入手順

について

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン インストール 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン インストール 1-02

↑ こちらの検索フォームに Advanced Editor Tools と入力し、その下の検索結果から…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-1-01

↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探し、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

 

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

お次は肝心の「設定方法」を見ていこう!
 

ステップ2:WordPressプラグイン「Advanced Editor Tools」の基本的な設定方法【旧エディタ「クラシックエディタ」版】

WordPress ヘッダー c-02

つづいて2つ目のステップは…

「Advanced Editor Tools」の基本的な設定方法

について

 

WordPress管理画面の左側にある一覧メニューから…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-top-01

↑ 設定 > Advanced Editor Tools(TinyMCE Advanced) をクリックします

 

設定画面が開いたら、今回は「クラシックエディタ」用の設定なので…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-top-02

↑「旧エディター(TinyMCE)」というタブをクリックしましょう

 

ここから、「4つ」の設定エリアにわけて解説していきます

  • ツールバー設定
  • オプション設定
  • 上級者向け設定
  • 管理設定

といってもメインは一番最初の「ツールバー設定」で、残りの3つは一瞬です🐣

ということで、まずは「ツールバー設定」から!
 

ツールバー設定

WordPress ヘッダー c-03

はじめに…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-01-a

↑「エディターメニューを有効化する」という項目に、チェックが入っていることを確認しましょう

 

チェックを入れておくことで、「ツールバー」エリアに…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-01-b

↑ こちらの行が表示されるようになります

使わなければチェックを外すのもありだけど、最初はチェックありのままが無難だよ!
 

つづいてここから、「ツールバー」エリアに表示させる…

各種アイコン

を選択していきます

 

やり方はいたって簡単で、画面の上部に表示されている…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-02-a

↑ こちらの「ツールバー」エリアに、使用したい任意のアイコンをセットしていき、反対に使わない予定のアイコンについては…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-02-b

↑ こちらのエリア(左端に「使用しないボタン」と表示されている場所!)に、アイコンを移動させていくだけ

 

例えば、デフォルトでは「使用しないボタン」側に入っている…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-03-a

↑「下線」というアイコンを「ツールバー」エリアに加えたいなら、こちらの「下線」アイコンを…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-03-b

↑ このようにドラッグ(=クリック押しっぱなしでマウス移動)させていき…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-03-c

↑「ツールバー」側の好きな場所で…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-03-d

↑ ドロップ(=クリック解除)するだけ

 

反対に!

最初から「ツールバー」側にセットされている、例えば…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-04-a

↑「太字」アイコンを「使用しないボタン」側に移したいなら、同じようにドラッグ&ドロップで…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-04-b

↑「使用しないボタン」側の好きな場所に移せばOKです

各アイコンの機能は、そのアイコンにカーソルを合わせると表示されるよ!
 

参考までに、自分が愛用しているアイコンは…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-05

↑ こちらになります

あとから変更はいくらでも可能だから、試しに色々セットしてみよう!
 

ということで!

実際に使用していきたいアイコンを「ツールバー」側にセットできたら、今度はツールバー内の並び順を…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-06-a

↑ 同じくドラッグ&ドロップで…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-06-b

↑ 自分が使いやすいと思うアイコンの配置に、任意で入れ替えましょう

 

ちなみに!

投稿・固定ページの編集画面(記事作成で実際に使う画面のこと)を開いてみると、今回セットした各種アイコンとはまた別で…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-07

↑ このようにいくつかのアイコンが並んでいる可能性がありますが、これらは「Advanced Editor Tools」によるものではなく…

導入しているWordPressテーマ

ごとで追加される、”そのテーマ専用” のアイコンだったりします

上の画像例は、「ACTION AFFINGER6」の場合だよ!
 

関連

「テーマ」については、当ブログガイドの【第3章】にて1から解説しています ↓

WordPressでテーマ(テンプレート)をセットしよう
【2022年】WordPressでテーマ(テンプレート)をセットしよう【あずきのワードプレスブログ「完全初心者」ガイド/第3章】

続きを見る

 

「記事作成」については、こちらの【第7章】をどうぞ ↓

AFFINGER6の記事作成でおすすめな機能&使い方まとめ!WordPress投稿の実践的なポイントをまるっと解説
AFFINGER6の記事作成でおすすめな機能&使い方まとめ!WordPress投稿の実践的なポイントをまるっと解説【あずきのワードプレスブログ「完全初心者」ガイド/第7章】

続きを見る

※【第7章】は、当ブログでも使用中のテーマ「ACTION AFFINGER6」を前提とした解説です

 

そしてもう1点!

今回「Advanced Editor Tools」でセットした各種アイコンというのは、「クラシックエディタ」の編集画面だと…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-1-08

↑ 右上のタブで、「ビジュアル」というモードが選択されていないと表示されません

「自分の画面とぜんぜん違う…」という場合は、「ビジュアル」じゃなく「テキスト」モードになっちゃってないか確認しよう!
 
 

ということで…

ここまでできたら一旦「変更を保存」ボタンをクリックして、「ツールバー設定」については完了です

 

あとは、残りの細かい設定をサクッと済ませていきましょう🐥

ここからは一瞬だよ!
 

オプション設定

WordPress ヘッダー c-04

さきほどの「ツールバー設定」と同じく、WordPress管理画面 > 設定 から…

Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ

の画面内で、今度は…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-top

↑ こちらの「オプション」という設定エリアを見ていきます

 

基本的にはデフォルト設定のままでOKですが、このなかで1点だけ…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-01-a

↑「フォントサイズ」という項目を、「チェックあり」に変更しておきます

 

「フォントサイズ」にチェックを入れることで、投稿・固定ページの編集画面で行える…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-01-b

↑「フォントサイズ」の選択肢が、デフォルトの…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-01-c

↑ こちらの状態から…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-01-d

↑ このように、「フォントサイズ」の種類を大幅に増やすことができます

 

ちなみに!

実際の編集画面を開いてみて、もしも上画像のような「px」という単位ではなく…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-2-01-e

↑ このように「%」になっているという場合、こちらも今回の「Advanced Editor Tools」とはまた別で…

導入しているWordPressテーマ側の機能

が反映されている可能性が高いです

この画像例も「ACTION AFFINGER6」の場合だよ!
 

ということで…

そのほかの項目については、通常デフォルトのままでOKです🐥

 

上級者向け設定

WordPress ヘッダー c-05

はじめに

この「上級者向け設定」については、プラグイン「Classic Editor」を有効化しているかどうかによって、表示される項目が若干変わってきます

 

ここでは、「Classic Editor」をすでに有効化している前提で解説していきます

WordPressクラシックエディタとグーテンベルグとは?【プラグイン「Classic Editor」の導入方法まで】
WordPressクラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法まで】

続きを見る

 

同じく、 WordPress管理画面 > 設定 から…

Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ

の画面で、今度は…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-3-top

↑ こちらの「上級者向け設定」というエリアを見ていきます

 

さきほどの「オプション」エリアと同じく、基本はデフォルトのままでOKですが、こちらも1点だけ…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-3-01-a

↑「クラシックブロックとクラシックエディター内のパラグラフタグを保持」という項目を、「チェックあり」に変更しておくのがおすすめです

 

この項目にチェックを入れることで、「クラシックエディタ」のテキストモードにおける…

自動変換

という機能を ”無効” にすることができます

 

具体的には、デフォルト設定のままだと…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-3-01-b

↑ こうした「テキスト」モードの状態から、編集画面を一度でも「ビジュアル」モードに切り替え、再度「テキスト」モードに戻してみると…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-3-01-c

↑ このように…

  • pタグ(=段落のこと)
  • brタグ(=改行のこと)

の部分が、「自動変換」によって ”非表示” になってしまうんですね

 

一見すると「スッキリした印象」にも見えるかもしれませんが、このままだと例えば…

ブログに広告を貼れるようになったとき

などに、支障が出かねません

ブログ広告は基本的に、「テキスト」モードに切りかえて広告コードを貼りつけるよ!
 
 

ということで…

そのほかの項目については、通常デフォルトのままでOKです🐥

 

管理設定

WordPress ヘッダー c-06

「上級者向け設定」エリアのさらに下にある…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-2-4-top

↑ こちらの「管理」という設定エリアについては、通常すべてデフォルトのままで問題ありません

 

ということで!

ここまで一通りできたら、最後に右下の「変更を保存」ボタンをクリックして、基本的な設定は完了となります🐥

最後に1点、大事な注意ポイントを見ていくよ!
 

ステップ3:Advanced Editor Toolsで、ツールバー「2行目以降」のアイコンが表示されないときの対処方法【原因は「ツールバー切り替え」アイコン】

WordPress ヘッダー c-07

最後のステップでは、「Advanced Editor Tools」でありがちな質問である…

ツールバーの「2行目以降」のアイコンが表示されない

といったケースの対処方法について、サクッと解説しておきます(一瞬です!)

 

まず実際の画面上で見ると、今回ご紹介した「Advanced Editor Tools」側の設定で…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-3-01

↑ このように「2行目」までアイコンを仮にセットしても、いざ編集画面を開いてみると…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-3-02

↑ このように「1行目だけ」が表示されて、「2行目以降」は非表示になっていることがあるんですね

 

原因はズバリ…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-3-03

↑ こちらの「ツールバー切り替え」というアイコンです

 

この「ツールバー切り替え」アイコンを「ツールバー」エリアの1行目に入れていると、編集画面を開いたときに…

ツールバーの「2行目以降」は非表示

な状態になり、編集画面上で「ツールバー切り替え」アイコンをクリックすることで…

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法 1-3-04

↑ このように、隠れてしまっていた「2行目以降」のアイコンが現れる仕様になっています

つまり「ツールバー切り替えアイコン」をそもそも入れていなければ、最初から「2行目以降」も表示されるよ!
 

ちなみに!

この「ツールバー切り替えアイコン」における、そのほかのポイントとしては…

  • ツールバーの「2行目以降」には設置できない!
    ※一旦セットしても、「変更を保存」をクリックするとアイコンが消えます
  • 反対に「1行目」のなかであれば、どの場所にセットしてもOK!
    ※試してみたところ、「右端」以外の場所でもちゃんと機能します

この2点を押さえておけば、まずOKです🐥

 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

”全8章” の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

第1位

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 「稼ぐ」に特化した、本気で戦うための最適化&アフィリエイト機能!

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガーが本気レビュー
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

続きを見る

※2020年度Infotop売上及びInfotop Affidemy

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS