ワードプレスで記事作成が便利になるプラグインTinyMCE Advancedの使い方

記事作成プラグインイメージ

ワードプレスの投稿画面には便利なビジュアルエディタ機能がついています。ただデフォルトの状態ではブログ記事を作成する上で少々物足りないものとなっています。

記事を書くのに慣れてくると文字を装飾したり、表などを挿入してみたくなるものです。そんな時にテキストモードでHTMLタグを使用して装飾するのは知識のある人でも面倒に感じるものですね。

今回紹介する「TinyMCE Advanced」は、面倒なHTMLタグを使わずにボタン1つで様々な装飾ができる便利なプラグインになっています。HTMLの知識が全くなくても一流のブログ記事が書けるようになりますので、是非参考にしてみてください。

スポンサーリンク

TinyMCE Advancedの使い方

下画像はデフォルトの状態の投稿画面です。非常にシンプルで無駄なものはありませんが、表の挿入や文字の大きさなどを変更するにはテキストモードにする必要があります。

TinyMCE Advanced1

次にプラグインをインストールした投稿画面です。

新たに様々な項目が追加されていることが分かります。フォントの種類や表の挿入、文字の大きさYouTube動画の埋め込みなども簡単にできるようになります。

TinyMCE Advanced2

TinyMCE Advancedをインストールして初期状態のままで使用しても全く問題はありませんが設定画面から自分の好みの機能を追加したりいらない機能を非表示にしたりすることもできるのでプラグインを有効化したら管理画面より「設定」→「TinyMCE Advanced」の順に進んでTinyMCE Advancedの設定画面を表示してください。

TinyMCE Advanced3

TinyMCE Advancedの設定画面が表示されました。ここでは各機能を追加したり削除することができます。

全部で4行表示されているエディターエリア内の好きな場所に機能を追加できます。各機能はクリックしながら動かすことができるので、「使用しないボタン」エリアから必要な機能を上のエディター内に移しましょう。

逆に不要な機能はクリックしながら「使用しないボタン」エリアに移すことでエディター画面から削除することができます。

エディター内の各機能の並び替えも同じ動作でできるので自分の使いやすいように並び替えてみてください。

TinyMCE Advanced4

使用頻度の高い機能を追加して、不要なものを削除してみました。

TinyMCE Advanced5

今回エディターに表示させている機能は以下のようなものになります。

 TinyMCE Advanced6 太字   文字を太くする。
 TinyMCE Advanced7  イタリック  文字をイタリック表示にする。
 TinyMCE Advanced8  下線  アンダーラインを引く。
 TinyMCE Advanced9 引用   引用箇所に使用する。
 TinyMCE Advanced10  背景色  文字の背景色を設定する。
 TinyMCE Advanced11  テキスト色  文字色を変更する。
 TinyMCE Advanced12  横ライン  文字に横線を入れる。
 TinyMCE Advanced13  リスト表示  箇条書きのリスト表示にする。
 TinyMCE Advanced14  番号付きリスト  番号付きのリスト表示にする。
 TinyMCE Advanced15  続きを読む…  moreタグを挿入する。
 TinyMCE Advanced16  ツールバー切り替え  エディターの表示/非表示を切り替える。
 TinyMCE Advanced17  左寄せ  テキストを左寄せにする。
 TinyMCE Advanced18  中央揃え  テキストを中央揃えにする。
 TinyMCE Advanced19  右寄せ  テキストを右寄せにする。
 TinyMCE Advanced20  両端揃え  テキストを均等に表示させる。
 TinyMCE Advanced21  リンクの挿入/編集  テキストにリンクを設定する。
 TinyMCE Advanced22  リンクの削除  設定したリンクを削除する。
 TinyMCE Advanced23  テーブル  表を挿入する。
 TinyMCE Advanced24  フルスクリーン フルスクリーンで記事を作成したい時に使用する。
 TinyMCE Advanced25  インデントを減らす  字下げを減らす。
 TinyMCE Advanced26

 インデントを増やす

字下げを増やす。
 TinyMCE Advanced27  段落  見出しタグを挿入する。
 TinyMCE Advanced28  フォントサイズ  文字の大きさを変更する。
 TinyMCE Advanced29  取り消し  直近の操作を取り消す。
 TinyMCE Advanced30  やり直し  直近の操作をやり直す。

エディターの編集が完了したら「設定」に進みます。ここでは初期状態からチェックが入っている「リストスタイルオプション」と新たに「フォントサイズ」にチェックを入れておきましょう。

「フォントサイズ」にチェックを入れるとデフォルトでは「pt」単位のフォントサイズが「px」単位に変更されます。

TinyMCE Advanced31

次に「高度なオプション」を設定します。

ここでは「段落の保持」のみチェックを入れておきましょう。

ワードプレスで記事を作成している際にビジュアルモードとテキストモードを切り替えることは頻繁にありますが、その際に改行タグや段落タグなどが削除されたり追加されたりしてしまうことがあります。

こちらにチェックを入れることで、そのような問題を解決することができるのでおすすめします。

TinyMCE Advanced32

「管理」の項目は特に何も変更しないで問題ありません。

「設定のエクスポート」「設定のインポート」は、他のワードプレスサイトを作成する場合などに、ここで設定したエディターや各設定をそのまま使いたい時に活用します。

全ての設定が完了したら「変更を保存」で終了です。

TinyMCE Advanced33

「設定のエクスポート」をクリックすると下画像のようにコードが表示されますので、こちらを全てコピーして新しいサイトのTinyMCE Advancedの「設定のインポート」画面に貼り付けるだけで操作完了です。

非常に簡単なので新しいサイトでもTinyMCE Advancedを活用したい方は是非、試してみてください。

TinyMCE Advanced34

設定が完了したら「新規投稿画面」を表示してみましょう。

先ほど設定した配列にエディターがカスタマイズされていることが確認できます。

TinyMCE Advanced35

操作は非常に簡単です。テキストをハイライトして各機能をクリックすることで様々な装飾が可能になります。

TinyMCE Advanced36

文字をハイライトして・・・

TinyMCE Advanced37

テキストカラーを選択すると・・・

TinyMCE Advanced38

下画像のように文字色を一発で変更することができます。

TinyMCE Advanced39

表の挿入も簡単です。「テーブル」マークをクリックして挿入したい表の縦と横を指定すると・・・

TinyMCE Advanced41

このように簡単に表を挿入することもできます。

TinyMCE Advanced41

直感的に操作できるので様々な装飾を楽しんでみてください。

まとめ

簡単操作で投稿画面の機能をアップさせることができるTinyMCE Advancedの使い方を解説しました。非常に高機能でカスタマイズ性も高いので、自分の使いやすいように設定できるのが最大の魅力です。

他のワードプレスサイトに設定をコピーできるので複数のサイトで同じエディター画面を共有することができます。今回は例としてエディター画面を設定しましたが、使いたい機能などがあれば追加して実際に使用してみてください。

通常の投稿画面ではできなかった表の挿入やテキストのカラーを変更するなど、記事の質をアップさせることができる機能を沢山使うことができるので是非、活用してみてください。

スポンサーリンク