TinyMCE Advancedの使い方ーWordPressプラグイン【初心者向け】

WordPressのビジュアルエディタを拡張できるプラグイン【TinyMCE Advanced】の使い方を初心者向けに解説した記事です。他のプラグインよりもカスタマイズ性に優れており、ボタンの位置などを簡単に変更することができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、WordPressのビジュアルエディタを拡張できるプラグインの1つである、TinyMCE Advancedの使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

20160620

 

田島メンター!!WordPressで記事を書いているんですけど、エディタが他のブログサイトのように文字サイズを指定したり文字色を変えたりできないですか〜?

20163020-2

 

確かにWordPressは少し独特だよね。じゃあ、「TinyMCE Advanced」なんてどうかな?

 

20160620

 

どういうプラグインなんですか・・・?

 

 

TinyMCE Advancedとは

インストールするだけでビジュアルエディタを拡張できるプラグインです。エディタ拡張プラグインは他にもありますが、このプラグインは、特にカスタマイズ性に優れています。

いつも使うボタンだけを簡単に並べておけるので、作業効率が上がること間違いありません。

まずはデフォルトのエディタと比較してみましょう。

 

デフォルトのビジュアルエディタ

プラグインインストール前は、こんなシンプルなエディタ画面です。

editoe

 

TinyMCE Advanced導入後のビジュアルエディタ

ビジュアルエディタで利用できるボタンが増え、ブログサービスやMicrosoft Wordと使用感が近づきます。

TinyMCE1

では、設定方法を見ていきましょう。

 

 

プラグインをインストールする

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。

 

有効化すると、ダッシュボード>設定の中に、プラグインの管理画面へのリンクボタンが表示されます。

TinyMCE2

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

プラグインをカスタマイズする

表示するボタンをカスタマイズしてみましょう。管理画面を開くと、たくさんのボタンアイコンが表示されています。

上部は、現在使用中のボタンの一覧です。実際に表示されている順番なので、ドラッグ&ドロップで並び替えることもできます。

 

また、削除したいものは、下の未使用ボタンエリアにドラッグ、追加したいものは使用中のボタン一覧にドラッグするだけです。

TinyMCE3

カスタマイズが完了したら、ページ下部の「Save Changes」をクリックするのを忘れないようにしましょう。

 

ちなみに、管理画面が英語なのでボタンの機能がわかるか不安と思った方がいらっしゃるかもしれませんが、エディタでボタンにマウスオーバーすると、そのボタンの機能が日本語で表示されますのでご安心ください。

TinyMCE4

 

また、複数行設定したにも関わらず、1行目のボタンしか表示されないという場合には、「ツールバーの切り替え」ボタンをクリックすれば2行目以降も表示されます。

TinyMCE6

今回の記事は以上です。

実際に導入してカスタマイズしてみてください。

他のビジュアルエディタを拡張できるプラグインを使ってみたい場合は、Ultimate TinyMCEの使い方も合わせてご覧ください。

 

20160620

 

ありがとうございます!だいぶ書きやすくなりました!

 

20163020-2

 

よかったね!カスタマイズ画面で項目を増やしたり順番を変えたりできるから、自分で書きやすいようにカスタマイズもしてみてね!

20160620

 

はい♪

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。