あずきです🐥
WordPressをやるなら確実に入れておきたい、おすすめなプラグインの1つ…
Advanced Editor Tools
（旧：TinyMCE Advanced）
について、その導入手順と「基本的な設定方法」をブログ初心者さん向けに1から解説していきます
まず！
この「Advanced Editor Tools（旧：TinyMCE Advanced）」は、WordPressにおける投稿・固定ページの編集画面で…
↑ こちらの、「ツールバー」と呼ばれるエリアに表示されている各種アイコンについて…
- アイコンの種類を増やしたり
- アイコンの配置を並べ替えたり
- 使わないアイコンを非表示にしたり
といったことができるプラグインです
ちなみに大前提として、「Advanced Editor Tools（旧：TinyMCE Advanced）」の設定は…
↑ このように…
- ブロックエディタ（＝グーテンベルグ）用の設定
- 旧エディタ（＝クラシックエディタ）用の設定
という【2パターン】の編集エディタにわかれていますが、今回ご紹介していくのはあくまで…
旧エディタ（＝クラシックエディタ）
における設定手順です
関連
「クラシックエディタとグーテンベルグってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
「クラシックエディタ」の今後のサポート状況については、こちらから ↓
-
【2021年版】WordPressクラシックエディタはいつまで使える？結局グーテンベルグとどっちがおすすめ？【専業ブロガー4年目の本音】
続きを見る
ということで、今回は3つのステップで丁寧に解説していきます
- 「Advanced Editor Tools」の導入手順【インストールと有効化】
- 「Advanced Editor Tools」の基本的な設定方法
- ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
【2021年】Advanced Editor Tools（旧：TinyMCE Advanced）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】
ステップ１：Advanced Editor Tools（旧：TinyMCE Advanced）をWordPressに導入する手順【インストール＆有効化】
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
はじめに…
プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Advanced Editor Tools と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ２：Advanced Editor Tools（旧：TinyMCE Advanced）の基本的な設定方法【旧エディタ「クラシックエディタ」版】
つづいて2つ目のステップは…
「Advanced Editor Tools」の基本的な設定方法
について
WordPress管理画面の左側にある一覧メニューから…
↑ 設定 ＞ Advanced Editor Tools（TinyMCE Advanced） をクリックします
設定画面が開いたら、今回は「クラシックエディタ」用の設定なので…
↑ こちらの「旧エディター (TinyMCE) 」というタブをクリックしましょう
ここから、「4つ」の設定エリアにわけて解説していきます
- ツールバー設定
- オプション設定
- 上級者向け設定
- 管理設定
といってもメインは1番最初の「ツールバー設定」で、残りの3つは一瞬です🐣
ツールバー設定
まずは…
↑ こちらの「エディターメニューを有効化する。」という項目に、チェックが入っていることを確認しましょう
ここのチェックを入れておくことで、「ツールバー」エリアに…
↑ こちらの行が表示されるようになります
つづいてここから、「ツールバー」エリアに表示させる…
各種アイコン
を選択していきます
やり方はいたって簡単で、画面の上部に表示されている…
↑ こちらの「ツールバー」エリアに、自分が使いたい「任意のアイコン」をセットしていき、反対に「使わないアイコン」については…
↑ こちらのエリア（左上に「使用しないボタン」と表示されている場所！）に、アイコンを移動させていくだけ
例えば！
デフォルトでは「使用しないボタン」側に入っている…
↑ こちらの「下線」というアイコンを「ツールバー」エリアに加えたい場合なら、この「下線」アイコンを…
↑ このようにドラッグ（＝クリック押しっぱなしでマウス移動）させていき…
↑「ツールバー」側の好きな場所で…
↑ ドロップ（＝クリック解除）するだけ
反対に！
最初から「ツールバー」側にセットされている、例えば…
↑ こちらの「太字」アイコンを「使用しないボタン」側に移したいという場合なら、このアイコンを同じようにドラッグ＆ドロップで…
↑「使用しないボタン」側の好きな場所に移せばOKです
参考までに、自分が愛用しているアイコンは…
↑ こちらになります
ということで！
実際に使っていきたいアイコンを「ツールバー」側にセットできたら、今度はツールバー内の並び順を…
↑ 同じくドラッグ＆ドロップで…
↑ 自分が使いやすいと思うアイコンの配置に、任意で入れ替えましょう
ちなみに！
実際の投稿・固定ページの編集画面を開いてみると、今回セットした各種アイコンとはまた別で…
↑ このようにいくつかのアイコンが並んでいる可能性がありますが、これらは「Advanced Editor Tools」によって設置されたものではなく…
導入しているテーマ
ごとで追加される、そのテーマ専用のアイコンだったりします
関連
WordPressの「テーマ」については、こちらをどうぞ ↓
-
【2021年】WordPressでテーマ（テンプレート）をセットしよう【あずきのワードプレスブログ「完全初心者」ガイド／第３章】
続きを見る
そしてもう1点！
今回「Advanced Editor Tools」でセットした各種アイコンというのは、「クラシックエディタ」の編集画面だと…
↑ 右上のタブで、こちらの「ビジュアル」というモードが選択されていないと表示されません
関連
「ビジュアルとテキストってなに…？」という場合は、こちらから ↓
-
【2021年】WordPress「ビジュアル・テキスト」エディタの違いとは？使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】
続きを見る
ということで…
ここまでできたら一旦「変更を保存」ボタンをクリックして、【ツールバー設定】については完了です
あとは、残りの細かい設定をサクッと済ませていきましょう🐥
オプション設定
さきほどの「ツールバー設定」と同じく、WordPress管理画面 ＞ 設定 から…
Advanced Editor Tools（TinyMCE Advanced） ＞ 「旧エディター (TinyMCE) 」タブ
の画面内で、今度は…
↑ こちらの「オプション」という設定エリアを見ていきます
基本的にはデフォルト設定のままでOKですが、唯一…
↑ こちらの「フォントサイズ」という項目だけ、チェックを入れておきます
「フォントサイズ」にチェックを入れることで、投稿・固定ページの編集画面で行える…
↑ ここの「フォントサイズ変更」における選択肢が、デフォルトの…
↑ この状態から…
↑ このように、その種類を大幅に増やすことができます
ちなみに！
実際の編集画面を開いてみて、もしも上の画像のような「px」という単位ではなく…
↑ このように「％」になっているという場合、こちらも今回の「Advanced Editor Tools」プラグインとはまた別で…
導入しているテーマ
ごとの機能が反映されている可能性が高いです
ということで…
「フォントサイズ」の項目にチェックを入れたら、この【オプション】エリアにおけるそのほかの項目については、通常デフォルトのままでOKです🐥
上級者向け設定
はじめに
この「上級者向け設定」については、プラグイン「Classic Editor」を有効化しているかどうかによって、表示される項目が若干変わってきます
ここでは、「Classic Editor」をすでに有効化している前提で解説していきます
「Classic Editor」の概要と導入手順については、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
同じく、 WordPress管理画面 ＞ 設定 から…
Advanced Editor Tools（TinyMCE Advanced） ＞ 「旧エディター (TinyMCE) 」タブ
の画面で、今度は…
↑ こちらの「上級者向け設定」というエリアを見ていきます
さきほどの「オプション」エリアと同じく、基本はデフォルトのままでOKですが、こちらも1点だけ…
↑「クラシックブロックとクラシックエディター内のパラグラフタグを保持」という項目に、チェックを入れておくのがおすすめです
この項目にチェックを入れることで、「クラシックエディタ」のテキストモードにおける…
自動変換
という機能を無効にすることができます
具体的には、デフォルト設定のままだと…
↑ こういった「テキスト」モードの状態から、編集画面を1度でも「ビジュアル」モードに切り替え、再度「テキスト」モードに戻してみると…
↑ このように…
- pタグ（＝段落のこと）
- brタグ（＝改行のこと）
の部分が、「自動変換」によって非表示になってしまうんですね
一見すると「スッキリした印象」にも見えるかもしれませんが、このままだと例えば…
ブログに広告を貼れるようになったとき
などに、支障が出かねません
関連
ということで…
「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れたら、この【上級者向け設定】におけるそのほかの項目については、通常デフォルトのままでOKです🐥
管理設定
【上級者向け設定】エリアのさらに下にある…
↑ こちらの【管理】という設定エリアについては、通常すべてデフォルトのままで問題ありません
ということで！
ここまで一通り設定できたら、最後に「変更を保存」ボタンをクリックして、基本的な設定については完了となります🐥
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ３：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です🐥
▼ 「クラシックエディタ」の基本的な記事作成については、こちらをどうぞ ▼
-
【2021年】ACTION AFFINGER6の記事作成・投稿で”超実践的”なポイントを１から徹底解説【あずきのワードプレスブログ「完全初心者」ガイド／第７章】
続きを見る
あわせてどうぞ
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020