TinyMCE Advancedのおすすめの設定と使い方

公開日: 2016年03月09日


tinymce-advanced-top

 

WordPressの投稿機能には、「ビジュアルエディタ」という機能が用意されています。

ビジュアルエディタを使えば、仮にHTMLコードが分からない初心者でも簡単に記事本文の文字装飾ができてしまいます。

 

例えば、テキストの一部の文字を太くしたい場合、まずこのように↓、目的の文字列を反転させて…

tinymce-advanced-001

 

 

ビジュアルエディタの「太字」ボタンをクリックするだけで、簡単に文字を太くすることができます。

tinymce-advanced-002

 

 

これと同じことをHTMLコードで再現する場合は、太くしたい文字列を<strong>~</strong>というタグで囲む必要があります。

tinymce-advanced-003

 

 

このように、ビジュアルエディタは非常に便利な機能なのですが、デフォルト(初期設定)の設定には不要なボタンが配置されていたり、表を作成するボタンが無い…といった弱みがあります。

 

しかし、当記事でご紹介するWordPressのプラグイン、TinyMCE Advancedを導入&設定をすれば、このような不完全なビジュアルエディタの機能を、ほぼ完璧な状態に仕上げることができます。

 

当記事では、TinyMCE Advancedの導入と、僕がおすすめする設定(ボタン配置)、さらにこれら各ボタンの使い方を、それぞれ徹底的に解説したいと思います。

 

 

目次

1.TinyMCE Advancedのインストール

2.TinyMCE Advancedの設定

・2-1.ボタンの入れ替え

・2-2.おすすめのボタン配置

・2-3.各ボタンの内容

・2-4.Also enableの設定

・2-5.Advanced Opitonsの設定

・2-6.Administrationの使い方

・2-7.設定を保存する

3.TinyMCE Advanced(各ボタン)の使い方

・3-1.太字/イタリック/下線/フォントサイズ

・3-2.引用

・3-3.背景色/テキスト色

・3-4.横ライン

・3-5.リスト

・3-6.続きを読む(moreタグ)

・3-7.左寄せ/中央揃え/右寄せ/両端揃え

・3-8.リンク

・3-9.テーブル(表)

・3-10.フルスクリーン

・3-11.インデント(字下げ)

・3-12.段落(見出しタグ)

・3-13.取り消し/やり直し

4.まとめ

 

 

1.TinyMCE Advancedのインストール

それではまず初めに、TinyMCE AdvancedをWordPressへインストールするところから解説していきます。

 

インストール自体は非常に簡単。

 

プラグインの新規追加画面で「TinyMCE Advanced」を検索し、インストールおよび有効化をおこなうだけです。

 

プラグインのインストール方法が分からない場合は、こちら↓の記事を参考にして下さい。


WordPressのプラグインをインストールする方法

 

 

2.TinyMCE Advancedの設定

次に、インストールしたTinyMCE Advancedの設定をしていきます。

 

プラグインをインストールすると、ダッシュボードの「設定」の中に、「TinyMCE Advanced」が追加されるので、まずこちらをクリックして下さい。

tinymce-advanced-004

 

 

TinyMCE Advancedの設定画面が表示されます。

tinymce-advanced-005

 

設定画面が英語表記になっていますが、特段難しい作業はありません。

基本的には以下で解説する通りに進めていくだけなので、設定自体はほんの1~2分で出来てしまうと思います。

 

 

2-1.ボタンの入れ替え

はじめに、ビジュアルエディタに配置するボタンを入れ替える方法をご紹介します。

 

TinyMCE Advancedの設定画面の上部(ピンク色のエリア)に配置されているボタンが、実際にビジュアルエディタで使えるボタンになります。

tinymce-advanced-006

 

 

不要なボタンを排除したい場合は、上部に配列されているボタンの中から、このように↓ボタンをUnused Buttons(紫色のエリア)へドラッグ&ドロップします。

tinymce-advanced-007

 

非常に簡単ですね。

 

いまの要領で、Unused Buttons(紫色のエリア)に置かれているボタンを、上部(ピンク色のエリア)へドラッグ&ドロップすれば、ビジュアルエディタで使いたいボタンを配置することができます。

tinymce-advanced-008

 

 

2-2.おすすめのボタン配置

次に、僕がおすすめする、ビジュアルエディタのボタン配置をご紹介します。

こちら↓は僕が個人的に使いやすいボタン配列です。これから色々と使っていきながら、あなた自身が使いやすいボタン配列を探してみて下さい。

tinymce-advanced-009

 

なお、配列されたボタンの上にある、「Enable the editor menu」のチェックを入れると、メニューバー(ファイル▼ 編集▼ 挿入▼ …等)が有効になります。

 

メニューバーの中には、TinyMCE Advancedに用意されている全てのボタンが収納されています。

 

基本的には、自分好みにカスタマイズしたボタンを使うことがほとんどですが、配置していないボタンを使いたい場面が出てきた時には、こちらから目的のボタンを探すことができるため、念のためチェックを入れておくことをオススメします。

 

 

2-3.各ボタンの内容

上記でご紹介したボタン配置について、各ボタンの内容(用途)をご説明します。

ボタン 名称 内容(用途)
tinymce-advanced-048 太字 文字を太くしたい時に使う。
tinymce-advanced-049 イタリック 文字をイタリック(斜め)にしたい時に使う。
tinymce-advanced-050 下線 文字にアンダーライン(下線)を引きたい時に使う。
tinymce-advanced-051 引用 記事内に引用箇所を作りたい時に使う。
tinymce-advanced-052 背景色 文字に背景色を付けたい時に使う。
tinymce-advanced-053 テキスト色 文字の色を変えたい時に使う。
tinymce-advanced-054 横ライン 記事内に横線(ライン)を引きたい時に使う。
tinymce-advanced-055 Bulleted list 箇条書きのテキストを番号無しのリスト形式にしたい時に使う。
tinymce-advanced-056 番号付きリスト 箇条書きのテキストを番号付きのリスト形式にしたい時に使う。
tinymce-advanced-057 続きを読む… more(モア)タグを設置したい時に使う。
tinymce-advanced-058 ツールバー切り替え 配置した全てのボタンを表示したい時に使う。
※必ず一段目の右端に配置すること。
tinymce-advanced-059 左寄せ テキストを左に寄せたい時に使う。
tinymce-advanced-060 中央揃え テキストを中央に揃えたい時に使う。
tinymce-advanced-061 右寄せ テキストを右に寄せたい時に使う。
tinymce-advanced-062 両端揃え 一行のテキストを均等にしたい時に使う。
tinymce-advanced-063 リンクの挿入/編集 テキストにアンカーリンクを設定したい時に使う。
tinymce-advanced-064 リンクの削除 設定したアンカーリンクを削除したい時に使う。
tinymce-advanced-065 テーブル 記事内にテーブル(表)を挿入したい時に使う。
tinymce-advanced-066 フルスクリーン 画面いっぱいを使って記事作成をしたい時に使う。
tinymce-advanced-067 インデントを減らす テキストのインデント(字下げ)を削除したい時に使う。
tinymce-advanced-068 インデントを増やす テキストをインデント(字下げ)したい時に使う。
tinymce-advanced-069 段落 見出しタグを設定したい時に使う。
tinymce-advanced-070 フォントサイズ 文字の大きさを変更したい時に使う。
tinymce-advanced-071 取り消し 今おこなった操作を取り消したい時に使う。
tinymce-advanced-072 やり直し 取り消した操作をもう一度元に戻したい時に使う。

 

 

2-4.Also enableの設定

Unused Buttons(紫色のエリア)のすぐ下に、Also enableと書かれたチェック箇所がありますが、ネットビジネスを実践する上では特に必要性がありませんので、これらのチェックは全て外しておきましょう。

tinymce-advanced-010

 

 

2-5.Advanced Opitonsの設定

次に、Advanced Opitonsの設定をおこないます。

 

基本的にはこちら↓と同じ箇所にチェックを入れておくだけでOKです。

tinymce-advanced-011

 

※以下に、チェックを入れた各項目の詳細について解説しますが、特に覚えておく必要はありません。詳しく知りたい方だけお読みください。

 

<Stop removing the <p> and <br /> tags when saving and show them in the Text editor>

WordPressで記事投稿をしていると、ビジュアルエディタで書いた記事を、テキストエディタで修正する、という場面がよくあります。

しかし、テキストエディタで修正した記事を、再びビジュアルエディタで確認すると、自分では設定していないはずのタグが勝手に追加されてしまうという不具合が起きます。しかし、こちらにチェックを入れておけば、このような不具合を回避することができます。

 

<Replace font size settings>

こちらにチェックを入れると、デフォルトではpt(ポイント)単位になっている「フォントサイズボタン」を、px(ピクセル)単位に変更することができます。

tinymce-advanced-012

 

 

2-6.Administrationの使い方

WordPressで複数のブログを運営する場合、上記でおこなったTinyMCE Advancedの設定を、WordPressをインストールする度に毎回毎回おこなうのは非常に面倒です。

 

しかし、TinyMCE Advancedの設定画面最下部にある、Administrationという項目を使うことで、例えば、AというWordPressでおこなったTinyMCE Advancedの設定内容を取り出し、BというWordPressに適用することができるため、面倒な設定作業をする必要がなくなります。

 

やり方は非常に簡単。

 

まず、「Export Settings」をクリックしてください。

tinymce-advanced-013

 

 

TinyMCE Advancedの設定内容をエクスポート(取り出し)する画面に移動するので、「Select All」をクリックし、上部のHTMLコードを全て選択し、キーボードで「Ctrl + C」を押してコピーしておきます。

tinymce-advanced-014

 

 

いまコピーしたHTMLコードを、メモ帳などにペースト(貼り付け)しておきましょう。※保存する必要はありません。

tinymce-advanced-015

 

 

次に、いまエクスポートしたTinyMCE Advancedの設定内容を、別のWordPressへインポート(取り込み)していきます。

 

インポートしたいWordPressのTinyMCE Advancedの設定画面を開き、最下部にある「Import Settings」をクリックして下さい。

tinymce-advanced-016

 

 

テキストエリアに、先ほどコピーしておいたHTMLコードを貼り付け、「Import」をクリックすれば設定完了です。

tinymce-advanced-017

 

 

2-7.設定を保存する

TinyMCE Advancedの各種設定ができたら、最後に必ず設定内容を保存しましょう。

設定を保存するには「Save Changes」をクリックします。

tinymce-advanced-073

 

 

3.TinyMCE Advanced(各ボタン)の使い方

次に、「2-2.おすすめのボタン配置」でご紹介した各ボタンの使い方をご説明します。

 

なお、当記事で解説をしていないボタンの使い方を知りたい場合は、まずは一度、自分で試してみることをオススメします。

 

基本的にはどのボタンも非常に簡単に使えるものばかりなので、解説を読むよりも、実際に使ってみたほうがそれぞれの機能がすぐに理解できると思います。

 

 

3-1.太字/イタリック/下線/フォントサイズ

まずは使い方が簡単なボタンからご紹介していきます。

 

ここでご紹介するボタンに関しては、当記事の冒頭でご紹介した、テキストを「太字」にするやり方と全く同じ要領になります。

 

文字装飾をしたいテキスト(文字)をドラッグし…

tinymce-advanced-001

 

 

目的のボタンをクリックするだけでOKです。

tinymce-advanced-018

 

 

3-2.引用

こちら↓は当サイトの引用タグ。

tinymce-advanced-019

 

 

引用タグを適用する場合は、引用したテキストをドラッグし、「引用」ボタンをクリックします。

 

引用タグを適用した部分のテキストは、このように↓他のテキストに比べてインデントされた感じになります。

※右下の「引用元:Google公式HP」の部分には、“リンク”、“フォントサイズ(8px)”、“右寄せ”が適用されています。

tinymce-advanced-020

 

 

<補足>

他サイトのテキスト等を引用する場合は、必ず引用タグを使うようにしましょう。

そして同時に、テキストの引用元サイトのURLを、「リンク」を使って明記することが重要です。※「リンク」の使い方は後述します。

このように、適切に「引用タグ」と「リンク」を使うようにすれば、Googleから重複コンテンツと認識されるリスクを回避することができます。

 

 

3-3.背景色/テキスト色

「背景色」ボタンと「テキスト色」ボタンの使い方は非常に良く似ています。

 

使い方は簡単。装飾を適用したい部分をドラッグし、ボタンをクリックするだけです。

 

ボタンの横にある「▼」をクリックすれば、任意の色を選択することができます。

また、「カスタム」をクリックすれば…

tinymce-advanced-021

 

 

さらに細かいカラーを指定したり、お好みのカラーコードを設定することも可能です。

tinymce-advanced-022

 

 

3-4.横ライン

記事本文の中に区切り線を入れたい時は、「横ライン」ボタンを使えば簡単に横線を挿入することができます。

 

区切りたい箇所にカーソルを合わせ、「横ライン」ボタンをクリックすれば…

tinymce-advanced-023

 

 

このように↓簡単に横線を挿入することができます。

tinymce-advanced-024

 

 

3-5.リスト

記事を書いていると、時たま、テキストを箇条書きにしたい時が出てきます。

 

そのような時は、「リストタグ」を使えば簡単に分かりやすいリストを作れますので、ぜひ使うようにしましょう。

tinymce-advanced-025

 

 

「Bulleted list(番号なしリスト)」も「番号付きリスト」も、適用方法は全く同じです。

 

箇条書きで表示したいテキストの部分を全てドラッグし、「リスト」ボタンをクリックすれば、容易にリストを作ることができます。

tinymce-advanced-026

 

 

3-6.続きを読む(moreタグ)

WordPressで記事を投稿すると、通常はブログのトップページに新しい投稿が上から順に表示されていく仕組みになっています。

 

トップページに表示させる記事数はWordPressのダッシュボードで変更できるのが一般的ですが、例えばトップページに表示させる記事数が10記事に設定されている時には、ブログのトップページに10個の記事の本文すべてが、上から下までダーーーっと表示されてしまいます。

 

これではトップページが異常に縦長になってしまう上に、どこからどこまでが一つの記事なのかが、よく分からなくなってしまいます。

 

このような問題を解消するには、「続きを読む」ボタン(いわゆるmoreタグ)を使うのがベストです。※WordPressのテンプレートによっては、自動的にmoreタグが設定されるものもありますので、そのようなテンプレートをお使いの場合にはmoreタグを使う必要はありません。

 

「続きを読む」ボタン(moreタグ)を使うことで、一つ一つの記事の冒頭部分だけをトップページに表示させたりすることができるため、トップページが縦に長くなってしまうという問題を解消することができます。

tinymce-advanced-027

 

 

「続きを読む」ボタン(moreタグ)を設定する方法は非常に簡単です。

 

挿入したいところにカーソルを合わせ、「続きを読む」ボタンをクリックすれば…

tinymce-advanced-028

 

 

このように↓簡単に「続きを読む」ボタン(moreタグ)を設置することができます。

tinymce-advanced-029

 

 

3-7.左寄せ/中央揃え/右寄せ/両端揃え

本文の体裁を整えるためによく使われるのが、こちらでご紹介する4つのボタン。

 

使い方自体はこれまでご紹介してきた他のボタンと同様、適用したい部分のテキストをドラッグし、ボタンをクリックするだけです。

tinymce-advanced-030

 

 

3-8.リンク

TinyMCE Advancedで用意されている様々なボタンの中でも、こちらの「リンク」ボタンは比較的、使用頻度が高いボタンです。

 

特に、自分で出来るSEO対策として、内部リンクの構築は極めて重要な施策となります。

 

外部リンクを設定するのも、内部リンクを設定するのも、適用方法は全く同じ。

 

まず、リンクを設定したいテキストをドラッグし、「リンク」ボタンをクリックします。

tinymce-advanced-031

 

 

すると、「リンクの挿入/編集」というボックスが表示されるので、「URL」の部分に設定したいリンクのURLを入力します。

もし、リンクを新しいタブで開かせたい場合は、「リンクを新しいタブで開く」にチェックを入れましょう。設定ができたら「リンク追加」をクリックして下さい。

tinymce-advanced-032

 

 

<補足>

外部リンク(他サイトのURL)を設定する場合は、必ず「リンクを新しいタブで開く」にチェックを入れるようにしましょう。

こちらにチェックを入れておかないと、自分のサイトが他サイトに上書きされて表示されるため、ユーザーがあなたのサイトから離脱したとGoogleに判断されてしまいます。

 

 

3-9.テーブル(表)

テーブル(表)機能は、デフォルトのビジュアルエディタには無い機能の一つです。

 

シンプルな表で良ければ、TinyMCE Advancedのテーブル(表)機能は非常に使いやすいのでオススメです。

 

ここでは基本的な使い方のご紹介をしますが、ここまでにご紹介している各ボタンを組み合わせて使えば、ある程度、自分の思い描く表が作成できると思います。

 

まず、テーブル(表)を挿入したいところにカーソルを合わせ、「テーブル」ボタンをクリックします。

tinymce-advanced-033

 

 

「テーブルを挿入」にマウスカーソルを合わせると、テーブル(表)の行数と列数を選択できるようになりますので、お好きなところでクリックして下さい。

ここでは行数3×列数3のテーブル(表)を作成してみます。

tinymce-advanced-034

 

 

すると、記事本文の中にテーブル(表)が挿入されます。

tinymce-advanced-035

 

 

文字を入力したいセルをマウスでクリックし、カーソルを合わせ、文字を入力しましょう。

tinymce-advanced-036

 

 

プレビューで確認してみると、このように表示されています。

tinymce-advanced-037

 

 

テーブル(表)の列幅等を変えたい場合は、変更を加えたい列の任意のセル(ここ↓では「あああああ」のセル)にカーソルを合わせ、「テーブル」ボタン→「セル」→「セルのプロパティ」と進みます。

tinymce-advanced-038

 

 

「セルのプロパティ」の設定画面が表示されますので、こちらで各種変更の設定が可能です。ここでは列幅を「250」と入力してみます。

設定ができたら「OK」をクリックしましょう。

tinymce-advanced-039

 

 

もう一度プレビューで確認してみます。先ほどよりも、「あああああ」の列幅が広くなりました。

tinymce-advanced-040

 

 

このように、表の体裁は自由にカスタマイズできますので、色々と試してみて下さい。

 

 

3-10.フルスクリーン

ビジュアルエディタを画面いっぱいに広げて記事作成をしたい場合は、「フルスクリーン」ボタンを押してみましょう。

tinymce-advanced-041

 

 

このように↓、画面全体がビジュアルエディタになるので、集中して記事作成をしたい時などにオススメです。フルスクリーンモードを終了する時は、再度、「フルスクリーン」ボタンをクリックして下さい。

tinymce-advanced-042

 

※インターネットの接続環境等の影響によっては、記事作成中にWordPressに不具合が発生する場合があります。すると、作成途中の記事が保存されず、消えてしまうということにもなりかねませんので、基本的には記事作成はWord等のソフトを使って書き、最後にWordPressへ貼り付ける、という手順をとったほうが安全です。

 

 

3-11.インデント(字下げ)

どんなに素晴らしい内容の記事を書いたとしても、改行や見出しや行間などが全く使われていない記事は非常に読みづらいものです。

 

tinymce-advanced-043

 

 

また、記事の中で、特に強調したい部分等にインデントを挿入すると、記事全体の体裁がとても良くなります。

 

インデントを使うには、インデントを挿入したいテキストをドラッグし、「インデントを増やす」ボタンをクリックするだけです。

tinymce-advanced-044

 

インデントを削除したい場合は、インデントが適用されているテキスト全てをドラッグして、「インデントを減らす」ボタンをクリックして下さい。

 

 

3-12.段落(見出しタグ)

どのようなブログ記事であっても、大抵は“いくつかのカタマリ”が一つにまとまって一つの記事になっています。

この、“いくつかのカタマリ”を一般的には「段落」と呼んだりしますが、こと、ブログ記事においては、この各段落の最初に、「見出し」を設定してあげることが重要です。

 

見出しを設定することで、記事のどこに、どのようなことが書かれているのかが分かりやすくなって、読み手が理解しやすくなります。

また、Googleのクローラーにとっても、サイトの構造が理解しやすくなり、記事内容を適切にデータベースへと持ち帰ってくれるようになります。

 

このように、ブログ記事を書く上で、段落(見出しタグ)というのは非常に重要な要素となりますので、しっかりと使い方を理解し、正しく使うようにしましょう。

 

段落(見出しタグ)の適用方法は非常に簡単です。

 

見出しとなるテキストをドラッグし、ビジュアルエディタの「段落」をクリックし、適用したい見出しを選択して下さい。

tinymce-advanced-045

 

 

<補足>

見出しタグは、何も考えず適当に使えば良いというものではありません。

 

基本的に、本文で使う見出しは、記事タイトルに使われている見出しよりも数字が大きいものを使っていくのがルールです(例えば、記事タイトルに「見出し2(H2タグ)」が使われている場合、記事本文で使うのは見出し3以降となります)。

 

WordPressのテーマによって、記事タイトルに使われている見出し(タグ)が違いますので、自分が使っているWordPressのテーマが、どのような見出し構造を適用しているかをしっかりと調べてみて下さい。

 

また、見出しタグは、「見出し2→見出し3→見出し4」と、順番通りに使うのが正しい使い方です(例えば、「見出し2→見出し4→見出し3」という使い方は×)。

 

正しい見出しタグの使い方を、当サイトの「TeamViewerの使い方と安全性について徹底解説」という記事を例に挙げてご説明しておきます↓

実際の記事を見ながら、見出しタグがどのように表示されているのかを確認してみて下さい。

tinymce-advanced-046

 

 

3-13.取り消し/やり直し

ビジュアルエディタを使って記事を書いていると、うっかりテキストを消してしまったりする時があります。

 

もし、今おこなった操作を取り消したい時には「取り消し」ボタンを、取り消した操作をもう一度元に戻したい時には「やり直し」ボタンをクリックして下さい。

tinymce-advanced-047

 

 

このボタン、僕は意外と使うことが多いです(笑)

 

 

4.まとめ

TinyMCE Advancedは非常に素晴らしいWordPressのプラグインなので、必ず導入することをオススメします。

 

また、各ボタンの使い方をご紹介しましたが、基本的にはどれも直感的に使うことができる機能ばかりなので、あれこれと解説を読むよりも、まずは実際に自分で使ってみたほうがすぐに使いこなせるようになると思います。

 

色々な機能を使って、ぜひユーザビリティの高い記事を目指しましょう。

 

“TinyMCE Advancedのおすすめの設定と使い方”へ1件のコメント

  1. […] TinyMCE Advancedのおすすめの設定と使い方 […]

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む