WordPressのビジュアルエディタ「TinyMCE」を最低限使えるようになろう!

tinymec21-700x374

WordPressの、便利そうでいまいちよく分からなくて使いこなせないビジュアルエディタ。

今回は、WordPressのビジュわアルエディタを最低限使いこなせるように使い方を紹介していきます。せっかく便利だと思って採用してる機能ですから使えたほうが便利なのは間違いありません。

WordPressはテキストエディタに「TinyMEC」を採用しており、賛否はありますが、今のところ変更するといった話はありません。

今後もWordPressを利用していくつもりなら、苦手な感情をなくして置いたほうが、よっぽど有意義だと思います。

プラグイン「TinyMCE Advanced」の使い方とインストール

まず、「TinyMCE Advanced」をインストールしましょう。デフォルトの状態だと操作に一手間二手間かかってしまうため少しずつイライラが溜まっていきます。

WordPress管理画面の「プラグイン」→「新規追加」→「TinyMCE Advancedで検索」→「インストール」
tinymec-500x305

インストールしたら「有効化」してください。

TinyMCE Advancedの設定

TinyMCE Advancedの設定を行います。ご自身のおこのみで良いのですが、分からない方はわたしのおすすめを参考にして設定してください。

ボタンの追加

「設定」→「TinyMCE Advanced」を選択。
tinymec2-500x247

追加したいボタンをドラッグ&ドロップで追加していきます。
tinymec3-700x377

ご自身のおこのみで選んでいただければ結構です。

わたしのおすすめは、

  • 段落
  • フォントサイズ
  • 太字
  • テキスト色
  • 背景色
  • 打ち消し
  • Bulleted list
  • 番号付きリスト
  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 引用リンクの挿入/編集
  • ブロックを表示
  • テーブル

ただし、「ブロックを表示」だけは今後の説明でも使いますので必ず入れてください!

オプションのチェック

オプションが幾つかあります。わたしは「List Style Options」と「Font sizes」にチェックを入れています。
tinymec3-700x377

tinymec4-700x272

「List Style Options」は、ulolのリスト形式の選択で、四角やギリシャ文字などドロップダウンリストから選べるようになります。
tinymec5

「Font sizes」は、記載されているフォントサイズを選べるようになります。今のバージョンだと「8px 10px 12px 14px 16px 20px 24px 28px 32px 36px 48px 60px」ですね。
tinymec6

その他はデフォルトのままで結構です。

ビジュアルエディタ「TinyMCE」の使い方

TinyMCE Advancedをインストールしたところで、実際にビジュアルエディタを使っていきましょう!基本的にはわたしのやり方を紹介する感じですが。

ブロックを表示ボタンをクリック

ブロックを表示ボタンをクリックします。
tinymec7-700x129

すると、どの部分がどの要素のタグで囲まれているかが一目瞭然になります。
tinymec8-700x398

ビジュアルエディタのイライラするポイントの1つに、いまどのタグを操作しているのかが分からないということが挙げられます。例えば、H2タグを設定してEnterを押して次の文章を書こうとした時に、H2が継続されているのか、それともP要素として書けているのか判断しにくいですよね。

ブロックを表示してやると、Enterを押した時に、カーソルがどこにあるかで今編集している要素が直感的に分かるようになります。

ビジュアルエディタで編集するときは、ブロックを表示させないととてもじゃないけど作業できません。ビジュアルエディタをそのまま使うなんて、将棋で言うところの目隠し将棋をしているようなものです。

Enterを押した時のルールを理解する

ブロックを表示させてあげるだけでビジュアルエディタでの作業効率は格段にアップするはずです。ただしもう一つ、Enterを押した時の挙動を押さえておけば、もうWordPressのTinyMECを攻略したと言っても過言ではないでしょう。

P要素でEnter

P要素でEnterを押した場合の挙動は、P要素が複製され次のブロック要素にカーソルが移ります。

具体的に動作を見てみましょう。以下はP要素の最後にカーソルがある状態です。
tinymec8-1

Enterを押してみましょう。P要素が複製され、複製されたP要素の方にカーソルが移っています。
tinymec9-700x105

H1 ~ 6要素でEnter

HタグでEnterを押した時の挙動はPタグと異なります。

実際に見てみましょう。H2要素の最後にカーソルがある状態です。
tinymec10-700x122

Enterを押してみましょう。H2要素が複製されるのではなく、P要素が複製され、複製されたP要素の方にカーソルが移っています。
tinymec11-700x164

H2タグを作った後にまたH2タグ作る人は通常はいませんもんね。TinyMECでもHタグの見出しの後は、P要素ですぐに文章を書けるような設計になっているんだと思います。

ブロック要素の途中でEnter

ブロック要素の途中でEnterを押した場合は、P要素もH2要素も関係なく同じ挙動になります。

Pタグの途中にカーソルがある状態でEnterを押してみましょう。
tinymec12-700x177

Enter。同じブロックの要素が複製され、カーソル以降の文字が複製先のブロックに移動します。
tinymec13

これはP要素だけの話ではなく、H2やH3、blockquoteなどブロック要素であれば同じ挙動になります。

ブロック要素の切り替え

P要素やH2要素などのブロック要素は、1クリックで簡単に切り替えることができます。

まずは、ブロック要素のどこかにカーソルを置きます。
tinymec14

この状態で、H2などのブロック要素を押してみましょう。
tinymec15

ブロック要素ごと切り替わるのが分かるはずです。
tinymec16

H2からH3、など見出しのレベルの切り替えで使うことが多いです。

ブロック要素内で改行

Enter押すと次のブロックを生成して移ってしまうので、改行どうするんだよ・・・って最初は誰もが思うはずです。

ブロック要素内で改行するには、Shift + Enter で行うことができます。この時コードとしては、
タグが挿入されます。

ブロック要素の文章の途中にカーソルを置きます。
tinymec17

Shift + Enterを押すと、改行されます。
tinymec18

P要素以外の他のブロック要素(H1~6、blockquote、pre)などでも同様に改行されます。

インライン要素をあてる

次は、太文字や文字色、リンクなどのインライン要素のあてかたです。

インライン要素をあてたい文字をドラッグしてボタンをクリックすることで適応されうようになります。

まずはドラッグ。
tinymec19

インライン要素をクリックと要素が適応されます。
tinymec20

まとめ

以上、ビジュアルエディタの使い方でした。

P要素やH要素で記事の構成を作っていき、太文字や背景色、リンクなどインライン要素で彩りをつけていくようなイメージで作っていくと作りやすいと思います。

ビジュアルエディタを使えると装飾の効率が大きく変わってきます。
今回の最低限の操作方法を覚えてビジュアルエディタにビビることなく使えるようにしましょう!