TinyMCE Advancedの設定と使い方

TinyMCE Advancedの設定と使い方

この記事では、TinyMCE Advancedの設定と使い方について解説します。

2017年8月現在、最新の内容を掲載しています。

 

TinyMCE Advancedとは

TinyMCE Advancedは、ブログライティングに非常に便利なツールです。

このプラグインを利用すると、ビジュアルエディタのツールバーに表示されているボタンを追加することができます。(削除や整列もできます。)

ブログを書くときには、ビジュアルエディタの方が直感的に作業できて楽ですので、インストールしておきましょう。

 

TinyMCE Advancedのインストールと設定

まずはインストールから解説します。

インストールと有効化

管理画面の左側のメニューのところから、「プラグイン」「新規追加」を選択します。

次の画面で、「TinyMCE Advanced」と検索します。

TinyMCE Advancedと検索

鉛筆ののようなアイコンのプラグインが出てきますので、そちらを「今すぐインストール」します。

インストールが完了したら、有効化しておきます。

エディター設定

管理画面のメニューに「設定」がありますので、カーソルをかざし、さらに出てきたメニューの中から「TinyMCE Advanced」を選択します。

設定からTinyMCE Advancedを選択

設定画面が出てきますので、進めていきましょう。

すべての作業がドラッグ・アンド・ドロップとチェックボックスだけて済みますので、簡単ですよ^^

 

エディターメニューの編集

ビジュアルエディターでブログを書いていくとき、上の方にエディターメニューがあります。

これを利用することで、いろいろな装飾を手軽に施すことができるというスグレモノです

しかし、残念ながらデフォルトの状態では少しばかり痒いところに手が届かないエディターメニューになっています。

それを今から補強して、最高にノンストレスなブログライフにしましょう!

 

まず、デフォルトの状態はバージョンにもよりますがおよそ下の画像のような感じだと思います。

デフォルトのエディターメニュー

 

もし、デフォルトの状態でこれと違っていても大丈夫です。

このTinyMCE Advancedの設定内ですべて追加することができます。

私はこのエディターメニューを下の画像のように設定して使っています。

変更後のエディターメニュー

 

ほんの数個ですが、追加したものと、削除したものがあります。

それでは、追加する方法と削除する方法を解説します。

と言っても、直感的に操作しても大丈夫な作りになっているので、めちゃくちゃ簡単です。

まず、下の画像をご覧下さい。

エディターの設定方法

エディターメニューの編集は、矢印が示すようにドラッグ・アンド・ドロップするだけで簡単に行うことができます。

上の画像で示した色の分類は、

  • 赤…メニューに追加したもので、好きなところに追加できるもの
  • 緑…メニューに追加したもので、2段目の最後尾に置くべきもの
  • 青…メニューから削除したもの

です。

緑色で支持したメニューは「ツールバー切り替え」です。

これは、ライティング画面でクリックすることで3段目のメニューの表示・非表示を切り替える便利なボタンです。

昔は最後尾に設置しないと効果が発揮されない時期があったのですが、今では最後尾でなくても大丈夫です。

でも、やはり最後尾に設置した方がわかりやすいので、その場所を推奨しています。

それに、今後思わぬエラーが起きないとも限りませんので。

ちなみに、このプラグインはこれまでのようなSEOに効果があるようなタイプのものではありません。

コンテンツを見やすくするという意味で間接的にはSEOに貢献しますが、直接的な貢献はありません。

ですので、このエディターメニューの編集はこれが正解というのはありません。

ブログを書く自分がやりやすければOKです。

ですので、上の例にとらわれずに、一度自分自身でいろいろ導入して試してみてください。

一度メニューを決めたら右の方にある「変更を保存」をクリックすることで設定を反映させることができます。

変更を保存をクリックする

私も、片っ端からメニューに追加して保存して投稿画面で使ってみて、また追加して削除して保存して使ってみて、と試行錯誤を繰り返しました。

自分にとってのベストを見つけてくださいね。

 

エディターメニューの設定

そのすぐ下に、「設定」の項目がありますので、今度はそちらを設定していきましょう。

と言ってもここも非常に簡単で、以下のように設定すると良いです。

リアルスタイルオプションとフォントサイズをチェック
  • リストスタイルオプション:チェックする
  • コンテキストメニュー:チェックしない
  • 代替リンクダイアログ:チェックしない
  • フォントサイズ:チェックする

 

チェックする項目の効果について解説しておきます。

上でチェックした2つの項目は、エディターメニューの機能の拡張だと思ってください。

まず、リストスタイルオプションですが、こればエディターメニューの中のリストにオプションメニューを増やす効果があります。

リストのオプションが増える

リストスタイルオプションをチェックしない場合、ライティング時に上の画像のように表示され、黒丸か数字のリストしか作れません。

しかし、これをチェックすると、黒丸の方は

黒丸リストが4種類に増える

このように4種類のリストを使い分けられるようになり、数字の方は

番号リストは6種類に増える

このように6種類ものリストを使えるようになります。

ただ、1つのブログにいろんなリストが登場すると読む方もゴチャゴチャ感を受けるかもしれないので、この中からお気に入りを作って、それだけを使い続けるといいと思います。

 

次にフォントサイズです。

フォントサイズはデフォルトでは36pxまでしか使えません。

しかし、これをチェックすることによってなんと96pxまで使えるようになります。(え、使わないですって?笑)

文字サイズのバリエーションが増える

めちゃくちゃ強調したいときに使わないとも限らないので、チェックしておきましょう!

個人的には小さい文字の方が捨て台詞とかつぶやき感が出て好きですけどね。

 

高度な設定オプション

次はその下にある高度なオプションを設定していきます。

これは下の画像のように、真ん中の項目だけチェックしてください。

TinyMCE Advanced高度なオプション

これでOKです。

 

管理

管理はデフォルトのままでOKです。

TinyMCE Advanced管理はそのままでOK

すべて最初からチェックが入っていると思いますが、入っていなければチェックしておいてください。

最後に変更を保存するのも忘れずに^^

最後に変更を保存するのを忘れずに

 

ここまで終われば設定完了です!

お疲れ様でした!

それぞれのエディターメニューのライティング中の使い方については、また別記事を設けようと思いますので、楽しみにしておいてくださいね。

 

 

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

Google XML Sitemapsの設定と使い方

Google XML Sitemapsの設定と使い方

Akismetの設定方法

Akismetの設定方法と使い方

WordPressをSearch Consoleに登録する方法

WordPressをSearch Consoleに登録する方法

WordPress Popular Postsの設定と使い方

WordPress Popular Postsの使い方

WP QUADSでアドセンスをかんたんに設置

WP QUADSの使い方とアドセンス広告の設置

autoptimizeの設定と使い方

Autoptimizeの設定方法