ビジュアルエディタ「TinyMCE Advanced」の使い方

プラグイン

ビジュアルエディタ「TinyMCE Advanced」で簡単記事作成(できることと使い方の解説)

TinyMCE Advancedをイメージするペンの画像

「TinyMCE Advanced」は記事を作成する際に使用するビジュアルエディタの機能を拡張するWordPressプラグインになります。

WordPressではデフォルトでhtmlの知識が無くても簡単に記事を作成できる「ビジュアルエディタ」という機能があります。

最初のうちは、このデフォルトの機能だけでも大丈夫なんですが、記事を書いてるうちに

フォントの種類を変えたい

表を作成したい

間違えたから一つ前に戻りたい

って思ったことがあるかもしれません。

そんな時、もっと便利な機能があればいいのに!!!

って思ったことは、一度や二度ではないはずです。

そんな要望を叶えてくれるのが今回紹介する「TinyMCE Advanced」というプラグインになります。

是非、このプラグインをインストールして快適に記事を作成してみて下さい。

「TinyMCE Advanced」でできること

「TinyMCE Advanced」ではおよそ50種類の機能を拡張できます。

主な機能としては、デフォルトの設定に加えて、

  • コピー
  • ペースト
  • 切り取り
  • 表の作成、挿入
  • テキストに下線を引く
  • テキストに打消し線を引く
  • タグを枠で囲う
  • 1つ前に戻る
  • 取り消した作業を元に戻す

まだまだ沢山ありますが、大抵のことはこのプラグインで出来るようになります。

それでは、「TinyMCE Advanced」のインストール方法について解説していきます。

TinyMCE Advancedをインストール

それではWordPressプラグインの「TinyMCE Advanced」をインストールしていきます。

このプラグインをインストールするためには2通りの方法があります。

  • 「TinyMCE Advanced」配布サイトから直接ダウンロード

プラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。

  • WordPress管理パネルのプラグイン新規追加からインストール

WordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。

「TinyMCE Advanced」配布サイトからダウンロード

まずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。

サイトはこちらになります。↓↓(配布サイトは別タブが開きます)

TinyMCE Advanced

こちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。

TinyMCE Advancedのzipファイルの画像

ダウンロードしたプラグインを展開します。

TinyMCE Advancedファイルの画像

アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、

TinyMCE Advancedのプラグイン画面

プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。有効化後は管理パネルにある設定画面からいつでも設定を変更できるようになります。

※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。

これで、直接インストールする方法は完了しました。

詳しい設定方法については、後ほど解説します。

WordPress管理パネルのプラグイン新規追加からインストール

次に紹介するのは管理パネルからプラグインをインストールする方法になります。

まずは、管理パネルから「プラグイン新規追加」をクリックします。

プラグインの検索に「TinyMCE Advanced」と入力します。

プラグイン追加画面の画像

このように表示されるので「今すぐインストール」をクリックします。

有効化ボタンの画像

有効化をクリックしてインストールが完了します。

管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。

TinyMCE Advancedプラグイン設定の画像

プラグインのインストールの解説はこれで終了です。

次は実際に設定を行っていきましょう。

「TinyMCE Advanced」の使い方

それでは具体的な使い方について解説していきます。

まずは「TinyMCE Advanced」をインストールする前のビジュアルエディタ画面を見てみます。

インストール前のビジュアルエディタ

インストール前のビジュアルエディタ画面の画像

「TinyMCE Advanced」インストール後のビジュアルエディタ

インストール後のビジュアル画面の画像

何か色々なアイコンが追加されていますね(笑)「TinyMCE Advanced」では、上記の基本設定に加えて、自分好みの機能を追加することもできます。

色々な機能を追加して自分好みのエディタにカスタマイズ

「TinyMCE Advanced」エディタの機能を追加する方法を解説していきます。

管理画面の「設定」から「TinyMCE Advanced」をクリックします。

管理画面TinyMCE Advancedボタンの画像

基本設定画面が表示されます。

エディタ設定画面の画像

エディタの設定方法は簡単です。

「使用しないボタン」の項目から

   ⇓

自分が使いたい機能のアイコンにカーソルを合わせて

   ⇓

左クリックを押しながら、上の空欄のツールバーに移動するだけです。

試しに、「背景色」を移動させてみます。

背景色ボタンの画像

このアイコンにカーソルを合わせて左クリックしながら、上のツールバーへ移動させます。

背景色ボタン移動後の画像

移動後はこのようにアイコンが表示されます。

あとは同じ要領で、好みのアイコンを追加していく感じになります。

最後に「変更を保存」ボタンをクリックして設定を保存して完了になります。

変更を保存ボタンの画像

アイコンの順番は自由に変更できるので、自分で使いやすいようにカスタマイズしてみましょう。

「TinyMCE Advanced」以外の役に立つプラグインも沢山ありますので、いろいろ試してみると良いかもですね。

[徹底解説!]TinyMCE Templatesの設定と使い方
記事のテンプレートを作成できるWordPressプラグイン「TinyMCE Templates」の設定方法と使い方を簡単解説します! このプラグインは、ブログなどの記事を作成する際の作業時間を短縮してくれる便利なプラグインになりま...
ワードプレス無料プラグインPage Builderでトップページ作成
「Page Builder」でトップページをカスタマイズしよう ここではワードプレスのプラグインを使用したトップページの作成方法について解説していきます。 「ブログにホームページのようなトップページを作成したい!!」 「投稿記...
ワードプレス高速化!プラグインa3 lazy loadで簡単設定
a3 Lazy LoadをインストールしてWordPressを高速化しよう サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込...

コメント

タイトルとURLをコピーしました