tinymce-advanced-setting

WordPressブログ運営

TinyMCE Advancedの設定方法と使い方【ビジュアルエディタ拡張・WordPressプラグイン】

更新日:

この記事では、

  • WordPressプラグイン「TinyMCE Advanced」とは?
  • 「TinyMCE Advanced」の導入方法(インストールと有効化)
  • 「TinyMCE Advanced」の基本的な設定方法と使い方

この3点について、わかりやすく見ていきます。ちなみに「TinyMCE Advanced」は通常無料のプラグインです。

初心者向けな内容です。

【この記事の執筆者について】まるといいます。主にブログ・アフィリエイトで生きています。

はじめに

プラグインの種類によっては、導入済みのテーマやプラグインとの相性、プラグイン自体の問題などにより、WordPressに不具合が発生する可能性があります。プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任でお願いいたします。

【関連記事】⇒BackWPUpの設定方法と使い方を優しく解説【バックアップ・WordPressプラグイン】

WordPressプラグイン「TinyMCE Advanced」とは?

「TinyMCE Advanced」は、記事作成画面における「ビジュアルエディタ」の機能ボタンを拡張できるプラグインです。

tinymce-advanced-setting_15

画像はクリックで拡大されます

WordPressブログの記事作成では、次の2タイプのエディタから作成方法を選択できますよね。

ビジュアルエディタ(ビジュアルモードとも呼ばれてたりします)

テキストエディタ(テキストモードとも呼ばれてたりします)

きっと初心者の方でしたら、「ビジュアルエディタ」の方が使う割合で言うと圧倒的に多いかと思います(私自身の経験から)。

主な特徴

  • 「ビジュアルエディタ」の機能ボタンを格段に増やすことができる。
  • 機能ボタンは増やすだけではなく、使うボタンだけに絞って配置も自由に決められる。

使い方も簡単です。さっそく見ていきましょう。

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

「TinyMCE Advanced」の導入方法(インストールと有効化)

普通に「インストールと有効化」をするだけなので、わかる方は飛ばしてください♪

WordPress管理画面 > プラグイン > 新規追加 をクリックします。

tinymce-advanced-setting_03

画像はクリックで拡大されます

検索欄に、「TinyMCE Advanced」と入力します。

プラグイン「TinyMCE Advanced」が表示されますので、 今すぐインストール > 有効化 の順にクリックします。

tinymce-advanced-setting_04

画像はクリックで拡大されます

インストールと有効化はこれでOKです♪

「TinyMCE Advanced」の基本的な設定方法と使い方

WordPress管理画面 > 設定 > TinyMCE Advanced をクリックします。

tinymce-advanced-setting_06

画像はクリックで拡大されます

まず、画面一番上の「エディターメニューを有効化する。」にチェックを入れます。ちなみにこのチェックを外すと、「TinyMCE Advanced」の機能そのものがオフになります。

「使用しないボタン」の一覧から、↓の画面のように「ビジュアルエディタで使いたいボタン」をドラッグして、その上に表示されているエディタメニューの「好きな行」の「好きな並び順」でドロップします。

tinymce-advanced-setting_07

画像はクリックで拡大されます

※「ドラッグ」はクリックを押しっ放し、「ドロップ」はクリックを放すことです。

反対に「ビジュアルエディタで使用しないボタン」については、↓の画面のように「使用しないボタン」側にドラッグ&ドロップすることで、ビジュアルエディタ上で非表示にすることができます。

tinymce-advanced-setting_08

画像はクリックで拡大されます

そのほかの設定項目については、私は以下のように設定しています。

  • 「フォントサイズ」:チェックを入れます。これでフォントサイズの単位が「px(ピクセル)」に変更されます。
  • 「段落タグの保持」:チェックを入れます。これで、記事編集時に「ビジュアルモード」から「テキストモード」に切り替えた際に生じてしまう「改行エラー(改行タグの自動変換により発生するズレ)」を減らすことができます。
  • 残りの設定項目:デフォルトのままです。
tinymce-advanced-setting_14

画像はクリックで拡大されます

それからもう1点!

初めての方にはちょっとわかりづらい、「ツールバー切り替え」ボタンについてもご紹介しておきます。

「ツールバー切り替え」ボタンを、↓の画面のように「1行目」にドラッグ&ドロップします。

※2行目以降に入れてしまうと、この「ツールバー切り替え」は機能しません。

「ツールバー切り替え」ボタンを追加する理由は、このあとすぐ見ていきますね。

tinymce-advanced-setting_10

画像はクリックで拡大されます

これで基本的な設定はOKです。

記事編集の画面を見ると、↓の画面のように表示されています。

tinymce-advanced-setting_11

画像はクリックで拡大されます

画面を見ると、1行目しか表示されていませんね。

これは、先ほどご紹介した「ツールバー切り替え」ボタンを入れているためです。

2行目以降は隠れている状態です。

2行目以降のビジュアルエディタも表示するには、↓の画面のように「ツールバー切り替え」ボタンをクリックします。

tinymce-advanced-setting_12

画像はクリックで拡大されます

2行目以降のボタンが表示されました。

tinymce-advanced-setting_13

画像はクリックで拡大されます

このように、「ツールバー切り替え」ボタンをクリックすることで、「2行目以降のボタンの表示・非表示」を切り替えられます。

ちなみに、使用するエディタの中に「ツールバー切り替え」ボタンを入れていなければ、最初から2行目以降も表示されます。

また各ボタンの機能については、それぞれのボタンにカーソルを合わせると簡単な説明が表示されます。

「TinyMCE Advanced」の基本的な設定方法と使い方は以上です♪

【デザイン簡単、SEO対策と広告収入UPの機能が標準装備!】

wing_300_blog

検証と改善を重ねた唯一無二のワードプレステーマ WING AFFINGER5

この記事を書いている人

まる

丸10年の会社員生活から独立して、WEB業界でフリーランスをやってます。このブログでは、

・『WordPressブログ』の初心者向けマニュアル

・大好きな『東野・岡村の旅猿』ネタ

この2つを中心に発信しています。

↓↓↓ 記事を気に入って頂けたらぜひシェアをお願いします♪

-WordPressブログ運営

Copyright© MAL LiFE LOG , 2018 All Rights Reserved.