WordPressはHTMLを使わなくても、初期のビジュアルエディタ（投稿機能）で文字のフォントを変えたり、リンクを貼ったりと初心者でも記事を書くことができます。
ですが、文字色の変更、画像の回りに余白を作成、動画の挿入など、初期の機能にないものはテキストエディタにHTMLを使ったコードを記述しなければなりません。
そこで、TinyMCE Advancedというビジュアルエディタの機能を拡張するプラグインをご紹介します。
TinyMCE Advancedのプラグインを導入することで、文字色の変更、画像の回りに余白を作成、動画の挿入などの機能がビジュアルエディタに追加されます。
なので、さらに快適に記事を書き進めることが可能になりますよ。
そして、プラグインに不具合が出てしまった場合の対処法も解説していくので、是非一読下さい。
TinyMCE Advancedとは
TinyMCE Advancedとは、冒頭でも解説したようにビジュアルエディタの機能を拡張し、コードが分からない初心者でも簡単に使用することができるプラグインです。
以下の画像がデフォルトで設定されている機能です。
段落から簡単に解説していきます。
| アイコン | 表示名 | 説明 |
|---|---|---|
 |
段落 | 見出しの変更が出来る |
 |
太字 | 文字を太字に出来る |
 |
イタリック | 文字をイタリック体に出来る |
 |
引用 | 文章等を引用する際に活用 |
 |
番号なしリスト | 箇条書きで使用する時に使用 |
 |
番号ありリスト | 箇条書きで使用する時に使用 |
 |
左寄せ：中央揃え：右寄せ | 文字位置の調節 |
 |
リンクの挿入/編集、削除 | 文字にリンクを挿入/削除出来る |
 |
元に戻す | 1つ前の作業に戻す |
 |
フォントファミリー | フォントファミリーの変更 |
 |
フォントサイズ変更 | フォントサイズの変更 |
 |
インデントを減らす&増やす | インデントの調節 |
 |
テキストとしてペースト | Wardなどからテキストをペースト出来る |
 |
書式設定をクリア | フォントファミリーで変更した書式をデフォルトの設定に戻す |
 |
特殊文字 | 特殊文字を挿入する |
 |
「続きを読む」タグを挿入 | 記事の途中に「続きを読む」タグを挿入する |
 |
テキスト色 | テキスト色の変更 |
 |
テーブル | テーブルタグの挿入 |
 |
キーボードショートカット | ショートカットのヘルプ |
それでは順番に解説します。
段落・見出し
段落とは、見出し１〜見出し６まであり、文字に<h2>や<h3>タグを装飾し見出しの機能をつけます。
見出しをつけることで読みやすい文章にでき、SEO対策にもなります。
太文字・イタリック体・引用・リスト
次に、太文字、イタリック体、引用、番号なしリスト、番号ありリストです。
太文字、イタリックは文章の強弱に、引用は他のホームページなどから引用する時に必要です。
例えばですが、引用したい人物や本などがありましたらこのように引用します。
今日の夕食はカレーだね。
引用 〇〇
勝手に引用すると著作権に引っ掛かる危険もあるので注意です。
番号なし&ありのリストは箇条書きで伝えたい時に便利です。
左寄せ・中央揃え・右寄せ・リンク
次に左寄せ、中央揃え、右寄せ、リンクについてです。
左寄せ、中央揃え、右寄せは文字位置を変更する時に使います。
リンクの挿入は、文字やURLにリンクを貼りたい時に使います。上記の「URLをペーストまたは入力して検索」の窓にURLを入れて右の矢印マークをクリックして完了です。
フォントファミリー
次にフォントファミリーです。
フォントの種類を変更する時に使い、記述文章の種類によって変更します。
フォントサイズ
次にフォントサイズの変更です。
ptとはポイントです。
ptの大きさによって表示される文字の大きさが変わります。
インデント・続きを読む
次にインデントを減らす&増やすと、「続きを読む」タグの挿入の解説です。
インデントは字下げで、行間に空白を入れたり減らしたりする機能です。
「続きを読む」タグの挿入とは、MOREタグになります。
細かく設定していない場合、トップページに記事の内容がすべて表示されてしまいます。
1記事ならまだ読めますが、5、10記事になってしまうとトップページがとても読みにくくなってしまいます。
そこで、このタグを挿入することでトップページの記事の途中に「続きを読む」という項目を追加して表示したい所で切ることができます。
「続きを読む」タグの挿入すると、テキスト色の文字が出てこなくなります。
クリックしますと、
このように記事の内容がすべて表示されます。
特殊文字
次は特殊文字です。
特殊文字をクリックすると、たくさんの特殊文字が出てきます。
ショートカット
最後に、ショートカット機能です。
このようにショートカット機能が見れます。
初期設定でこれだけの機能が実装されているのでとても便利なプラグインです。
次に、TinyMCE Advancedのインストールと設定方法を解説します。
TinyMCE Advancedのインストールと設定方法
WordPressのダッシュボードを開き、「プラグイン」の項目にカーソルを合わせると、「新規追加」の項目が出るのでクリックします。
次に、右上の検索窓に「TinyMCE Advanced」と入れてエンターを押します。
「TinyMCE Advanced」のプラグインが出てくるので、「今すぐインストール」をクリックします。
※「TinyMCE」や「Advanced」が入っている似たようなプラグインがあっても気軽にインストールしてはいけません。
相性の悪いプラグインやウィルスの可能性もあり、ワードプレスに不具合が発生する危険性があります。
なので、わからないプラグインは調べて問題がなければインストールしましょう。
最後に、有効化をクリックします。
これで、TinyMCE Advancedのインストールは完了になりますが、有効化する前にダッシュボードに戻ってしまった場合は、「プラグイン」を選択し、「インストール済みプラグイン」をクリックすると、ダウンロードしたプラグインの一覧が表示されます。
そして、「TinyMCE Advanced」の下の「有効化」をクリックして完了となります。
TinyMCE Advancedのおすすめ機能の設定・カスタマイズ
TinyMCE Advancedのおすすめ機能の設定とカスタマイズ方法を実際にビジュアルエディタを使い解説します。
TinyMCE Advancedはすべておすすめできる機能ですが、初期設定ではツールバーに入っていない機能があるので、カスタマイズすることでより便利に使用出来ます。
先にカスタマイズする方法から解説します。
ダッシュボードの「設定」から「TinyMCE Advanced」へ進みます。
ブロックエディタとクラシックエディタがあるのですが、使いやすい方を選びます。（後ほどどちらも使い方を解説します。）
使用しないボタンの中から、使いたいボタンを矢印の方へドラッグするとツールバーに入ります。
次におすすめしたい機能の解説です。
おすすめしたい機能が３つあり、
- 動画挿入の「Insert/edit video」
- 背景色
- 画像の挿入/編集のボタン
の３つです。
先に、動画挿入の「Insert/edit video」の解説をします。
この機能を使うことでyoutubeなどの外部の動画を記事の中に挿入することができます。
メリットとして、記事に動画をアップロードすると記事が重くなってしまうので記事を軽量化する為にとても使えます。
YouTubeを埋め込む場合は、埋め込みたい動画の下に「共有」を押します。
「埋め込む」ボタンが出てくるのでクリックします。
コードが出てくるのでコピーしておきます。
そして、メディアを挿入/編集を選択します。
「埋め込む」の項目を選択すると以下のように表示されるので、空欄にさっきコピーしたYouTubeのコードを入れます。
OKを押すと以下のように設置されます。
※YouTubeはコードを「テキストエディタ」に直接貼り付けたり、そのYouTubeのページのURLを直接貼り付けても表示されます。
次に文字の背景色を変える機能です。
背景色の項目を選択し、色を変更すると以下のようになります。
文章にリズムや感情を乗せたい時に便利なので活用してみて下さい。
最後に、画像の挿入/編集について解説します。
画像を入れるだけなら、初期設定で「メディアを追加」から画像を取り込めば良いのですが、文章の間に画像を入れる場合だと、そのまま入れると文字のバランスが崩れてしまう可能性があります。
ですが、画像の挿入/編集の機能を使うと画像の周りに余白を入れることが出来て、文字と画像のバランスを調整出来るので記事をきれいに見せることができます。
画像の挿入/編集をクリックします。
試しに、文章の途中に画像を入れて投稿を表示して見ます。
このように文字列が崩れてしまいます。
ですが、画像の挿入の「高度な設定」の機能を使って左右の余白を調整します。
今回は「50」で調整して見ます。
すると、以下のように文字列がさっきよりもきれいに表示されます。
まずは、初期設定とこの３つを加えるだけでも記事作成の大きなサポートになります。
慣れてきましたら、自分に合う機能を付け加えていきましょう。
TinyMCE Advancedの使い方
見出しを入れる機能やフォントサイズや色の変更、画像や動画の挿入をする方法などを解説しました。
ここから実際にTinyMCE Advancedを使った活用方法を解説します。
WordPress5.0以降は、投稿機能にブロックエディタ（グーテンベルグ）が実装され5.0以前のクラシックエディタから大幅に仕様が変更されました。
5.0以前からWordPressを使っている方は、クラシックエディタが使いやすいという声が多いですが、グーテンベルグも改善されより使いやすくなっているので、どちらでも使用出来るように実際の使い方を解説します。
クラシックエディタでTinyMCE Advancedの使い方
WordPress5.0以降でクラシックエディタを使用する場合は、TinyMCE Advancedの設定を変更するか、「Classic Editor」のプラグインをインストールする必要があります。
TinyMCE Advancedの設定を変更の場合は、「設定」から「TinyMCE Advanced」の項目をクリックします。
ブロックエディタの設定の下へスクロールすると、「ブロックエディターをクラシックエディターに置き換える」という項目があるので、ここをチェックして完了になります。
ビジュアルの画面表示では以下のように表示されます。
テキスト画面表示では以下のように表示されます。
そして、空欄をクリックすると文章が打ち込めるので、文字を打ち込んでいきます。
以下はビジュアルエディタの画面です。
この画面をテキストエディタに変えると以下のようになります。
毎回コードを打ち込むととても手間なので、本当に便利な機能になります。
「Classic Editor」もプラグインで「インストール→有効化」と簡単に使えるようになるため、クラシックエディタを使いたい人はインストールしてみましょう。
詳しい解説は下記の記事で説明しています。
WordPress5.0から新たにグーテンベルクエディタが導入されました。 この新エディタの導入により、ブロック単位でコンテンツを作成することが可能になり、機能を上手く組み合わせることで柔軟な編集ができるようになりました。 しか[…]
グーテンベルクでTinyMCE Advancedの使い方
グーテンベルグでのTinyMCE Advancedの使い方は、ブロック機能の中で使用して文字を打っていきます。
設定方法から説明します。
ダッシュボードから設定、TinyMCE Advancedへいきます。
このように初期設定されていますが、特に変える必要がないのでそのまま変えなくてもOKです。
実際に文字を打つので、新規投稿を開きます。
右に文章やブロックの設定画面が出るのですが、出ない場合は右上の設定マークをクリックして表示させます。
以下の画像で「文章を入力〜」の所か、十字の丸をクリックすると文字が打てます。
クラシックエディタとは違い、右ブロック昨日や十字マークを押すと詳細の設定ができます。
試しに文字の大きさを変えてみます。
文字を打ってテキスト設定で、プリセットサイズを「大」にしてみます。
下の文字よりも大きくなります。
文字色を変えるには、テキスト設定の下の色設定を開きます。
矢印を押すとデフォルトの青色になりますが、カスタムカラーを開いて好みの色に変えることもできます。
TinyMCE Advancedの不具合の対処法
WordPressを使用しサイトやブログ運営をしていく中で、突然にビジュアルエディタに不具合が起きてしまう場合もあります。
- ビジュアルエディターの不具合 ツールバーが消える、文字も見えない
- ビジュアルエディタが表示されない＆文字色が透明表示
- ビジュアルエディタに反映されない
などの不具合があり、それに対する対処方法を紹介します。
表示されない、反映されない場合の理由と解決方法
ビジュアルエディタが表示されなかったり、反映されない場合は必ず原因があるので、原因を突き止めて解決策を投じることで問題が解決できます。
基本的に以下の手順を行うことで解決出来ることが多いので順を追って解説します。
スーパーリロードを試してみる
スーパーリロードとは、ブラウザのキャッシュを削除やリフレッシュすることです。
ですが、ブラウザによって、キャッシュの削除やリフレッシュ方法が異なるのでそれぞれ解説します。
■Internet Explorerの解説
「ツール」→「インターネットオブション」→「観覧の履歴」→「お気に入りWebサイトデータを保持する」以外をチェックし消去となります。
■Firefoxの解説
「ツール」→「オプション」→「プライバシーとセキュリティ」→「Cookie とサイトデータ」→「データ消去」→「ウェブコンテンツのキャッシュ」をチェックし、消去となります。
■Chromeの解説
「履歴」→「観覧履歴データを削除する」→「期間」→「全期間」→「データを消去」となります。
他のブラウザで試してみる
現在使用しているブラウザが、インターネットエクスプローラーならfirefoxやGoogleChromeで開いてみる等、ほかのブラウザで試してみることをおすすめします。
原因がキャッシュである場合は、
- スーパーリロードを試す
- 他のブラウザで試す
この２つの方法で解決できます。
wp-config.phpにコードを追加する
サーバー内のWordPressを構成しているphpの中に、wp-config.phpというphpがあり、このwp-config.phpにコードを追加することで解決する場合もあります。
FTPソフトなどを使用して、wp-config.phpに以下のコードを記述して完了です。
TinyMCE Advancedのソースを入れ替える
tinymceか、TinyMCE Advancedのソースを入れ替える方法があります。
先に、tinymceから解説します。
tinymceとは、WordPressを構成するファイルの１つであり、FTPソフト等を使用し、「wp-includes」→「js」へ進みます。
tinymceのファイルが原因の場合、ファイルの内容が変わっている可能性があるので、その場合はWordPressの公式サイトへ飛び今と同じバージョンをダウンロードし、tinymceのフォルダを入れ替える事で改善します。
TinyMCE Advancedに原因がある場合は、プラグインを削除して再インストールする方法とソースを入れ替える方法があります。
ここでは、ソースを入れ替える方法を解説します。
「プラグイン」の項目をクリックします。
以下のURLはWordPressのTinyMCE Advancedのホームページなので、そのホームページへリンクしてダウンロードします。
そして、FTPソフトなど使用し、WordPressのファイルにアクセスし、「wp-content」→「plugins」のファイルを開き、TinyMCE Advancedを入れ替えます。
他の干渉している可能性のあるプラグインを停止する
他の干渉している可能性のあるプラグインを停止して状況を確認する方法を説明します。
インストール済みプラグインをクリックします。
1つずつプラグインを停止してビジュアルエディタが改善するか検証をしていきます。
プラグインやWordPressのバージョン問題
プラグインやWordPressのバージョンが古いことが原因でビジュアルエディタに不具合が発生する場合があります。
- 古いバージョンを使用しているならアップデート
- 新しいバージョンを使用しているならダウングレード
すると良いです。
プラグインのバージョンをアップデートする方法は、「インストール済みプラグイン」をクリックし、アップデートの情報が出ている場合は、「更新」をクリックすると完了になります。
WordPressのバージョンが古い場合で、アップデートをする方法は、「ダッシュボード」の「更新」をクリックします。
アップデート出来る場合は、更新の通知が出ているので「更新」をクリックして完了となります。
WordPressのダウングレードの方法は2つあります。
1つ目は、ダウングレードできるプラグインをインストールする方法です。
「WP Downgrade Specific Core Version」というプラグインがあります。
このプラグインを使ってダウングレードをすると、投稿記事が消える危険性もなく、プラグインを削除する事ですぐに元のグレードに戻す事が出来る為、こちらをおすすめします。
※もし最新のバージョンに更新したい場合は、この「WP Downgrade Specific Core Version」のプラグインを停止すると更新情報の通知が届きます。
まとめ
TinyMCE Advancedの使い方とおすすめ設定方法、不具合の対処法を解説しました。
このプラグインを導入しなくても記事作成は出来ますが、作業効率や読みやすい文章を書くことを考えるとあったら便利なプラグインになります。
設定方法を忘れた時や、不具合が発生した時、おすすめの設定方法やカスタマイズを忘れてしまった時にこの記事を読み返す事で設定のやり方やトラブルの解決策が見つかり、素早く記事作成作業に戻れるはずです。
