TinyMCE Advanced の設定方法と使い方

20160510-131
  • このエントリーをはてなブックマークに追加

WordPressの投稿機能(ビジュアルエディタ)は、デフォルトの状態では次の操作ができない。

  • 表の挿入、または編集
  • YouTube 動画コードの挿入
  • 画像の回りに余白を挿入

など、コンテンツの読みやすさを高めるための操作ができないと、HTMLでタグを直打ちしなければならなくなる。これでは、せっかくコンテンツマーケティングを始めたばかりの初心者には敷居が高い。

しかし、ここでご紹介する TinyMCE Advanced というプラグインを使うと、下図のようにWordPressの投稿画面の編集ボタンの種類を増やし、HTMLやタグの知識がない方でも、無料ブログと同じ感覚で記事を設定できるようになる。

visual-editor

それでは早速、TinyMCE Advanced の設定方法と使い方をご紹介していこう。

注1:プラグインを初めてインストールする場合
インストール方法は、『WordPress プラグインのインストールと停止・削除・更新の方法』を参考にしよう。
注2:WEBライティングの知識をつけておこう
WEBライティング』では、記事をSEOに最適化するための注意点を、より具体的にまとまているので、そちらも確認しておこう。

1.TinyMCE Advanced の設定方法

ここで行う設定は以下の2つだけだ。

  • 編集ボタンの追加
  • Advanced Options のチェックボックスにチェックを付ける

何も難しいことはないので、ご紹介している通りに設定して欲しい。

TinyMCE Advanced の設定画面へのアクセス方法

インストールすると、左サイドバーの「設定」のメニューの中に、” TinyMCE Advanced ” という項目が追加されるのでクリックしよう。

すると、下図のように設定画面にアクセスすることができる。

TinyMCE-Advansed-Settings

全て英語だが、このページで解説している通りに設定して頂ければ問題ないので安心して欲しい。

1−1.編集ボタンの追加

ビジュアルエディタにボタンを追加するには下図のように、下の編集ボタンから追加したいものを選んで、上のツールバーにドラッグ&ドロップすれば良い。

TinyMCE-Advanced-adding-a-menu

バズ部や弊社クライアント様サイトでは以下のボタンを追加している。あなたも、これらのボタンを追加しておけば問題ないだろう。

アイコン ツール名 用途
段落 <h2>や<h3>などの見出しタグを設定する時に使用する。インデックス効果を高めるWEBライティングのために必須。
フォントサイズ 文字のフォントサイズを変更する時に使用する。
太字 文字を太字にして目立たせたい時に使用する。
textcolor テキスト色 文字色を変更したい時に使用する。
text-background テキスト背景色 文字の背景に色を付けたい時に使用する。
italic イタリック 文字をイタリック体に変更したい時に使用する。
underline 下線 文字にアンダーラインを付けたい時に使用する。
alignleft 左寄せ 文字を左寄せにしたい時に使用する。
align-center 中央揃え 文字をセンター寄せにしたい時に使用する。
alignright 右寄せ 文字を右寄せにしたい時に使用する。
Justify 両端揃え 文字の横幅を統一したい時に使用する。
Toolbar-Toggle ツールバー切り替え ※このボタンは、これ以上の数のボタンを追加したい時に必須。
More-Tag 「続きを読む」タグを挿入 モアタグを挿入したい時に使用する。
Bullet-list 番号なしリスト リストタグを挿入したい時に使用する。
Numbered-List 番号付きリスト ナンバータグを挿入したい時に使用する。
Quote 引用 引用タグを挿入したい時に使用する。
Outdent インデントを減らす 文章をアウトデントしたい時に使用する。
Indent インデントを増やす 文章をインデントしたい時に使用する。
Link リンクの挿入/編集 文字にリンクを挿入したい時に使用する。
RemoveLink リンクの削除 文字のリンクを外したい時に使用する。
Table テーブル(表) テーブルタグを作成したい時に使用する。
picture 画像の挿入/編集 画像の挿入、編集の時に使用する。実際には画像に余白を入れたり、画像サイズのピクセル数を入力して調整する時に便利。
Video 動画を挿入/編集 動画を挿入する時に使用する。実際にはYouTubeの動画コードを挿入する時に利用すると便利な機能。

 

これらを全て設定すると以下のようになる。

TinyMCE-settings

「Enable the editor menu」にチェックを入れるとエディタの上部にメニューバーが表示される。これは TinyMCE Advanced で使用できる全ての機能が確認できる。通常はボタンを使用して記事の作成を行い、ボタン以外の機能を使用する際にメニューバーで確認して使うようにする便利に活用できる。

※ 「ツールバー切り替え」ボタンは、一段目の右端に置かなければうまく機能しないので注意しよう。
この図の順番通りに設定すれば大丈夫だ。

1−2.Advanced Opitons のチェックボックスにチェック

最後に、Advanced Opitons では次の通り2つの箇所にチェックを入れよう。

TinyMCE-Advanced-Options

チェックを入れたら Save Changes をクリックすると設定内容が保存される。

「Stop removing the <p> and <br /> tags when saving and show them in the Text editor」にチェックを入れることで記事編集時の不具合を抑える働きがある。

WordPressでは、一度、ビジュアルエディタで書いたものを、HTMLモードで修正し、再度ビジュアルエディタに戻った時に、不要なタグが追加されるという不具合が起きる場合がある。ここにチェックを入れておくことで、その不具合を少なくすることができる。

また「Replace font size settings」にすることでフォントサイズの単位をpx(ピクセル)に変更できる。ブログは PC やスマートフォンの画面を中心に表示するものなので、その画面表示に適したピクセルを選ぼう。

また、他にも以下のようなチェックボックスがある。

  • List Style Options
  • Context Menu
  • Link (replaces the Insert/Edit Link dialog)
  • Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.
  • Markdown typing support (text pattern plugin)
  • Enable pasting of image source

これらについて、そもそも CSS を別に用意しておく必要があるので、初心者が使いこなすのは難しいし、上級者でも使用する機会はほとんどない。

WEBデザイナーなら知っておくべきだが、マーケティング目的でこれから素晴らしいブログを作りたいという方は、良質なコンテンツの作成のために時間を使おう。

また、これ以外の機能についても同様の理由で、通常の TinyMCE Advanced エディタが使用できれば特に必要はない。

設定に関してはこれで完璧だ。

2.TinyMCE Advanced エディタの使い方

TinyMCE Advanced のエディタは使い勝手が良いので、直感的に使えるものだが、念のため以下の使い方を説明しておく。

  • ビジュアルエディタとHTML入力の切り替え方法
  • 段落(見出しタグ)やフォント・文字を変更する方法
  • 文字揃えの変更方法
  • モアタグの挿入方法
  • リストタグの挿入方法
  • 引用タグの挿入方法
  • リンクの挿入方法
  • (テーブルタグ)の挿入方法
  • YouTube動画の挿入方法
  • 画像の回り余白を挿入する方法

これらの操作は比較的よく使うものであり、これらだけ抑えておけば十分なものだ。それでは早速説明しよう。

2−1.ビジュアルエディタとHTML入力の切り替え方法

WordPressの投稿や固定ページの新規追加画面で、下記の赤枠で囲ったタブをクリックすると、ビジュアルエディタとHTMLエディタを切り替えることができる。

editor

当然、HTMLでコンテンツを作るにはタグの知識が必要だが、ビジュアルエディタを使えば、タグを知らない初心者の方でも問題なくコンテンツを作ることができるので安心してビジュアルエディタを使おう。

注:設定したアイコンを全て表示する方法

最初は下の一段目の画像のように、アイコンは一列までしか表示されない。右端の「ツールバー切り替え」ボタンをクリックすると、他のアイコンも表示されるので覚えておこう。

TinyMCE-Advanced-toolbar-toggle

2−2.段落(見出しタグ)やフォントサイズ・文字装飾を変更する方法

ある文を見出しに設定したり、あるテキストのフォントサイズや文字の装飾を変更するには、以下のように、設定したい文章をドラッグしてから、任意のボタンを選べば良い。

TinyMCE-manual2

例えば「見出し2」を設定したら、 次のようにビジュアルエディタ上でも分かるように表示が変わる。

TinyMCE-manual3

当ページの冒頭でお話したWEBライティングにおいても、この見出しタグの設定は非常に重要なので覚えておこう。他にも、

  • 文字のフォントサイズの変更
  • 太字文字
  • イタリック体文字
  • アンダーライン
  • 色付き文字
  • 背景色付き文字

の設定も同様に、ドラッグで選択し任意のボタンを押すことで可能だ。もちろん、設定した箇所はビジュアルエディタ上で簡単に確認することができる。

TinyMCE-font

あまり色々と設定し過ぎてしまうと、逆に読みにくいページになってしまうので、装飾は必要最小限に留めよう。参考までに、バズ部では見出しタグ以外の文字装飾はほとんど使っていない。

2−3.文字揃えの変更方法

次に文字揃えの変更方法をご紹介する。文字揃えとは、文字を左詰め(デフォルト)・真ん中寄せ・右詰め・両端詰めのどの形式で表示するかを選ぶものだ。設定方法は以下の通りだ。

TinyMCE-manual4

基本は、左詰め(デフォルト)しか使わないが、右詰めや両端詰めも時々使うことがある。例えば、右詰めは、以下のように引用した文章のソースを表示する時に便利だ。

alignright

また、両端詰めは文中に英語を使う時に、見やすさを整える時に便利だ。(下図参照)

TinyMCE-manual5

真ん中寄せは、上の2枚のように画像をセンターに表示させたい時に使うことが多い。これらの設定をすると、ビジュアルエディタでもそれぞれに対応した表示になる。(下図参照)

align

これらの設定は、それなりに使用頻度も高いので覚えておこう。

2−4.モアタグの挿入方法

WordPressの投稿機能を使って記事を書くと、その記事が自動的にトップページにも表示される。例えば、トップページに最新記事が10記事表示されるようにしていると、トップページに10個の記事の全文が表示されてしまう。

そのままではトップページの縦サイズが異様に長くなってしまい、訪問者に対する利便性を大きく損なってしまう。

そこで使うのがモアタグだ。モアタグを使うと、挿入した箇所に自動的に「続きを読む」というボタンが追加され、トップページに表示される記事の分量を縮小することができる。

more-tagu

設定方法は簡単だ。記事を書く時に、任意の場所に一段分のスペースを空けて、そこにカーソルを合わせた状態でモアタグのアイコンを押そう。

moretag

すると、挿入した場所に下図のように「– – – – – MORE – – – – – 」と表示される。

moretag2

モアタグの挿入は、WordPressで記事を書く上で必須のものだ。ついつい忘れがちになってしまうが、必ず設定するようにしよう。

2−5.リストタグの挿入方法

リストタグとは、テキストを箇条書きで表示したい時に使うタグで、使用すると下図のように表示される。

Numbered-List

リストタグの利便性は非常に高く、バズ部の記事中でも頻繁に使っている。

なぜなら、リストタグを使うことによって重要なポイントを簡潔にユーザーに伝えることができるからだ。この記事の中でも、リストタグを使っている箇所が頻繁に登場しているので、ぜひ、なぜそこでリストタグを使っているのかを考えてみて欲しい。

さて、このリストタグの設定も簡単に行うことができる。

箇条書きで表示したい箇所を、ドラッグで選択しメニューからリストタグアイコンを選択するだけだ。

list-tag

選択すると、下図のようにビジュアルエディタ上でも箇条書きで表示される。

list-tag2

2−6.引用タグの挿入方法

引用タグは、他のサイトや書籍などから引用してきたテキストに対して使うタグだ。

quote

引用文を使う場合は、この引用タグとともに引用元へリンクをつけることでGoogleも、その意図を理解してくれるようになる。逆に、引用タグを使わなかった場合は、複製コンテンツと見なされてSEOに悪影響を及ぼす可能性がある。

そのため、この設定を必ず覚えておこう。

引用タグを設定したい部分をドラッグして選択し、引用タグボタンを押そう。

quote-tag

設定した箇所は以下のように、インデントされたような形で表示される。 

quote-tag2

2−7.リンクの挿入方法

リンクの挿入は最も頻繁に使う機能の一つだ。リンクを挿入したい箇所をドラッグで選択して、リンク挿入ボタンを押そう。

link

すると、下記のようにリンクの編集メニューが表示される。下図の通り、リンクしたいページのURLを入力しよう。また、リンク先のページを別ウインドウで開きたい場合は、下のチェックボックスにチェックを入れよう。

「タイトル」の部分は空白で大丈夫だ。

link2

リンクを挿入すると、挿入したテキストは下図のように青文字で表示される。

link3

リンクはSEO内部対策や、クローラーの巡回を促すためにも重要なものなので、しっかりと勉強しておこう。

余裕があれば、『被リンクの構築法と注意点』も読んでおいて欲しい。

2−8.表(テーブルタグ)の挿入方法

TinyMCE Advanced を使って表(テーブル)を作成することができる。基本的な使い方について、詳しくは『WordPress の投稿に表を挿入する方法』を参考にして欲しい。

ただし、おまけの機能みたいなもので、簡単な表を作る分には便利だが、表のデザインなどにこだわりたい場合は、どうしてもHTMLとCSSの知識が必要となる。ここでは初心者の方でもHTMLの知識なしに出来る方法を解説しているため、HTMLやCSSの詳細については割愛する。

2−9.YouTube動画の挿入方法

TinyMCE Advanced には動画の挿入/編集する機能がある。ただし、現実的に動画ファイルを記事上に掲載することは、レンタルサーバーのデータ転送量の制限をすぐに超えたり、複数の動画を掲載していくとすぐにファイルサイズ容量の上限に達してしまうだろう。

そこでおススメなのが TinyMCE Advanced の動画の挿入/編集機能を利用して YouTube の動画コードを埋め込む方法だ。

詳しくは『WordPressの記事にYouTube動画を埋め込む方法』を参考に設定してみよう。

2−10.画像の回りに余白を挿入する方法

画像を文中に左寄せ、または右寄せに挿入した時、余白があるだけで記事が読みやすくなる。まず、記事中の右寄せにした画像を選択して、画像の挿入/編集のアイコンを押そう。

すると下図の画面がポップアップされるので上部にある「詳細」タブをクリックする。すると「上下余白」、「左右余白」と入力欄があるのでピクセル数を入力する。

入力が完了したら「OK」を押そう。

あまり余白があり過ぎるとおかしくなるのでプレビューで確認しながら調整して使ってみよう。

実践しながら覚えて行こう

使い方を詳しくお伝えしてきたが、WordPressを使って、いくつもコンテンツを作って行くうちに勝手になれていくものだ。そのため、どんどん記事作成を進めて、何か詰まったことがあったらこのページをもう一度読んで確認していくようにしよう。

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. とてもわかりやすく参考にさせていただきました。
    1点質問があります。TinyMCE Advanced4.0 でWP3.9なのですが
    管理画面で編集アイコンお並べ替えてもデフォルトのものしか表示されず困っています。
    以前は、文字背景色が変えられるアイコンが使用できたのにアップロードを繰り返す
    ことで編集画面からアイコンが消えいます。管理画面上表示されていますが編集ページで
    表示されません。どうしてかわからずへこんでます。。。

    1. うれしいお言葉、ありがとうございます。
      TinyMCE Advancedのバージョンは常に最新なのに不具合が生じるのは気になりますね。
      一度TinyMCE Advancedを削除して、新たにインストールしてみてはいかがでしょうか?
      (もしくはWordPressを最新バージョンにする)

      万が一の不具合に備えてバックアップをとること、またローカルで同じ環境を作ってテストする事をおススメします。

  2. テーマ【Xeory Base】を使用させて頂いております。
    プラグイン「TinyMCE Advanced」で記事を分割してみたんですが、生地下に①②③みたいなのが出てきません。
    目次もプラグインで寄生しているのですが、最初のページだけの目次になってしまいます。
    何かいい方法はございませんでしょうか?

    1. たくんさん、コメントありがとうございます。
      正直申しますとご質問の意味を理解できなかったです。
      冒頭にページ内テキストリンクを並べて目次を作りたい、というご質問でしょうか?

  3. わかりやすくていねいな説明を公開していただいているので、いつも参考にさせていただいてます。以前も問い合わせに丁寧に対応していただいたものです。
    このページを参考に、TinyMCE Advancedをプラグインしてみました。プラグインはうまくいったのですが、阿多らしく記事を書いた際、h2とh4の見出しタグのデザインが崩れていることに気づきました。いままでは問題なく表示されていたのですが。ちなみにh3の見出しタグはなぜか今までどおりに表示されています。
    CSSをいろいろ変えてみたりしたのですが全く変化がなく、思い切って全く違うデザインに書き換えてみたのですが、変更が反映されません。
    TinyMCE Advancedをプラグインしてこのような不具合が起こることはありえるのでしょうか。TinyMCE Advancedの導入が原因とはかぎりませんが、他に設定をいじったところに心当たりがなく、、、。