WORDPRESS

【2021年】WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法【クラシックエディタの場合】

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 アイキャッチ
 

あずきです🐥

WordPressをやるなら確実に入れておきたい、おすすめなプラグインの1つ…

Advanced Editor Tools
(旧:TinyMCE Advanced)

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

 

まず!

この「Advanced Editor Tools(旧:TinyMCE Advanced)」とは、WordPressにおける投稿・固定ページの編集画面で…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 top-01

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

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

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

WordPressには実質「必須」とも言えるくらい定番で、もちろん無料のプラグイン!
 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 top-02

↑ このように…

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

という【2パターン】の編集エディタにわかれていますが、今回ご紹介していくのはあくまで…

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

における設定手順です

 
 

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

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

さっそく見ていきましょー🐥

 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が発生してしまう可能性があります。 プラグインの使用に際しては、あらかじめデータを「バックアップ」されたうえでご自身の判断と責任のもと行ってください

 
WordPressプラグイン「BackWPup」の基本的な設定方法 アイキャッチ
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

続きを見る

※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます

 

【2021年版】WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順と、クラシックエディタにおける基本的な設定方法

ステップ①:Advanced Editor Tools(旧:TinyMCE Advanced)をWordPressに導入する手順【インストール&有効化】

WordPressブログ「完全初心者」ガイド 見出し a-01

はじめに…

プラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順

について

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-01

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-02

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-03-a

↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探します

 

無事見つかったら…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-03-b

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-03-c

↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了です🐥

今度は本題の「設定方法」を見ていこう!
 

 

ステップ②:Advanced Editor Tools(旧:TinyMCE Advanced)の基本的な設定方法【旧エディタ「クラシックエディタ」版】

WordPressブログ「完全初心者」ガイド 見出し a-02

つづいて【ステップ②】は…

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

について

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-top-01

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-top-02

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

 

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

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

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

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

ツールバー設定

WordPressブログ「完全初心者」ガイド 見出し a-03

まずは…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-01-a

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-01-b

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

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

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

各種アイコン

を選択していきます

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-02-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-02-b

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

 

例えば!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-b

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-c

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-d

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

 

反対に!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-04-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-04-b

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

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

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-05

↑ こちらになります

あとから変更はいくらでも可能だから、まずはとりあえずでセットしてみよう!
 

ということで!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-06-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-06-b

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

 

ちなみに!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-07

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

導入しているテーマ

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

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

そしてもう1点!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-08

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

「自分の画面とぜんぜん違う…」という場合は、「テキスト」モードになってないか確認しよう!
 
 

ということで…

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

 

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

ここからは一瞬だよ!

\「超強力」なサイト改善と効率化 /

AFFINGERタグ管理マネージャー3 01

―― 効果のある広告やリンクを徹底解析 ――

「AFFINGERタグ管理マネージャー3 + PVモニター」

プラグインセット

※WordPressテーマ「WING AFFINGER5」専用のプラグインです(ver20181120以上必須)
※「STINGERタグ管理プラグイン3」から移行する場合、登録済みのタグデータはそのまま引き継ぐことができます

PDFマニュアル「AffiliateRun~なぜ売れないか?」付き!

 

オプション設定

WordPressブログ「完全初心者」ガイド 見出し a-04

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

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

の画面内で、今度は…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-top

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

 

基本的にはデフォルト設定のままでOKですが、唯一…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-a

↑ こちらの「フォントサイズ」という項目だけ、チェックを入れておきます

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-b

↑ ここの「フォントサイズ変更」における選択肢が、デフォルトの…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-c

↑ この状態から…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-d

↑ このように、その種類を大幅に増やすことができます

 

ちなみに!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-e

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

導入しているテーマ

ごとの機能が反映されている可能性が高いです

上の画像例も「AFFINGER」の場合だよ!
 

ということで…

「フォントサイズ」の項目にチェックを入れたら、この【オプション】エリアにおけるそのほかの項目については、通常デフォルトのままでOKです🐥

 

上級者向け設定

WordPressブログ「完全初心者」ガイド 見出し a-05

 

はじめに

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

 

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

 

「Classic Editor」の概要と導入手順については、こちらをどうぞ ↓

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

続きを見る

 

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

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

の画面で、今度は…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-top

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-a

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

 

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

自動変換

の機能を無効にすることができます

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-b

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-c

↑ このように…

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

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

 

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

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

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

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

ということで…

「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れたら、この【上級者向け設定】におけるそのほかの項目については、通常デフォルトのままでOKです🐥

 

管理設定

WordPressブログ「完全初心者」ガイド 見出し b-01

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-4-top

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

 

ということで!

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

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

 

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

WordPressブログ「完全初心者」ガイド 見出し b-02

最後の3つ目のステップでは、今回の「Advanced Editor Tools(旧:TinyMCE Advanced)」でありがちなトラブルである…

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

といったケースの対処方法について、サクッと解説しておきたいと思います

 

というのも、WordPressでは例えば…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-01

↑ このような形で、ツールバーに「2行目」以上アイコンをセットしても、実際の編集画面を開いてみると…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-02

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

 

原因はズバリ…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-03

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

 

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

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

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-04

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

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

ちなみに!

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

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

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

▼ 「クラシックエディタ」の基本的な記事作成については、こちらをどうぞ ▼

あずきのWordPressブログガイド 第7章「記事編」TOP アイキャッチ
【2020年】ワードプレスで記事を作って投稿しよう!【あずきのWordPressブログガイド/第7章TOP】

続きを見る

 

今回の記事はこちらの章に属しています

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中!/

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

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

- 専業ブロガー・フリーランス -

あずき

独立4年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2019 あずきのぶろぐ