注目度の高い記事
「TinyMCE Advanced」の設定方法と使い方【おすすめ設定もあわせて紹介】

 

わかば
最近、ブログのテキストを装飾したり表を作りたいな~
なんて思ってるんですけど、やっぱりHTMLの知識がいりますよね?

山本
「TinyMCE Advanced」っていうプラグインを使えば簡単だよ!

わかば
ホントですか!?
じゃあそれの使い方教えてください!

 

ワードプレスの投稿編集画面に便利な機能を追加することができる

プラグイン「 TinyMCE Advanced 」の設定方法と使い方を解説します。

TinyMCE Advanced でできること
  • ビジュアルエディタの機能の拡張
  • テキストの装飾
  • YouTubeなどの動画の埋め込み
  • 表(テーブル)の挿入 等々...

1.TinyMCE Advanced とは

ワードプレスブログのテキストを太文字にしたり色を付けたりする装飾や

表(テーブル)を挿入するのには、テキストエディタに HTML を入力する必要があります。

 

ブログをはじめたばかりの人が、HTML まで覚えるとなったら結構大変な労力が必要ですよね。

 

そこで TinyMCE Advanced プラグインを使うことで

基本的な機能をビジュアルエディタからボタン一つで使用することができるようになります。

 

TinyMCE Advanced を導入していない投稿編集画面
TinyMCE Advancedがない時

TinyMCE Advanced を導入後の投稿編集画面
TinyMCE Advanced がある時

このように投稿編集画面にツールの欄が増え

そこへあなたの使いたい機能を自由に追加することができます。

 

2.TinyMCE Advanced のインストール方法

TinyMCE Advanced プラグイン

TinyMCE Advanced はワードプレスの公式プラグインです。

プラグインの新規追加画面または、以下のプラグインページからダウンロードしてインストールしましょう。

 

参考リンクTinyMCE Advanced プラグインページ

参考リンクプラグインのインストール方法

 

山本
似た名称のプラグインがいくつかあるようなので
間違えないように気を付けましょう

TinyMCE Advanced プラグイン新規追加画面

 

3.TinyMCE Advanced の設定方法

TinyMCE Advanced の設定画面は、ワードプレス管理画面左側メニューから

設定 > TinyMCE Advanced と選択することで開くことができます。

TinyMCE Advanced 設定画面

 

エディター設定画面が表示されるので、旧エディター のタブをクリックしましょう。

エディター設定画面で「旧エディター」を選択

 

あとは、下の欄のツール一覧の中から、あなたが使いたいものを上のツールバーの欄にドラッグ&ドロップするだけでOK!

下のツール一覧からツールバーにドラッグ&ドロップ

 

最後に右上の 変更を保存 をクリックすると設定が保存されます。

 

4.TinyMCE Advanced の使い方

それでは、設定画面で追加した機能を実際に使ってみましょう!

山本
TinyMCE Advanced の機能はすごくたくさんあるので
よく使うものに絞って解説していきますね

 

TinyMCE Advanced の機能を使うためには、投稿の編集画面でビジュアルエディタを選択しましょう。

ビジュアルエディタを選択する

 

わかば
登録したはずのツールバーが表示されません...

山本
そんな時は、「ツールバー切り替えボタン」をクリックすると表示されます

ツールバーの切り替えをクリックする

 

4-1 見出しの設定

まずは一番よく使う機能として、見出しの設定からいきます。

見出しや太字などテキストを対象とする場合は、まず設定したいテキストの範囲を選択します。

テキストの範囲を選択する

 

次に「段落」のボックスから「見出し2」を選択します。

次に見出し2を選択する

 

するとこのように、選択した段落が見出し2になります。

選択した段落が見出し2になった

 

同じ手順で、見出し3や見出し4なども設定することができます。

もう1度段落に戻したい時は、テキストを選択して「段落」をクリックすれば戻ります。

 

4-2 テキストの装飾

テキストの装飾に関してもやり方はまったく同じです。

装飾したいテキストを選択して、「 B 」(太字)ボタンをクリックします。

テキストを選択して太字ボタンをクリック

 

するとテキストが太字になりました。

太字になったテキスト

 

 

テキストの色を変更したい時は、「 A 」(背景色)を選択します。

カラーパレットが表示されるので、その中から好きな色を選んでクリックしましょう。

テキストの色を変更

 

今度はテキストの色を変更することができました!

テキストの色が変更された

 

上の操作を繰り返すことで、太字 + 赤色 のように組み合わせて装飾することも可能です。

太字 + 赤色 にテキストを装飾

 

「 12pt 」と書かれているボックスをクリックすると、フォントサイズ(文字の大きさ)の変更ができます。

山本
ワードプレスのテーマによって基本フォントサイズが違うので
必ずしも「 12pt 」と表示されていない場合があります

フォントサイズを変更

 

「 18pt 」にしてみるとこんな感じです。

フォントサイズ「18pt」

 

4-3 引用

「引用」は他サイトやメディアから文章の一部を引用したいときに使用します。

引用したいテキストの範囲を選択して、「引用」をクリックしましょう。

引用したいテキストをクリックして引用ボタンをクリック

 

このように引用が適用されます。

引用適用後

 

4-4 番号無しリスト&番号付きリスト

テキストをリスト(箇条書き)表示するときに使用します。

番号無しリストの適用例。

番号無しリストの適用例

 

番号付きリストの適用例。

番号付きリストの適用例

 

4-5 左寄せ・右寄せ・中央揃え

テキストを 左寄せ(デフォルト)・右寄せ・中央揃え するときに使用します。

左寄せ・右寄せ・中央揃え

 

4-6 表(テーブル)の挿入

枠を指定して、表(テーブル)を挿入することができます。

 

テーブルの詳しい使い方については以下のページを参照してください。

参考リンクブログにテーブル(表)を設置する方法

 

テーブルの挿入

 

テーブルの表示例(5×4サイズ)

テーブルの表示例

 

4-7 横ライン

横ライン(区切り線)を挿入するときに使用します。

横ラインを挿入

 

横ライン表示例

横ライン表示例

 

4-8 改ページ

1つの記事内でページが切り替わる「改ページ」を挿入するときに使用します。

改ページの挿入

 

改ページ使用例

改ページ使用例

 

4-9 動画の挿入

記事内に YouTube などの動画を埋め込む場合に使用します。

 

動画の埋め込み方法については、以下のページで詳しく解説してます。

参考リンクYouTube の動画をブログに埋め込む方法

 

動画の挿入

 

メディアを挿入/編集 をクリックすると以下の入力画面が表示されるので、ここに動画のソースを入力します。

メディアのソースを入力する

 

実際に埋め込むとこのように表示されます。

 

5.TinyMCE Advanced おすすめ設定

とても機能が豊富な TinyMCE Advanced ですが

あまりに機能が多すぎて、最初から全部を使いこなすのは大変。

 

というか、実際にはほとんど必要のないような機能もあるので

「とりあずこれだけ入れておけば困らない」わー研。おすすめの設定方法をご紹介しておきます。

 

山本
これがおすすめの最小構成です

TinyMCE Advanced 最小構成

 

上で解説してきた 機能+α の最小構成ですが、とりあえずこれで困ることはないでしょう。

あとは随時、あなたが必要な機能を追加していきましょう。

 

さいごに

TinyMCE Advanced プラグインの設定方法と使い方について解説しました。

 

基本的な機能については、これ1つあれば十分ですね。

あとは使っていきながら、自分好みにカスタマイズしていきましょう。

 

最後にこのページのおさらいをしておきましょう。

  • HTMLなしでテキストなどの装飾ができる
  • TinyMCE Advanced のよく使う機能の解説
  • TinyMCE Advanced のおすすめ設定方法
  • 最小構成から徐々に増やすと使いやすい

 

わかば
色々できちゃうすごいプラグインですね!

山本
ワードプレスと言えばコレ!って感じの定番プラグインだからね

わかば
自分好みにカスタムできるのも嬉しいです

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事