2018.12.10 更新 | WordPress

TinyMCE Advancedの初期設定の方法と使い方を徹底解説

シェア ツイート  B! はてブ Google+ Pocket

WordPressのを投稿する際、
文字の色を変えたり、下線を引いたりと、
読みやすい記事を作るためには、様々な工夫をする必要があります。

ですが、デフォルトの設定だと使い勝手が悪く、
自分の使いたい文字装飾機能が備わっていない
と感じることもあるでしょう。

そんな時におすすめなのが、
「TinyMCE Advanced」というプラグインです。

 

TinyMCE Advancedを導入すると

  • Youtubeの動画挿入
  • 表の導入や編集
  • 画像まわりの余白を挿入

といった複雑な記事装飾が簡単にできるようになります。

WordPressの投稿画面で
HTMLやタグの知識がない方でも、
ボタン一つで編集できるようになるのです。

 

そのため、「TinyMCE Advanced」はワードプレスを立ち上げる際には
必ずといって良いほど導入しておくべきプラグインでしょう。

そこで、今回の記事では、「TinyMCE Advanced」の
インストール方法から設定方法まで徹底解説していきます。

ぜひ、この記事を読み進めながら
設定を完了させて下さい。

1.TinyMCE Advancedの導入方法

まずは、プラグインをWordPressに導入します。

プラグインの新規追加の検索窓に
TinyMCE Advanced」と入力しましょう。

 

TinyMCE Advancedの表示が出たら
今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに表示が変わります。

有効化を押すと、WordPressに
TinyMCE Advancedが反映されます。

有効化した後は、投稿ページのメニューバーの部分が
以下のように増えていれば導入完了です。

 

2.TinyMCE Advancedの初期設定の方法

次は、TinyMCE Advancedをもっと操作しやすくするために、
初期設定進めていきましょう。

まずはWordPress管理画面にある、
「インストール済みのプラグイン」から、
TinyMCE Advancedの「設定項目」クリックします。

すると、以下のような画面が表示されます。

設定画面

ここから、詳細設定をしていきます。

2-1.エディター設定について

既存の設定のままでもかなり文字装飾はしやすくなりますが、
任意で追加したいものを「使用しないボタン」の中から追加します。

 

念のため、弊社が新規でワードプレスを立ち上げる際に
よく追加する項目を紹介しておきます。

  • 下線
  • 横ライン
  • 画像の挿入/編集
  • 背景色

最低限、これらを追加しておけば、
基本的なブログの記事書きは問題なく出来るようになるでしょう。

そのため、追加したいボタンをドラッグして、
上のツールバーに追加してください。

追加後は、右上の「設定を保存」をクリックしましょう。

これで基本的な設定が完了します。

2-2.設定項目について

「設定」の項目については、
基本的にはデフォルトのままで問題ないかと思いますが、
必要に応じて任意に設定してみてください。

リストスタイルオプション

箇条書きリストや番号付きリストを作るときに、
先頭に点や数字が挿入されます。

コンテキストメニュー

編集画面で右クリックを押すとリンクや
テーブルを挿入できるようになりますが、
機能が少ないので特に必要ありません。

代替リンクダイアログ

リンク設定のボタンで
TinyMCE Advancedのリンク設定画面が開きます。

リンクを設定したあとなら
WordPressのリンク設定画面を開けます。

フォントサイズ

pxでのフォントサイズを設定できるようになります。

ただし、基本的には%で指定した方が汎用性が高いです。

2-3.高度なオプションについて

「高度なオプション」の欄には、
「段落タグの保持」にチェックを入れておきましょう。

こちらのタグにチェックを入れることで、
ビジュアルエディターとテキストエディターの
切り替え時に起こる自動補完を防くことができます。

こちらにチェックを入れておかないと、
せっかく綺麗に整えた記事の改行が
型崩れしてしまうこともありますので気をつけましょう。

 

高度なオプションについては、
CSS を別に用意しておく必要があるものもあります。

初心者にとっては難しいものも多く、
ひとまず記事を書く上ではほぼ必要のないものも多いです。

設定が完了したら「変更を保存」をクリックして終了します。

3.TinyMCE Advancedの使い方

TinyMCE Advancedはとても使いやすく、
すぐに直感的に使えると思います。

その上で、ここからはいくつか押さえておきたい
ポイントや、便利な機能などを紹介・解説していきます。

3-1.ビジュアルエディタとHTMLエディタ

TinyMCE Advancedは、
基本的にワードプレス投稿画面上の
「ビジュアルエディタ」で使用します。

WordPressの投稿画面では、
下記の赤枠で囲ったタブをクリックすると、
ビジュアルエディタとHTMLエディタに切り替わります。

「ビジュアル」を押すと、ビジュアルエディタ、
「テキスト」を押すと、HTMLエディタに切り替わります。

テキストエディタで記事を編集する場合は、
HTMLタグのソース込みで表示されるようになり、
TinyMCE Advancedで設定した装飾ボタンは反映されません。

 

テキストエディタ

ですので、TinyMCE Advanced はビジュアルエディタで操作するのが基本になります。

 

3-2.段落(見出しタグ)やフォント・文字を変更する

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

 

どんなブログテンプレートを導入するかによって
見出しのイメージが変わるのですが、
基本的には「段落」の欄を操作することによって調整できます。

 

見出しは、記事の読みやすさやSEO対策としても重要なので、
ぜひ覚えておきましょう。

 

その他、

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

これらも、文字を装飾したい部分をドラッグで選択し、
任意のボタンを押すことで装飾ができるようになります。

設定した箇所はビジュアルエディタ上ですぐに反映されるので、
簡単に確認することができます。

3-3.「MORE(モア)」タグの挿入

WordPressの投稿機能で記事を書くと、
その記事が自動的にトップページにも表示されるようになります。

 

よくブログを検索すると、「続きを読む」という形で
記事がコンパクトにまとまっている構成のものがありますが、
その機能を司るのが「モアタグ」です。

 

赤い枠で囲ったアイコンを任意の挿入したい場所に入れると、
「MORE」の記号がビジュアルエディタに表示されます。

トップページをコンパクトにまとめる時に使用するので、
覚えておいてください。

3-4.リストタグの挿入

記事の中で、箇条書きをしたい場合は「リストタグ」を使用します。

  • リストタグ1
  • リストタグ2
  • リストタグ3

↑このような表記になるのがリストタグです。

リストタグはとても便利で、
使う頻度も高い方も多いと思います。

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

記事の読みやすさもアップするので、
積極的に使用していきましょう。

3-5.YouTube動画を挿入する

TinyMCE Advanced には、動画を挿入する機能もあります。

 

ただ、動画ファイルを記事上に掲載すると、
レンタルサーバーのデータ転送量の制限をすぐに超えたり、
ファイルサイズ容量の上限に達してしまう
ので注意が必要です。

そこでおすすめなのは、
Youtubeにアップした動画を挿入することです。

メディアの露出にもつながり、
動画からブログへの導線にも繋がるので、
Youtubeと組み合わせて利用するようにしましょう。

 

TinyMCE Advanced でYoutubeの動画を挿入するには、
まずはビジュアルエディアにある「動画」のアイコンをクリックします。

すると次の画面が出るので、
挿入したい動画のURLとサイズを指定しましょう。

ちなみにですが、Youtube動画のURLを入れた場合、
サイズは自動で数字が入ります。

サイズが気にならない人はデフォルト設定で問題ないでしょう。

OKボタンを押したら次のような形で反映されます。

このようにビジュアルエディタに動画が埋め込まれたら完了です。

動画の差し込みに関しては、
これくらいを覚えていたらOKですので、
ぜひブログ記事に取り入れていきましょう。

3-6.画像の余白を挿入する

画像を文中に左寄せ、または右寄せに挿入した時、
余白があるだけで記事が読みやすくなります。

試しに参考までにどんな感じになるかを解説します。

 

赤枠で囲ったアイコンをクリックして挿入したい画像を選択すると、
↑の画面のように画像を配置することができます。

画像をクリックすると、
左寄せ、右寄せ、中央寄せなど
手軽に位置を変えることができるので便利です。

プレビューで確認しながら調整して使ってみましょう。

4.まとめ

今回は、TinyMCE Advancedをワードプレスへ導入する方法から、
具体的な設定方法、使い方などをお伝えしてきました。

WordPressにおける投稿を快適にし、
ブログ全体の見栄えを整えることができれば、
読み手にとっても読みやすく、
PV数や巡回率もどんどん伸びていきます。

ぜひ、実際に使いながら操作を覚えていって、
読者にとって居心地の良いブログを作っていきましょう。

それでは、最後まで読んでいただき、
ありがとうございました。

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

Twitter

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

コメントはこちらから

新田祐士プロフィール画像

監修・新田祐士

「ネットを使った教育産業化」をテーマにして、様々な業界と関わるようになる。インターネットを使って、様々な業界が「教育産業」となって、その業界に関わった人たちが成長するような仕組みを作り、今の教育機関に変わる新たな教育システムを作ることを目指している。