ビジュアルエディターに機能を追加する「TinyMCE Advanced」の使い方


unsplash-logoRay Hennessy

WordPressで記事を書くときに、一般的にはビジュアルエディターを使うことが多いと思います。ビジュアルエディターはインストールしたままだと、今ひとつ使い勝手が良くないので「TinyMCE Advanced」というプラグインを使うと、便利になるのでプラグインをインストールしてどのように便利になるか?使い方は?について調べてみました。

TinyMCE Advancedのインストール

TinyMCE Advanced をインストールします。

ダッシュボード プラグイン>新規追加 をクリック

TinyMCE Advanced と入力します。

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

TinyMCE Advancedを入れるとどのように変わるのか、見てみる

TinyMCE Advanced を入れる前と入れた後がどのように変わるのかを見てみます。

TinyMCE Advanced を入れる前のビジュアルエディターは

こんな感じで、わりとあっさりしています。

TinyMCE Advanced を入れた後に見てみると、

おぉ!だいぶ機能が増えていますね!。

デフォルトで追加された機能を使ってみる

TinyMCE Advancedを入れると追加された機能はどんなものか、いくつか使ってみたいと思います。

文字の大きさを変える

文字の大きさを変えてみます。

こういう文章を入れたとして、225の部分を大きくしたいなと思ったら

36ptを選ぶと

文字が大きくなりました!

テーブルを作ってみる

テーブルって、コードで書くとややこしくて、という方も多いかと思います。

テーブル、というボタンをクリックして

テーブルという文字に移動すると、こんな風に目で見て分かりやすい感じにテーブルを選択する画面になります。

作りたい列、行の範囲にカーソルを持って行ってクリックします

このようにテーブルができました。

あとは、

セルに文字を入れていきます。

日本語を入力しようとすると、このように最初の1文字が英語になってしまう場合があるのでそういう時は 半角のスペースを1つ入れてから、日本語を入れるとうまく入れることができます。

列の幅を変えたり、

セルを選択してから(選択したところが青くなります) 

テーブル>セル>セルのプロパティ をクリックして

詳細タブをクリック

セルのプロパティ画面で、背景色のところにあるボタンをクリックして、

変えたい色をクリックして、

OKをクリック

このように、セルの背景色を変えることもできます。

TinyMCE Advancedのカスタマイズをする

TinyMCE Advanced のカスタマイズをしてみます。

ダッシュボード 設定>TinyMCE Advanced をクリック

このような設定画面が表示されます。赤枠の部分が、現在ビジュアルエディタで表示されている部分です。

ここで必要なボタンを追加したり、不要なボタンを削除したりしてみます。

ビジュアルエディタに 顔文字 を追加する

現在表示されいないけれども、表示させたいボタンを追加します。

使用しないボタンから

顔文字 をドラッグして、

表示させたい位置にドロップします。

変更を保存 をクリック

これでビジュアルエディタを見てみると

このように顔文字が追加されて、

顔文字を追加できるようになりました。

必要ないボタンを消す

次に使わないだろうなぁと思うボタンを表示しないようにしてみます。

フォントファミリーを消しておきたいと思います。

表示されている部分から、ドラッグして、使用しないボタンのところにドロップします。

変更を保存 をクリック

ビジュアルエディターを見ると フォントファミリー が表示されなくなっていました。

ボタンの位置を並べ替える

ダッシュボード 設定>TinyMCE Advanced

で、ボタンの位置を使いやすいようにドラッグ&ドロップで並べ替えて、変更を保存をクリックすると

こんな風に自分がよく使うボタンを下の方に配置して、編集中にクリックしやすくしました。

設定と高度なオプション

ダッシュボード 設定>TinyMCE Advancedには他に

設定 高度なオプション という指定ができます。これらのうち、自分ならこれを設定しておきたいという部分をご紹介します。

設定:フォントサイズの指定方法をpt(ポイント)からpx(ピクセル)に

設定にある フォントサイズ

チェックして、変更を保存 します。

これでフォントサイズが pt(ポイント)からpx(ピクセル)になりました。現在ではpxを使うことがほとんどなので、これはチェックして変更しておきたいと思います。

高度なオプション:編集画面で独自のcssを表示させる

編集画面で見えるcssの装飾が、実際のcssの装飾と異なる場合があります。例えば

ビジュアルエディターで見出し2で装飾をした場合、このように見えますが実際の表示は

このようなものだったりします。これはダッシュボードに、使っているテーマのstyle.cssが反映されないからのようです。これを実際の見た目と同じように表示できるようにします。

高度なオプション CSS クラスメニューの作成を見てみると

このようにエラーが表示されていました。これは使っているテーマ(あるいは子テーマ)にeditor-style.cssがないということのようです。ここに書いてあるとおりに

利用中のテーマ(あるいは子テーマ)のフォルダにあるstyle.cssをコピーして

editor-style.cssというファイル名にします。

この状態で、ダッシュボード 設定>TinyMCE Advanced を見ると

エラーが消えているので

cssクラスメニューの作成をクリックし、変更を保存します。

これで編集画面でも

実際の表示と同じように見えるようになりました。

まとめ:「TinyMCE Advanced」はビジュアルエディターを使うなら入れておくべきプラグイン

ということで「TinyMCE Advanced」はビジュアルエディターを使うなら入れておくべきプラグインだと思います。ビジュアルエディターを主に使っていて、まだ「TinyMCE Advanced」を入れていない方はお試し下さい。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。