Advanced Editor Tools（旧：TinyMCE）の初期設定と使い方を簡単に解説

 

今夏は上記のような要望がある方にとっての記事を書いていきたいと思います。

 

WordPressで記事を書いていく際はデフォルト設定でも記事を書いていけるのですが、文章を装飾したり、テーマ専用のタグ機能を使用したい場合はデフォルト設定では厳しい場合があります。

 

そこで、当プラグイン「TinyMCE Advanced」を使用することで上記のことが可能になります。

 

今回はTinyMCE Advancedの一通りの使い方と設定をご紹介していきます。

 

※「TinyMCE Advanced」は「Advanced Editor Tools」へ名称変更になりました。

 

TinyMCE Advancedとは？

 

本題に入る前に少しだけプラグインの紹介をします。

 

TinyMCE Advancedとは、WordPressにおける”ビジュアル”投稿画面でエディターの編集機能を追加できるプラグインのことです。

 

WordPressのエディター機能は、新式のグーテンベルク（Gutenberg）と旧式のクラシックエディター（Classic Edlitor）の２種類に分かれ、その両方に対応しています。

 

 

クラシックエディター自体はインストールされている方がほとんどだと思いますが、クラシックエディターをまだインストールしていない方はしておいて下さいね！

 

 

以下画像のように、ビジュアル編集画面において文章を装飾できるツールが格段に増えます！

 

 

プラグインのインストールと有効化

 

それではまず、プラグインのインストールと有効化を行っていきましょう。

 

 

 

以上の手順でプラグインのインストールと有効化を済ませましょう！

 

プラグインの基本的な使い方と設定

 

まずは基本的な設定から見ていきます。

 

ツールの設定

 

 

上記の手順で設定画面に移ります。

 

 

設定画面を開いたら、上のようにエディターをどちらか２つに選択するか表示されているので「旧エディター」を開き、下の「エディターメニューを有効化する。」にチェックを入れておきます。

 

これを有効にしないと記事作成画面にてTinyMCE Advancedのツール画面が表示されませんので注意して下さい。

 

 

次に、少し下にスクロールしていくと「使用しないボタン」という項目のツールがたくさん並んだ欄があります。

 

この欄の中から、自分が使用したいツールを上のエディターメニュー欄（実際に記事作成の際に使用するエディターメニュー）に「ドラッグ&ドロップ」して設定していきます！

 

 

あとは上のように、１段目と２段目にツールが配置が分かれているので同じようにドラッグ&ドロップして自分が使いやすいように配置を調整しましょう。

 

ツールに関してはこの各ボタンの移行作業だけで終了です。

 

その他の設定

 

他の設定項目については、

 

 

上記３つがあり、このうち変更する項目があるとしたら上級者向け設定のクラシックブロックとクラシックエディター内のパラグラフタグを保持、という項目一つのみです。

 

他は全てデフォルトでOKです！

 

 

上画像のクラシックブロックとクラシックエディター内のパラグラフタグを保持という項目にチェックを入れると、「ビジュアルエディター」と「テキストエディター」を切り替えた際に発生するWordPressの「自動整形」（段落タグの自動補完）というデフォルト機能を防止することができます。

 

 

つまり、これにチェックを入れるとビジュアルエディターで「改行」や「段落」を入力した際に、テキストエディターでも「<br>（改行タグ）」や「<p>（段落タグ）」が自動的に入力されるということです。

 

こうすることで、WordPressの自動整形機能（改行タグや段落タグが消えてしまう機能）を防止してビジュアル・テキスト画面を行ったり来たりして改行・段落分けの作業をし直さないでOK、ということが可能になります。

 

ここの部分に関しては記事を書いていけば「あーこういうことか」と、自然に分かってくると思います。

 

僕自身はテキストエディターを頻繁に使うので、<p>や<br>タグがたくさん表示されると非常に見にくく作業しにくいのでチェックは入れておりません。

 

プラグインの基本的な設定は以上となります！

 

各ツール（ボタン）の説明

 

ここでは各ツールの名称と機能を説明しておきますね。

 

アイコン	ツール名	用途
A	段落	<h2>や<h3>など見出しを挿入する
B	太字	文字を太字にする
C	下線	文字にアンダーラインを引く
D	イタリック	文字をイタリック体にする
E	引用	文章を引用したい時に使用する
F	番号なしリスト	リストを挿入したい時に使用する
G	番号つき付きリスト	ナンバーリストを挿入したい時に使用する
H	左寄せ	文字を左寄せにする
I	中央揃え	文字をセンターに揃える

J	右寄せ	文字を右寄せにする
K	リンクの挿入/編集	文字にリンクを挿入したい時に使用する
L	リンクの削除	文字のリンクを外したい時に使用する
M	フォントファミリー	文字の書式を変更したい時に使用する
N	フォントサイズ	文字のフォントサイズを変更したい時に使用する
O	インデントを減らす	文章をアウトデントしたい時に使用する
P	インデントを増やす	文章をインデントしたい時に使用する
Q	テキストとしてペースト	コピーした文章をテキストベースでペーストしたい時に使用する
R	書式設定をクリア	書式の設定をクリアしたい時に使用する
S	特殊文字	特殊文字を挿入する

T	「続きを読む」タグを挿入	モアタグを挿入したい時に使用する
U	テキスト色	文字色を変更する
V	スタイル	各テーマのオプションタグを挿入する時に使用する
W	テーブル（表）	テーブル（表）を作成したい時に使用する
X	キーボードショートカット	ショートカットのヘルプ

 

よく使いそうなツールの説明

 

ここからはよく使いそうなツールの使い方を説明をしていきます。

 

初心者の方でも感覚で分かりそうなツールや滅多に使わないツールの説明は割愛させていただきます。

 

①：取り消し線

「取り消し線」は、主に古い情報（文章）や間違った文章を訂正する時に使用します。

 

「それだったらわざわざ取り消し線を使わなくても情報や文章を削除したらいいだけじゃないの？」と思われるかもしれませんが、以前に書かれていた情報が突然削除されていたら読者にとっては不信感を覚えかねませんので、信用度を高めるためにもケースバイケースで使用したいですね。

 

②：画像の挿入/編集

 

画像は文章の段落の前後に挿入（「メディアを追加」から挿入）して中央寄せで配置させるのが基本ですが、文章の右横等に寄せて文章の隣に画像を挿入して説明したりすることも可能です。

 

その場合の画像と文章を綺麗に整える余白設定についてご紹介します。

 

 

上画像の通りの手順で画像を挿入します。

 

②の「画像の挿入/編集」をクリックすると、

 

 

以上のように設定のポップアップ画面が表示されるので、「高度な設定」タブをクリックして「左右余白」に３０と入力すれば綺麗に余白設定ができ画像と文章が整うかと思います！

 

なお、余白の調整は文章によって異なりますので入力する数値は適宜自分で変えてみて下さいね。

 

③：ツールバー切り替え

 

このボタンを追加すると、TinyMCE Advancedのメニュー欄が一列しか表示されません。

 

これは人によって異なりますが、無駄な表示を避けて作業しやすくするためですね。

 

 

そんな時に「ツールバー切り替え」ボタンを押してみると、追加したボタンが２列目に表示されます！

 

僕自身は、記事を書く際は使う機能が結構あるのでツールバー切り替えボタンは設置していません。

 

④：Insert/edit Video

 

この機能を使うことでYouTubeなどの外部サイトの動画を記事に埋め込むことができるようになります。

 

記事に直接動画メディアをアップロードすると記事自体が重くなって動作が鈍くなってしまうので、それを防止するためにも有効です！

 

では、使い方を説明します。

 

 

動画タイトル横にある「共有」をクリックします。

 

 

ポップアップ画面が表示されるので、一番左の「埋め込む」をクリックします。

 

 

すると、HTMLコードが表示されるのでこれを右下のコピーボタンでコピーします。

 

 

WordPressの投稿画面に戻り、TinyMCE Advancedのツールメニュー「メディアを挿入/編集」をクリックするとまたまたポップアップが表示されるので、「埋め込む」タブをクリックして下記に先ほどコピーしたYouTubeのHTMLコードを貼り付け、最後に「OK」をクリックしましょう。

 

 

すると、記事上にYouTube動画が埋め込み表示されます。

 

なお、先ほどコピーしたHTMLコードは「テキストエディター」に直接貼り付けても表示させることができます！

 

⑤：背景色

 

最後に文字や文章の背景カラーを変更できる「背景色」機能です。

 

入力した文章を選択した状態で画面右上の灰色で塗り潰しされた「A」マークをクリックするとお好みの背景色に変更できます。

 

文章を目立たせたい時に使用して下さい。

 

TinyMCE Advancedの不具合の対処法

 

最後にプラグインの不具合が発生した時の簡単な対処法だけ紹介して終わりにします！

 

 

以上の問題が発生した時は以下対処法を参考にしてみて下さい。

 

ブラウザのキャッシュを削除してみる

 

使用しているブラウザのキャッシュ（閲覧履歴）を削除することで改善することがあります。

 

使用しているブラウザは人によって異なるかと思いますので以下に主なブラウザのキャッシュ削除法を記載しておきますね！

 

 

 

他のブラウザで試してみる

 

現在使用しているブラウザがSafariであれば、Chromeに変更してみるなどブラウザを変更することで改善する場合もあります。

 

プラグインの稼働に干渉している他プラグインを停止してみる

 

まれに他のプラグインが干渉して作動を妨げている場合があります。

 

その場合は、使用している他のプラグインを一つずつ停止してビジュアルエディターが正常に動作するか、面倒な作業ではありますが検証していくことで改善することがあります。

 

WordPressやプラグインのバージョン問題

 

WordPress自体やプラグインのバージョンが古いとビジュアルエディターに影響することがあります。

 

順番に説明していきますね。

 

 

以上がWordPressやプラグインのアップグレードの方法です。

 

次に、WordPressのダウングレードの方法をご紹介します。

 

「WP Downgrade Specific Core Version」というプラグインをインストールしてダウングレードさせます。

 

 

こちらのプラグインを使用することでWordPressのデータが消える危険性も防止でき、何より簡単ですのでインストールしダウングレードさせましょう！

 

不安でしたらWordPressのバックアッププラグインをインストールしてバックアップを取っておきましょう！

関連記事

【専門知識不要】WordPressでのバックアップの取り方とUpdraftPlusの使い方

続きを見る

 

また、プラグインを削除する事ですぐに元のグレードに戻すこともできるのでオススメです。

 

もし、最新のバージョンに更新したい場合は、「WP Downgrade Specific Core Version」のプラグインを停止すると更新情報の通知が届きますので適宜更新をして下さい。

 

TinyMCE Advancedの使い方と設定のまとめ

 

いかがでしたでしょうか。

 

TinyMCE Advancedを使用しなくても記事は書けますが、このプラグインを使用することでWordPressテーマの機能（タグ機能）を使用することもできますし、文章を書いていく上で今後必須となっていくプラグインだと思います。

 

上手く使いこなしていくことでライティングレベルを高めていきましょう！