【新エディター対応】TinyMCE Advanced ―読みやすさ向上に役立つ使い方 – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【新エディター対応】TinyMCE Advanced ―読みやすさ向上に役立つ使い方

公開日 最終更新日

TinyMCE_Advanced_使い方

WordPressで記事を作成してみたけど…ちょっと地味くま~?
WordPress本体のエディターには、必要最低限の機能しか使えないです~。でもプラグインを導入すれば、もっと使える機能を強化できるです~。

 

WordPressで初めて投稿する時、誰もが感じるのは

「何か…思ってたのと違う…。」

人気サイトの記事とは対照的に、無味乾燥な印象を持たれるかと思います。

 

デフォルト_エディター機能

※プラグインを使わずにWordPressエディターで作った記事

 

それは、あなたの文章力が低いせいではなく、エディターの機能が貧弱だからです。

例えば、初期状態のWordPressには、以下のようなエディター機能があります。

 

エディター画面の初期機能

・段落と見出しの設定

・太文字

・イタリック

・番号付き(無し)リスト

・左寄せ・中央寄せ・右寄せ

・「続きを読む」挿入

・打消し

・テキスト色の設定

 

しかし、読者の目を引く記事を作るのに、これらの機能だけでは不十分です。

どんなに文章や内容が良くても、きちんと装飾や強調ができていないと、読者は途中で読み飽きてしまいます。

 

TinyMCE_Advanced_導入後

 

上図は、エディター機能を強化するプラグイン「TinyMCE Advanced」導入後に作成した記事です。

「下線」や「背景色」「大きさ」を調整しただけですが、全体の要点をパッと見で把握しやすくなりました。

つまり記事の「読みやすさ」は、エディター機能のスペックによって大きく左右されるのです。

 

WordPressのエディター機能を強化するためには、プラグインを導入する必要があります。

中でも「TinyMCE Advanced」は、読者を惹きつけるコンテンツの作成には欠かせないプラグインです。

 

TinyMCE Advancedを導入すると、エディター画面が以下のようにクラスチェンジします。

 

装飾機能が増える

 

無料で利用できるため、まだ導入していない場合はインストールをオススメします。

今回は、そんな「TinyMCE Advanced」の特徴と活用方法をレクチャーしたいと思います。

 

TinyMCE Advancedとは

TinyMCE Advancedとは、WordPressのエディターに装飾機能などを強化するプラグインです。

柔軟なカスタマイズ性と使いやすい操作性が評判で、多くのWordPressユーザーに愛されています。

TinyMCE Advancedを導入すると、エディター画面に以下の機能を追加できます。

 

TinyMCE Advancedで追加できる主な機能

・フォントファミリーの指定

・フォントサイズの指定

・打消し線

・下線

・テキスト背景色

・テーブル

・動画埋め込み

 

具体的な追加方法の解説に入る前に、一つだけ注意しなければならないことがあります。

それは、あなたが使っているWordPressによって、TinyMCE Advancedの使い方が異なるという点です。

18年12月に行われたアップデートにより、WordPress本体のエディター画面が大幅にリニューアルされました。

そのため、WordPressバージョン5.0以降以前とでは、TinyMCE Advancedの仕様が異なります。

 

旧エディター_新エディター

 

そこで、この講座では新旧両方のエディター画面でTinyMCE Advancedを使う方法をレクチャーしたいと思います。

 

TinyMCE Advancedの使い方(旧エディター編)

WordPress5.0以前またはプラグイン「Classic Editor」を使用しているユーザー

 

TinyMCE Advancedの使い方(新エディター編)

WordPress5.0以降を使用しているユーザー

 

それぞれプラグインの導入方法から順番に解説を進めているので、あなたが使用しているエディター画面に合った解説をお読みください。

 

TinyMCE Advancedの使い方(旧エディター編)

この章では、WordPress5.0より前のバージョンで旧エディターを使っているユーザーを対象にTinyMCE Advancedの使い方をレクチャーします。

ちなみに、5.0以降のバージョンでもプラグイン「Classic Editor」を使用すれば、旧エディターを使うことができます。

 

※Classic Editorについて詳しく知りたい方は、以下の講座をご覧ください。

【Classic Editor】旧編集画面を復活させる方法【WordPress最新版】

 

TinyMCE Advancedのインストール方法

まずTinyMCE AdvancedをWordPressにインストールしましょう。

WordPress管理画面にログインし「プラグイン」⇒「新規追加」へと進みます。

 

プラグイン_新規追加

 

表示された画面右上にある検索フォームに「TinyMCE Advanced」を入力。

 

プラグイン_検索

 

検索結果からTinyMCE Advancedを見つけたら「インストール」をクリックします。

インストールが完了するとボタンが「有効化」に変わるので、そのまま有効化してください。

これで、TinyMCE Advancedの導入は完了です。

 

TinyMCE Advancedの設定方法

TinyMCE Advancedは、WordPress管理画面の「設定」⇒「TinyMCE Advanced」から設定します。

 

設定_TinyMCE_Advanced

 

Classic_Editor

 

まず、タブを「Classic Editor(TinyMCE)」に切り替えましょう。

Toolbars for the Classic Editor」以下4列のフォームに配置されている機能が、記事編集時に利用できる機能です。

 

ドラッグ_ドロップ

 

ここに「使用しないボタン」から必要な機能をドラッグ&ドロップで追加していきます。

 

ドラッグ_ドロップ

 

逆にエディター画面には不要だと思うボタンは、「使用しないボタン」以下に移動させましょう。

ここで、TinyMCE Advancedで強化できる主な機能の特徴を詳しくご紹介します。

※WordPress本体に最初から付属している機能については紹介を除きます。

 

フォントファミリーの指定

文字のデザインを変更できます。

可愛い文字やかっこいい文字など好きなものから選択しましょう。

 

フォントファミリー

 

ただし、読者の画面にフォントがきちんと反映されるには、読者が利用しているブラウザがフォントに対応していなければなりません。

そのため、ゴシック体明朝体など大手ブラウザが対応しているフォントがオススメです。

 

・フォントサイズの指定

文字のサイズを変更できます。

 

フォントサイズ

 

・打消し線

誤った内容や更新前の情報を訂正せず、あえて明示しておきたい時に打消し線が便利です。

 

打消し線

 

・下線

下線(アンダーライン)は、主に強調したいワードや文章に適用します。

 

アンダーライン

 

・テキスト背景色

テキスト背景色は、主に強調したいワードや文章に適用します。

下線とは異なり、マーカーを引いたような印象になります。

 

テキスト背景色

 

・テーブル

テーブル機能は、記事内にエクセルのような表を作成できます。

後から列・行を追加したり、除いたりすることが可能です。

細かいデータや情報を読者に伝えたい時に有効です。

 

テーブル

 

・insert/edit video(メディア挿入)

Youtube等の動画を記事内に埋め込む時に使用します。

 

insert_edit_video

 

Youtubeの動画であれば、TinyMCE Advancedを導入しなくても記事本文にURLを入力するだけで埋め込めます。

ただ、TinyMCE Advancedを使えば、埋め込みサイズを自由に変更できます。

 

ここまで紹介した機能は、記事作成では頻繁に使うことになるため、「Toolbars for the Classic Editor」に追加しておきましょう。

 

Toolbars_for_the_Classic_Editor

 

最後に、設定ページ最下部の「変更を保存」をクリックすれば準備完了です。

 

TinyMCE Advancedの活用方法

それでは、TinyMCE Advancedの機能が旧エディター画面にきちんと追加されているか確認してみましょう。

 

旧エディター

 

無事、追加されていますね。

すでに下書き保存・投稿済みの記事を編集する際にも、TinyMCE Advancedの設定が問題なく反映されています。

それでは、各種エディター機能の使い方を解説していきます。

 

・テキスト装飾機能

通常のエディター操作と同様に、装飾したいテキストを選択しボタンを押せばOKです。

 

装飾方法

 

また、テキスト装飾は、同じテキストに対して複数適用することもできます。

 

複数の装飾を適用

 

・テーブル

テーブルを作成する時は、まず行・列の構成を指定します。

 

テーブル_使い方

 

また、後から行・列の追加や削除も可能です。

 

列_行_追加

 

・動画の埋め込み

Youtubeの動画コードをTinyMCE Advancedの機能を使って埋め込みます。

まず、動画のコードを取得しましょう。

記事内に埋め込みたい動画のページを開きます。

 

Youtube_共有

 

「共有」⇒「埋め込み」と移動し、動画コードをコピーしてください。

 

埋め込む

 

次にWordPressのエディター画面に移動し、「メディア挿入」ボタンをクリックします。

 

メディア挿入_編集

 

「ソース」に先ほどのコードを貼り付けます。

 

コード挿入

 

この設定では自由にサイズを指定できるため、記事のレイアウトに合わせた埋め込みが可能です。

 

TinyMCE Advancedの使い方(新エディター編)

WordPressエディターは、18年12月のアップデートにより大幅にリニューアルされました。

この章では、リニューアル後の新エディターでTinyMCE Advancedの機能を追加・活用する方法について解説します。

 

※新エディターの詳しい使い方は、以下の講座をご覧ください。

【WordPress】新エディター「Gutenberg」の使い方【2020年最新情報】

 

なお、TinyMCE Advancedのインストール方法については、旧エディターと同じです。

 

TinyMCE Advancedの設定方法

TinyMCE Advancedで旧エディター画面に追加した機能は、新エディター画面に引き継がれません

そのため、旧エディターでTinyMCE Advancedを使っていても、新エディターに乗り換える際には再設定が必要です。

 

まず、WordPressダッシュボードより「設定」⇒「TinyMCE Advanced」に移動してください。

2つのタブのうち「Block Editor (Gutenberg)」が新エディターの設定画面です。

 

Gutenberg

 

Toolbars for the Block Editor」以下はドラッグ&ドロップで機能ボタンの配置を決めます。

新エディターでは機能ボタンを配置できる場所が2か所あります。

 

Main toolbar(メインツールバー)

Alternative side toolbar(サイドバー)

 

メインツールバーは、各ブロックのツールバーのことです。

 

メインツールバー

 

サイドバーとは、新エディター画面の右手のサイドバーのことです。

 

formatting

 

すでに設定されている機能ボタンを、ドラッグ操作で任意の配置に変更してみましょう。

 

サイドバー_配置

 

また、「Unused buttons for the blocks toolbars」には、不要なボタンを置きます。

とは言え、全てのボタンをツールバーまたはサイドバーに設置しておいても問題ありません。

Enable setting of selected text color(文字色の設定を許可)」と「Enable setting of selected text background color(文字の背景色の設定を許可)」は2つとも「yes」にチェックを入れておきましょう。

 

文字色選択

 

Toolbars for the Classic Paragraph and Classic blocks(クラシックパラグラフまたはクラシックブロックのツールバー)」以下は、「Classic Paragraph」ブロック使用時の設定です。

新エディターでも「Classic Paragraph」ブロックを使うと、旧エディターのツールバーを使って編集できます。

 

classic_pragraph

 

ここに、TinyMCE Advancedの機能を追加します。

Unused Buttons for the Classic Paragraph and Classic blocks toolbars」以下のボタンから好きな機能を選び、ドラッグ&ドロップで追加します。

 

機能追加

 

最後に「変更を保存」をクリックすると反映されます。

 

TinyMCE Advancedの活用方法

それでは、新エディターでTinyMCE Advancedの機能を使ってみましょう。

まずブロックを新規作成し、テキストを入力します。

 

「▼」ボタンを押すと、設定で追加した機能を適用できます。

試しに打消し線を試してみましょう。

 

打消し線

 

打消し線

 

また、サイドバーに機能ボタンを配置している場合には、「Formatting」項目からテキスト装飾等の機能を利用できます。

 

alternative_side_toolbar

 

さらに「Text Color」では、選択テキストの文字色・背景色を設定できます。

 

文字色選択

 

カスタムカラー」をクリックすると、自由に文字色を選択できます。

 

テキスト背景色

 

新エディターの元々の機能に「色設定」がありますが、ブロック全体の色を変えてしまい、ブロック内の一部の文字色を変更できませんでした。

TinyMCE Advancedを使用することで、テキストまたはテキストの一部の色を変更できるようになり、新エディターの弱点を補うことができます。

 

「TinyMCE Advanced」のおさらい

簡単に今回のまとめをしておくです~。
まとめ

・読者の目を引く記事を作るためには、WordPress本体のエディター機能だけでは不十分

・TinyMCE Advancedは、多彩なテキスト装飾やテーブルの設置など、記事作成に欠かせないエディター機能を追加できる

・WordPressの新旧バージョンによって、TinyMCE Advancedの設定・活用方法が異なる

 

関連記事

【WordPress】使いにくい投稿画面をカスタマイズする方法 おすすめプラグイン5選

【初心者必見】WordPressで投稿してみよう【旧エディター】

WordPressで改行タグが消える!原因と対処方法

 

新規パートナー無料登録はこちら

 

サイト作成コース 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による