あずきです🐥
WordPressをやるなら確実に入れておきたい、おすすめなプラグインの1つ…
Advanced Editor Tools
（旧：TinyMCE Advanced）
について、その導入手順と「基本的な設定方法」をブログ初心者さん向けに1から解説していきます
まず！
この「Advanced Editor Tools（旧：TinyMCE Advanced）」とは、WordPressにおける投稿・固定ページの編集画面で…
↑ こちらの、「ツールバー」と呼ばれるエリアに表示されている各種アイコンについて…
- アイコンの種類を増やしたり
- アイコンの配置を並べ替えたり
- 使わないアイコンを非表示にしたり
といったことができるプラグインです
ちなみに大前提として、「Advanced Editor Tools（旧：TinyMCE Advanced）」の設定は…
↑ このように…
- ブロックエディタ（＝グーテンベルグ）用の設定
- 旧エディタ（＝クラシックエディタ）用の設定
という【2パターン】の編集エディタにわかれていますが、今回ご紹介していくのはあくまで…
旧エディタ（＝クラシックエディタ）
における設定手順です
関連
「クラシックエディタとグーテンベルグってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
続きを見る
「クラシックエディタ」の今後のサポート状況については、こちらから ↓
-
【2021年版】WordPressクラシックエディタはいつまで使える？2021年末でサポート終了って本当？【少なくとも2022年までClassic Editorは使えそう／代替プラグインもあり】
続きを見る
ということで、今回は3つのステップで丁寧に解説していきます
- 「Advanced Editor Tools」の導入手順【インストールと有効化】
- 「Advanced Editor Tools」の基本的な設定方法
- ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
【愛用】「WING AFFINGER5」って実際どうなの？気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ／専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が発生してしまう可能性があります。 プラグインの使用に際しては、あらかじめデータを「バックアップ」されたうえでご自身の判断と責任のもと行ってください
-
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】
続きを見る
※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます
Contents
- 1 【2021年版】WordPressプラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」の導入手順と、クラシックエディタにおける基本的な設定方法
【2021年版】WordPressプラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」の導入手順と、クラシックエディタにおける基本的な設定方法
ステップ①：Advanced Editor Tools（旧：TinyMCE Advanced）をWordPressに導入する手順【インストール＆有効化】
はじめに…
プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Advanced Editor Tools と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探します
無事見つかったら…
↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…
↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了です🐥
ステップ②：Advanced Editor Tools（旧：TinyMCE Advanced）の基本的な設定方法【旧エディタ「クラシックエディタ」版】
つづいて【ステップ②】は…
「Advanced Editor Tools」の基本的な設定方法
について
WordPress管理画面の左側にある一覧メニューから…
↑ 設定 ＞ Advanced Editor Tools（TinyMCE Advanced） をクリックします
設定画面が開いたら、今回は「クラシックエディタ」用の設定なので…
↑ こちらの「旧エディター (TinyMCE) 」というタブをクリックしましょう
ここから、「4つ」の設定エリアにわけて解説していきます
- ツールバー設定
- オプション設定
- 上級者向け設定
- 管理設定
といってもメインは1番最初の「ツールバー設定」で、残りの3つは一瞬です🐣
ツールバー設定
まずは…
↑ こちらの「エディターメニューを有効化する。」という項目に、チェックが入っていることを確認しましょう
ここのチェックを入れておくことで、「ツールバー」エリアに…
↑ こちらの行が表示されるようになります
つづいてここから、「ツールバー」エリアに表示させる…
各種アイコン
を選択していきます
やり方はいたって簡単で、画面の上部に表示されている…
↑ こちらの「ツールバー」エリアに、自分が使いたい「任意のアイコン」をセットしていき、反対に「使わないアイコン」については…
↑ こちらのエリア（左上に「使用しないボタン」と表示されている場所！）に、アイコンを移動させていくだけ
例えば！
デフォルトでは「使用しないボタン」側に入っている…
↑ こちらの「下線」というアイコンを「ツールバー」エリアに加えたい場合なら、この「下線」アイコンを…
↑ このようにドラッグ（＝クリック押しっぱなしでマウス移動）させていき…
↑「ツールバー」側の好きな場所で…
↑ ドロップ（＝クリック解除）するだけ
反対に！
最初から「ツールバー」側にセットされている、例えば…
↑ こちらの「太字」アイコンを「使用しないボタン」側に移したいという場合なら、このアイコンを同じようにドラッグ＆ドロップで…
↑「使用しないボタン」側の好きな場所に移せばOKです
参考までに、自分が愛用しているアイコンは…
↑ こちらになります
ということで！
実際に使っていきたいアイコンを「ツールバー」側にセットできたら、今度はツールバー内の並び順を…
↑ 同じくドラッグ＆ドロップで…
↑ 自分が使いやすいと思うアイコンの配置に、任意で入れ替えましょう
ちなみに！
実際の投稿・固定ページの編集画面を開いてみると、今回セットした各種アイコンとはまた別で…
↑ このようにいくつかのアイコンが並んでいる可能性がありますが、これらは「Advanced Editor Tools」によって設置されたものではなく…
導入しているテーマ
ごとで追加される、そのテーマ専用のアイコンだったりします
関連
WordPressの「テーマ」については、こちらをどうぞ ↓
-
【2020年】WordPressでテーマ（＝テンプレート）をセットしよう！【あずきのWordPressブログ「完全初心者」ガイド／第3章】
続きを見る
そしてもう1点！
今回「Advanced Editor Tools」でセットした各種アイコンというのは、「クラシックエディタ」の編集画面だと…
↑ 右上のタブで、こちらの「ビジュアル」というモードが選択されていないと表示されません
関連
「ビジュアルとテキストってなに…？」という場合は、こちらから ↓
-
WordPressの「ビジュアルエディタ＆テキストエディタ」とは？【クラシックエディタにおけるブログ記事編集】
続きを見る
ということで…
ここまでできたら一旦「変更を保存」ボタンをクリックして、【ツールバー設定】については完了です
あとは、残りの細かい設定をサクッと済ませていきましょう🐥
＼「超強力」なサイト改善と効率化 ／
―― 効果のある広告やリンクを徹底解析 ――
「AFFINGERタグ管理マネージャー3 + PVモニター」
プラグインセット
※WordPressテーマ「WING AFFINGER5」専用のプラグインです（ver20181120以上必須）
※「STINGERタグ管理プラグイン3」から移行する場合、登録済みのタグデータはそのまま引き継ぐことができます
PDFマニュアル「AffiliateRun～なぜ売れないか？」付き！
オプション設定
さきほどの「ツールバー設定」と同じく、WordPress管理画面 ＞ 設定 から…
Advanced Editor Tools（TinyMCE Advanced） ＞ 「旧エディター (TinyMCE) 」タブ
の画面内で、今度は…
↑ こちらの「オプション」という設定エリアを見ていきます
基本的にはデフォルト設定のままでOKですが、唯一…
↑ こちらの「フォントサイズ」という項目だけ、チェックを入れておきます
「フォントサイズ」にチェックを入れることで、投稿・固定ページの編集画面で行える…
↑ ここの「フォントサイズ変更」における選択肢が、デフォルトの…
↑ この状態から…
↑ このように、その種類を大幅に増やすことができます
ちなみに！
実際の編集画面を開いてみて、もしも上の画像のような「px」という単位ではなく…
↑ このように「％」になっているという場合、こちらも今回の「Advanced Editor Tools」プラグインとはまた別で…
導入しているテーマ
ごとの機能が反映されている可能性が高いです
ということで…
「フォントサイズ」の項目にチェックを入れたら、この【オプション】エリアにおけるそのほかの項目については、通常デフォルトのままでOKです🐥
上級者向け設定
はじめに
この「上級者向け設定」については、プラグイン「Classic Editor」を有効化しているかどうかによって、表示される項目が若干変わってきます
ここでは、「Classic Editor」をすでに有効化している前提で解説していきます
「Classic Editor」の概要と導入手順については、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
続きを見る
同じく、 WordPress管理画面 ＞ 設定 から…
Advanced Editor Tools（TinyMCE Advanced） ＞ 「旧エディター (TinyMCE) 」タブ
の画面で、今度は…
↑ こちらの「上級者向け設定」というエリアを見ていきます
さきほどの「オプション」エリアと同じく、基本はデフォルトのままでOKですが、こちらも1点だけ…
↑「クラシックブロックとクラシックエディター内のパラグラフタグを保持」という項目に、チェックを入れておくのがおすすめです
この項目にチェックを入れることで、「クラシックエディタ」のテキストモードにおける…
自動変換
の機能を無効にすることができます
具体的には、デフォルト設定のままだと…
↑ こういった「テキスト」モードの状態から、編集画面を1度でも「ビジュアル」モードに切り替え、再度「テキスト」モードに戻してみると…
↑ このように…
- pタグ（＝段落のこと）
- brタグ（＝改行のこと）
の部分が、「自動変換」によって非表示になってしまうんですね
一見すると「スッキリした印象」にも見えるかもしれませんが、このままだと例えば…
ブログに収益広告を貼れるようになったとき
などに、支障が出かねません
ということで…
「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れたら、この【上級者向け設定】におけるそのほかの項目については、通常デフォルトのままでOKです🐥
管理設定
【上級者向け設定】エリアのさらに下にある…
↑ こちらの【管理】という設定エリアについては、通常すべてデフォルトのままで問題ありません
ということで！
ここまで一通り設定できたら、最後に「変更を保存」ボタンをクリックして、基本的な設定については完了となります🐥
ステップ③：Advanced Editor Tools（TinyMCE Advanced）で、ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法【原因は「ツールバー切り替え」アイコン】
最後の3つ目のステップでは、今回の「Advanced Editor Tools（旧：TinyMCE Advanced）」でありがちなトラブルである…
ツールバーの「2行目以降」のアイコンが表示されない
といったケースの対処方法について、サクッと解説しておきたいと思います
というのも、WordPressでは例えば…
↑ このような形で、ツールバーに「2行目」以上アイコンをセットしても、実際の編集画面を開いてみると…
↑ このように「1行目」だけが表示されて、「2行目」以降は非表示になっていることがあるんですね
原因はズバリ…
↑ こちらの「ツールバー切り替え」というアイコンです
この「ツールバー切り替え」アイコンを「ツールバー」エリアの1行目に入れていると、編集画面を開いたときに…
ツールバーの「2行目以降」は非表示
な状態になり、編集画面上で「ツールバー切り替え」アイコンをクリックすることで…
↑ このように、隠れていた「2行目以降」のアイコンが現れる仕様になっています
ちなみに！
この「ツールバー切り替えアイコン」におけるそのほかのポイントとしては…
- ツールバーの「2行目以降」には設置できない！ ※一旦セットしても、「変更を保存」をクリックするとアイコンが消えます
- 反対に「1行目」のなかであれば、どの場所にセットしてもOK！ ※試してみたところ、右端ではなくてもちゃんと機能します
この2点を押さえておけば、まずOKです🐥
▼ 「クラシックエディタ」の基本的な記事作成については、こちらをどうぞ ▼
-
【2020年】ワードプレスで記事を作って投稿しよう！【あずきのWordPressブログガイド／第7章TOP】
続きを見る
関連
今回の記事はこちらの章に属しています
＼ このブログでも愛用中！／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^