【保存版】Tiny MCE Advanced の設定方法と使い方

WordPressの通常の投稿機能では
細かい設定が出来ません。

例えば、
以下の内容をWordPressで投稿しようとすると
ある程度のHTMLの知識が必要となります。

・YouTube動画の挿入
・テーブルタグの挿入や編集
・文字の大きさや色などの細かい装飾
・画像の回り余白を挿入

検索してくれるユーザーにとって
コンテンツを読みやすくするためには、

通常のビジュアルエディターだと
HTMLの知識が多少なりとも必要となるので、

WordPressを始めたばかりの
初心者だと、いささか敷居が高いです。

そこで今回ご紹介する
「TinyMCE Advanced」の
プラグインを導入すると、

例え、HTMLの知識がなくても、
直感的で無料ブログのように使いやすく、
他のブログよりもっと自由度の高い
コンテンツを作ることが出来ます。

簡単に出来るインストール方法や
詳しい設定を解説していきますので、
ぜひ、参考にして欲しいと思います。

目次

1:TinyMCE Advancedのインストール方法
2:TinyMCE Advancedの設定方法
3:TinyMCE Advancedエディターの使い方と使用頻度の高い10項目
4:まずは実践して使い方に慣れましょう。

1:TinyMCE Advancedのインストール方法

こちらが通常のWordPressの記事投稿画面になります。

tiny-mce-advanced1

そしてこちらがTinyMCE Advancedのプラグインを導入した後の画面になります。

tiny-mce-advanced2

コンテンツを編集出来る様々な項目を
使うことが出来るようになります。

項目ごとの細かい内容については、
後々に表にまとめて解説致します。

難しいことは何もありませんので、
こちらで紹介しているとおりに
設定を行ってください。

まずは、
さっそくTinyMCE Advancedのプラグインを
インストールしていきましょう。

下記の画像にように
「プラグイン」→ 「新規追加」をクリックしてください。

wordpress

クリックしましたら下記の画像の矢印先に
「TinyMCE Advanced」のプラグイン名を
コピーして貼り付けてください。

wordpressplugin

貼り付けたら、下記の画面に移行しますので、「今すぐインストールボタン」を押して頂き、そのまま有効化を押してください。これでTinyMCE Advancedプラグインのインストール及び有効化は完了となります。

tiny-mce-advanced3

 

2: TinyMCE Advancedの設定方法

続いて細かい設定方法に入っていきますが、難しい作業ではありませんので、紹介どおりに設定して頂ければと思います。ここで設定するのは主に2点のみです。

 

・記事投稿で使う編集ボタンの追加

・より細かい詳細設定にチェックをいれる

 

この2つだけですので安心してください。

 

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

 

まずは設定画面にアクセスします。有効化が完了したら左サイドバーメニューの一覧の「設定」から「TinyMCE Advanced」を選んでクリックしてください。

tiny-mce-advanced4

クリックしましたら下記の画面へと移行します。

tiny-mce-advanced6

 

それでは、早速編集していきましょう。

記事投稿時に使う編集ボタンの追加・設定方法

ビジュアルエディター(記事投稿画面)にボタンを追加したい場合は、下記の図のように好きな項目を矢印先のツールバーに向かってマウスで「ドラッグ・アンド・ドロップ」をすれば簡単に追加出来ます。

tiny-mce-advanced5

参考までに当サイトや弊社クライアント様の方々には、以下のボタンを設定するようにお伝えしていますので参考にして頂ければと思います。

アイコン ツール名 使用用途
danraku 段落 <h2>や<h3>などの見出しタグを設定する
font-size フォントサイズ 文字のフォントサイズを変更する時に使用する
text-background 背景色 文字の背景に色をつけたい時に使用する
textcolor テキスト色 文字に色をつけたい時に使用する
bold 太字 文字を太字にして強調したい時に使用する
italic イタリック 文字を斜めにしたい時に使用する
quote 引用 文字の引用をしたい時に使用する
bullet-list 番号なしリスト 文字をリスト化したい時に使用する
numbered-list 番号付きリスト  文字を番号リスト化したい時に使用する
alignleft-1 左寄せ  文章を左寄せにしたい時に使用する
align-center 中央揃え 文字を中央寄せにしたい時に使用する
alignright 右寄せ  文字を右寄せにしたい時に使用する
justify 両端揃え  文字の横幅を揃えたい時に使用する
link リンクの挿入/編集  文字にリンクを挿入したい時に使用する
removelink リンクの削除  文字のリンクを解除したい時に使用する
cancel 取り消し  一つ前の作業に戻りたい時に使用する
redoing やり直し  「取り消し」操作を戻したい時に使用する
outdent インデントを減らす  文章をアウトデントしたい時に使用する
indent インデントを増やす  文章をインデントしたい時に使用する
cancel1 打ち消し  文章に打ち消し線を入れたい時に使用する
more-tag 「続きを読む」タグを挿入  モタタグを挿入したい時に使用する
underline 下線  文章にアンダーラインを挿入する時に使用する
block ブロックを表示  記事内容のブロックで視覚化したい時に使用する
table テーブル  テーブルタグをいれて表を使いたい時に使用する
tmce-picture 画像の挿入/編集  画像の挿入、編集の時に使用する。画像に余白を入れたり、画像サイズにピクセル数を入力して大きさを調整する時に便利な機能
tmce-video 動画の挿入/編集  動画を挿入する際に使用する。YouTube動画を挿入する時に特に便利な機能*それ以外だとサーバーに負荷がかかるのでお勧めはしていない
toolbar-toggle-1 ツールバー切替  ビジュアルエディターで
もっとたくさんの編集ボタンを表示させたい時に使用する
*基本的にエディター一段目の右端に表示させることを推奨
writing 集中執筆モード  サイドメニューを消して執筆画面のみで作業したい時に使用する

*アウトデントとは?:

アウトデントとは、横組みで段落の1行目が始まる位置を、ほかの行よりも左(縦組みでは上)に置くことで、辞書の見出し語などを目立たせるために行います。インデントとは反対の機能になる。

引用先:アウトデントとは?

*インデントとは?:

「インデント」とは、文章の行頭に空白を挿入し、先頭の文字を右にずらす「字下げ」のことです。 または挿入された空白(スペース)を指すこともあります。 ワードでは、ページを囲むように設定した「余白」と「段落」との間に設定した空きスペースのことを「(段落の)左インデント」「右インデント」と呼んでいます。

引用先:「インデント」「ぶら下げインデント」とは

上記の内容を全てで設定すると以下のような画面になる

 

tinymce-advanced1

赤い矢印先の「エディターメニューを有効化する」にチェックをいれておくと下記の図のように「メニューバー」が表示されます。

tinymce-advanced2

 

私が使用する際は、ほとんど使わず
通常時は編集ボタンのみで作業を行いますが、
他の機能を使いたい時などで
確認用に使うと有効に活用することが出来ます。

 

詳細な設定方法

次にTinyMCE Advancedの編集ボタン追加項目の下にある「設定」に進みます。以下の2項目にチェックをいれておくとより詳細な編集をすることが出来ます。

tinymce-advanced3

・リストスタイルオプションにチェックをいれておくと「リストタグ」を使用した際に●や■など他の記号を使用出来るようになります。

・フォントサイズにチェックを入れておくと上記の画像に記載されているpxの大きさを使用出来るようになります。ブログはパソコンやスマホユーザーがメインなので適したpxの大きさを選びましょう。

*8pxと10pxはコンテンツブログとしては不向きです。なので現状はデフォルトで問題ありません。
ちなみにこちらは、見出しタグと太文字のタグをメインで使用しております。

高度なオプション

こちらは下記の画像のように初期値の状態で問題ありません。

tinymce-advanced7

 

高度なオプション機能ですが、こちらの項目はCSSの知識やHTMLの知識等が必要になるケース等があります。特に難しいサイト運営をするわけではありませんので、それよりご自身のビジネスの売上を幅を広げるためにコンテンツを作る時間を先に確保して欲しいと思います。*参考までですが、私たち未使用で運営しております。

管理項目について

最後の管理項目になります。

tinymce-advanced5

こちらは、例えば別のWordPressのブログを立ち上げて最初からTinyMCE Advancedのエディター設定をするのが煩わしい時に使用します。

「設定のエクスポート」ボタンを押すと次のようが画面に移ります。

tinymce-advanced8

こちらのタグを全てコピーして他のテキストエディターやメモ帳に貼り付けておくか、コピーした状態でTinyMCE Advancedをインストールした他のワードプレスの管理画面を開き、先程の管理画面の「インポート」ボタンをクリックしてください。

tinymce-advanced9

そうしましたら下記の画面に移動しますので、先程コピー、保存をしておいたタグを空白の部分に貼り付けて(ペースト)して「インポート」の青いボタンをクリックすれば完了です。

tinymce-advanced10

これでTinyMCE Advancedの設定は完璧です。
次に実際の使い方について解説していきます。

 

3:TinyMCE Advancedエディターの使い方と使用頻度の高い10項目

実際に使って頂ければ分かると思いますが、
TinyMCE Advancedエディターを使うと
無料ブログと同じように直感的感覚で
記事の投稿、編集を行うことが出来ます。

ここでは、以下の項目について使い方をまとめておきます。

  • 投稿時のビジュアルエディターとHTML入力の切替方法
  • 段落(見出しタグ)やフォント・文字の変更方法
  • 文字揃えの変更方法
  • Moreタグ(続きを読むボタン)の挿入方法
  • リンクの貼り付け方法
  • 引用タグの挿入方法
  • 表(テーブルタグ)の挿入方法
  • メディア(画像)の投入方法
  • 画像の回りに余白を挿入する方法
  • YouTube動画の挿入方法

こちらのサイトでは、
YouTubeと画像の余白を追加する操作は
ほとんど行いませんが、

これからWordPressを始める方や
色んなサイトを作っていこうと
考える時もあると思いますが、

上記の方法を全て抑えれば
WordPressの記事投稿で困ることは
なくなります。

それでは早速説明をしていこうと思います。

投稿時のビジュアルエディターとテキストエディターの切替方法

人によって、やり方は異なるかもしれませんが、
記事を投稿する際にどちらのエディターを使った効率がいいのか?

こちらについて解説していきたいと思います。

まずは、ビジュアルエディターと
テキストエディターの切替方法について
解説していきましょう。

wordpressedita

ビジュアルエディターに直接記事を書いていくのであれば
一つだけ気をつけて欲しいところが改行である。

文字を入力して「enter」ボタンを押すと
このように変に一行開けて改行される事で
困った経験はないでしょうか?

この改善策は簡単で、行を開けずに改行をしたい場合は、
「shift」キーを押しながら「enter」キーを押せば
綺麗に改行することが出来る

wordpressedita1

ビジュアルエディターは、HTMLが分からない方や
初心者でも上記のことに気をつければ
安心してコンテンツを作ることが出来ます。

人によってはワードやメモ帳に書いた文章を
そのまま記事にコピーして貼り付けたいと
考える方もいるでしょう。

しかし、その場合だと
同じように自分が思うような改行がされずに
ビジュアルエディターに反映されて
修正に余計な時間がかかった事はありませんか?

私も同じことで悩んでいたのですが、
その場合、私が普段やっているやり方が
とても役に立つと思います。

テキストエディターに切り替える

WordPress用記事をメモ帳やワード等のソフトから
貼り付ける場合は、まずテキストエディターに切り替えます。

記事の原稿をコピーしてテキストエディターに貼り付ける

WordPress用に他のテキストエディターや
Word、メモ帳等で書いた記事を全てコピーして
テキストエディターに全文貼り付けます。

ビジュアルエディターに切り替えてから編集を行う

貼り付けたらビジュアルエディターに切り替えれば
綺麗に改行がされた状態でビジュアルエディターに残りますので

あとは、<h2>や<h3>の見出しタグや文字色等の装飾を
ビジュアルエディターで行えば、
素早く編集作業に移ることが出来ます。

*注目:人によってはTinyMCE Advancedで設定した編集ボタンが全部ビジュアルエディターに表示されていないという場合があります。その場合は下記の図をご覧頂き「ツールバー切り替え」アイコンをクリックすれば一列しか表示されていなかった編集ボタンが表示されるようになります。
tinymce-advanced11

 

段落(見出しタグ)やフォント・文字の変更方法

文章に見出しタグをつけたり装飾していくためには、
文章をドラッグや3連続クリックを行い、
装飾したい文章を選択した状態で
編集ボタンをクリックして進めていきます。

tinymce-advanced12

今回は赤枠の中の4つの編集ボタンで
実際の画面を見ていきます。

編集を行えばビジュアルエディター上で
分かるように文字の雰囲気が変わります。

tinymce-advanced13 tinymce-advanced14

このようになります。特に見出しタグはWordPressでのサイト集客やコンテンツSEOで非常に重要な要素になりますので、覚えておいてください。見出しタグの順番やWEB上のライティング技術についても学んでおきましょう。

上記の「見出しタグ」「テキスト色」「太字」「フォントサイズ」の装飾以外に

  • イタリック
  • 引用
  • テキスト背景色
  • アンダーライン
  • 打ち消し線
  • リンクタグの貼り付けと解除
  • 文字揃え

これらの設定も同じように文章を選択した状態で行うものになり
変更後もビジュアルエディター上で視覚的に確認が出来ますので
非常に便利で分かりやすいです。

文字揃えの変更方法

次は文字揃えの変更方法となります。
文字揃えとは、左寄せ、中央揃え、右寄せ、中央揃えを使って
コンテンツを見やすくするための使うものです。

装飾の仕方は同じで文章を選択して、
編集ボタンをクリックすれば行うことが出来ます。

tinymce-advanced15

記事を作る時、基本的には左詰め(デフォルト)がメインとなりますが、ケースバイケースで右寄せ、中央寄せ、両詰め揃えを使うことが度々ありますので、どういった時に使用するのか?一つずつ解説していきます。

右寄せは、主にコンテンツを引用した際に引用タグを合せて使うことが多いです。

tinymce-advanced17

中央揃えを使用する時は、上記の画像のように画像等の見栄えを良くするために画像を選択した状態で中央寄せの編集ボタンを使うことが多くあります。

もちろん画像の大きさにもよりますが、こちらでは、小さい画像は左寄せのデフォルトで使用し、大きい画像の際はコンテンツの見栄えを考えて、中央寄せを使用することが多いです。

両端揃いは、文中に余白の多い英語を使っている文章のフレーズをまとめて選択して使うことで余白を埋めることが出来ます。微々たる差ですが、下記の画像を見比べてみて頂ければと思います。

 

tinymce-advanced18

上記のような設定は、下記の画像のようにビジュアルエディターで視覚的にも確認が出来ますので、実際に使って頂き、ユーザーの方に見やすいコンテンツを作成して頂ければと思います。

tinymce-advanced19

文字を揃える装飾ボタンは、使用頻度も多くかなり役に立つことがたくさんありますので覚えておいて頂ければと思います。文字も画像もきちんと揃える編集をすることでユーザビリティの高いコンテンツを作成することが出来ます。

Moreタグ(続きを読むボタン)の挿入方法

Moreタグというのは、文中にいれることで下記の図のような「続きを読む」ボタンを作成することが出来るです。

tinymce-advanced20

こちらをいれる理由は、コンテンツの記事が5記事、10記事と貯まっていくとサイトのトップページから下にスクロールした時に5記事なら5記事分の全文章、10記事なら10記事分の全部の文章がトップページに表示されるようになってしまいます。

全部の文章が表示されるということは、すごく縦長のサイトになってしまい情報を探しているユーザーにとっては、情報を探すのがすごく難しくなり、利便性がなくなってしまいます。

そこで使用するのが「Moreタグ」です。

使用方法は、文章と文章の間で区切りたい箇所にカーソルを合せて「続きを読む」タグ挿入のボタンをクリックするだけですので、とても簡単にいれることが出来ます。(下記の図を参照)

tinymce-advanced21

タグを挿入すると入れた場所に「——————–MORE——————–」が表示されます。

tinymce-advanced22

普段いれるクセがないと
忘れてしまいがちになりやすいものです。

最初から入れるように日頃から
習慣にするようにしておいてください。

入れる場所は冒頭文章で

「この記事に自分の問題を解決する情報がある」

と思ってもらえるような
文章を記載することで
PV数やサイト滞在率などに影響を与えます。

リンクの貼り付け方法

リンクの挿入方法は、引用の時や
記事や商品を紹介するなど
使用頻度の高いボタンの一つになります。

装飾方法はリンクをいれたい文章を選択して
リンクの挿入ボタンをいれることで
希望するURLのリンクをつけることが出来ます。

tinymce-advanced23

こちらをクリックするとリンクをつけるURLを記載する項目が表示されます。

tinymce-advanced24

そちらにURLをいれることで
リンクをつけることが出来ますが

歯車のアイコンをクリックすると
より詳細な設定が可能になります。

tinymce-advanced25

URLを入力し、リンクをつけるとビジュアルエディター上で文字の色が変わりますので確認出来ます。
またポインターを合わせるリンク付けされているURLの確認も出来ます。

tinymce-advanced26

引用する際にリンクをつけたり、他の記事へのリンクを貼る際など使用する機会が多いので、これを機に覚えておきましょう。

リストタグの挿入方法

コンテンツの文章を箇条書きにする
リストタグの挿入方法です。

実際にリスト化した状態は
このように表示されます。

tinymce-advanced27

リストタグで1番重要な事は、
ユーザーに向けて箇条書きで
大事なポイントを簡潔に伝えられることです。

情報量が多いブログ記事の中で、

「この記事では、こんな事が書いています。」
「このパートでは、こういう事を伝えるよ。」

と簡潔に伝えることが出来るので、
どんな情報があるのか?

また本の目次的な感じで
ユーザーの興味を惹くことが出来ます。

リストタグの設定方法ですが、
箇条書きにしたい文章を選択して
「番号付きのリストタグ」か「番号なしのリストタグ」を
選んでクリックするだけです。

tinymce-advanced28

タグを選択し、クリックすると箇条書きでリスト化されます。また番号付きをクリックすると1から順番に番号順にリスト化されます。

tinymce-advanced29

このように簡単にリスト化できますので、
ユーザーに大事なポイントを箇条書きで
伝えたい時に活用して頂ければと思います。

引用タグの挿入方法

引用タグは、他のサイトや情報、
書籍などから引用してきた
文章に対して使用するタグになります。
(下の図参照)

tinymce-advanced17

引用タグと同時に引用元のリンク先も
伝えるのが大事なポイントになります。

イメージ的には、文章の引用をタグで知らせて
実際にクローラーが回ってきた時にリンクが貼られていれば

「あ、本当に引用してきたものなんだな。」

とサイト運営者の意図を理解してくれるからです。

逆に引用タグと引用元のリンク先を
きちんと知らせてないと、
「引用が証明」出来てない状態になるので、

検索エンジンがコピーサイトと考え
SEO的に不利な評価を受けてしまいますので

情報を引用する場合は、
引用タグと引用元のリンクは
両方とも設定しておく必要があります。

引用タグ → 検索エンジンに知らせるもの
引用元リンク → 検索エンジンに対しての証明

というイメージで考えてください。

引用タグの設定は、引用してきた文章と
引用元リンクをを選択しタグのボタンをクリックすれば完了です。

tinymce-advanced30

クリックした後のビジュアルエディターの画像をご覧になればわかりますが、視覚的には文章が少しインデントされた状態になります。

tinymce-advanced32

実際の表示画像はこちら

tinymce-advanced31

引用は文章に権威性と信頼性を持たせるために重要なパーツでもありますので、正しい使い方を知ってコンテンツ作りの参考にしてください。

表(テーブルタグ)の挿入方法

こちらはかなり個人的に好きな機能でTiny MCE Advancedでは、投稿画面でテーブル(表)を簡単に作ることが出来ます。例えば、四角の枠で文章を囲みたい時や、商品や情報を表にしてまとめたい時などに役立ちます。

使用したい場所で「テーブルタグ」をクリックすると表を入れるメニューが表示されます。必要なマスの分を選択してクリックしてください。

tinymce-advanced33

ビジュアルエディターではこのように視覚化され、マスの間に必要な情報を入力したり足りなければ「行の追加」や表自体の大きさをドラッグ・アンド・ドロップで調整もできます。

tinymce-advanced34

実際の表示画面はこちら

tinymce-advanced35

プラグインのオマケ的な機能ですが、必要な情報をまとめたい時や一つの枠内で注意ポイントとしてまとめたい時などに利便性が高い機能になります。

ただしデザイン性は正直殺風景なので、ちょっと物足りない人もいるかもしれません。その場合は、HTMLの知識やCSSの知識が必要なり、直接テキストエディターでタグ打ち等をする必要があります。

Tiny MCE Advanced動画の挿入方法

Tiny MCE Advancedでは動画をいれる機能があります。動画を挿入したい箇所に動画挿入タグをクリックすると項目が表示されます。

tinymce-advanced36 tinymce-advanced37

 

しかし、動画を契約しているサーバーにあげてブログ記事にのせるとレンタルサーバーの転送量とファイルサイズの容量の上限をすぐに超えてしまいます。なのでYouTube動画を活用します。

まずYouTube動画のURLを用意します。

用意したら項目に埋め込んでいきましょう。

tinymce-advanced38

URLを入力して幅と高さを入力したらOKボタンをクリックしてください。

クリックしましたらビジュアルエディターで表示状態を確認してみましょう。

tinymce-advanced39

ブログでの表示状態をプレビューで確認してみましょう。

tinymce-advanced40

このように簡単にYouTube動画を埋め込む事が出来ます。

画像の回りに余白を挿入する方法

写真や素材を左寄せや右寄せにした時に
文章が綺麗にまとまらないことって
経験したことありますか?

Tiny MCE Advanced の画像挿入、編集タグを使用すると
HTMLの知識がなくても余白を作り記事を読みやすくすることが出来ます。
まずは画像を選択して、画像の挿入/編集タグをクリックしてください。

tinymce-advanced41

そうしましたら画像を編集する項目がポップアップで出てきますので「詳細」をクリックしてください。そしたら上下余白と左右余白の項目が出ますので、入力しましょう。

tinymce-advanced42

今回は左右の余白だけを入力してみましたので、
ビジュアルエディターを確認してましょう。

tinymce-advanced43

文字が一列で綺麗に整いましたね。

そしたら実際のブログをプレビューで確認してみましょう。

tinymce-advanced44

余白のピクセル数は大きすぎても
おかしくなりますので、プレビュー画面で
確認しながら調整していきましょう。

4:まずは実践して使い方に慣れましょう。

これまでたくさんの機能について
詳しく説明してきましたが、
今回の記事をご覧頂きながら、

WordPressを使って記事を書いていくと
自然に慣れていきます。

大事なことは妥協しないで検索ユーザーや
ブログに訪れた方に対して
良い記事を書こうという気持ちです。

その気持ちがあれば自然に妥協なく
クオリティの高いコンテンツを
作ろうとしている内に
すぐ使えるようになります。

学ぶことも大事ですが、
学んだことを実践すれば
いち早く学んだ事が身につきます。

機能の使い方やコンテンツを作る時に忘れてしまった場合は
もう一度、この記事を読み返して確認するようにしてください。

 


あわせて読みたい


 

 

WordPressに導入必須のおすすめプラグイン12+17選

【保存版】All in One SEO Pack の設定方法と使い方

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ビジネスZEROでは、0からビジネスを作り会社や国に頼らなくても自身で稼ぎ続ける起業、副業、WEBマーケティングノウハウを徹底的に追求し、個人でも稼ぐことが出来るビジネスモデルの作り方やマネタイズの方法等、具体的なノウハウを1から10まで可能な限り、トコトン提供していきます。