ブログの始め方

WordPressの文字装飾プラグインTinyMCE Advancedの設定方法や使い方を解説

WordPressで記事を作成するときには、
「いかに作業を効率化するのか」ということはとても大切です。

限られた時間の中で1記事でも多く記事を作成したい、
ということは誰もが思うことでしょう。

数ある作業効率プラグインのなかで私がオススメしたいのは、
TinyMCE Advancedです。

記事作成を楽にしてくれるプラグインなのですが、
WordPress利用者の中で
使っていない人はいないんじゃないかと思います。

このプラグインを使って、
効率よくストレスの少ないで記事作成をしていきましょう。

TinyMCE Advancedで出来ること

「TinyMCE Advanced」とは、
WordPressで記事作成を効率化してくれるプラグインです。

WordPressの投稿画面(記事作成画面)というのは、
デフォルトの状態だとこのような状態になっています。

ビジュアルエディタ,写真

もちろんこれだけでも記事作成や編集はできるのですが、
ボタン一つで行えるのは文字を太くしたり斜めにしたりする程度。

ブログ記事を読みやすくするには、

文字のサイズを大きくしたり、

文字の色を変えたり、

マーカーを引いたり…

といった装飾は欠かせませんね。

特にトレンドブログは、
ユーザーは娯楽で記事を見ているため。
「読みにくい」と思った瞬間に離脱してしまいます。

ずっと黒い文字が並ぶよりも、
途中で画像や装飾が入った方が読みやすいですよね。

デフォルトの状態のままこのような装飾をするには、
いちいちテキストエディタでHTMLを編集しなくてはなりません。

とても面倒なので、装飾をする気もなくなります…!

TinyMCE Advancedは、そんな面倒な作業を
ボタン一つですませるようにしてくれる超便利な存在。

文字の装飾だけでなく、
表の挿入やリンクを貼ったり
編集の取り消しややり直しも簡単に行えます。

トレンドブログに限らず、
WordPressを使ってサイトを運営している方の
ほとんどが使っているプラグインです。

TinyMCE Advancedの設定方法

では、TinyMCE Advancedをインストールして
設定を進めていきましょう。

インストール&有効化しよう

まずはTinyMCE Advancedをインストール&有効化しましょう。

ダッシュボードのプラグイン>新規追加から
「TinyMCE Advanced」を検索しインストール&有効化してください。

TinyMCEAdvanced,写真
プラグイン,画像
WordPressでプラグインをインストールする2つの方法と注意点を解説!WordPressを立ち上げたら、 必要なプラグインのインストールをしていきます。 今回はプラグインとは何なのか?という解説から...

使用するボタンを選ぶ

有効化ができたら、ダッシュボードの設定の中に
「TinyMCE Advanced」が追加されています。

これをクリックで設定画面に移ります。

TinyMCEAdvanced,写真

ここで「エディターメニューを有効化する」にチェックを入れて、
投稿画面のツールバーに使用したいボタンを追加していきます。

TinyMCE Advanced,写真

使用しないボタンの中から必要なボタンを
ドラッグ&ドロップで上のエディターメニューの中に追加しましょう。

不要なものは使用しないボタンに移動させればOKです。

エディターメニューの中のボタンの位置もドラッグで変更可能です。

あまり何でもかんでも追加しすぎると後で邪魔になるので
2行分くらいに収めるのことをおすすめします。

参考までに私が使用しているボタンを紹介させていただきます。

ビジュアルエディタ,写真

何度でも変更ができますので、
自分の使いやすいようにカスタマイズしていきましょう。

設定項目にチェック

次は「設定」の項目です。

4つ項目で必要なものにチェックを入れていきます。

TinyMCEAdvanced,写真

こちらは、

  1. リストスタイルオプション
  2. フォントサイズ

この2つにチェックを入れておきましょう。

ただ、見慣れない単語ばかりで
なんのことだか分からない方も多いと思いますので、
念のため4つの項目について解説しておきますね。

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

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

リストの横にプルダウンメニューが付いて
色々な種類のリストを使用出来るようになります。

TinyMCEAdvanced,写真 TinyMCEAdvanced,写真

通常は箇条書きリストは黒丸、
番号付きリストは算用数字のみですが、
色々なパターンが選べるようになります。

②コンテキストメニュー

記事投稿画面のビジュアルエディタ上で右クリックを押すと、
リンクやテーブルを挿入といった
TinyMCE Advancedのメニューが表示されます。

TinyMCEAdvanced,写真

③代替リンクダイアログ

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

代替リンクダイアログのチェックなし状態だと、
リンクボタンを押すとこのような画面が展開されて…

リンク,写真

右側の歯車マークをクリックすると、
WordPressのリンク編集画面が開きます。

リンクの編集,写真

一方、代替リンクダイアログにチェックをした状態だと、
リンクボタンをクリックすると
TinyMCE Advancedのリンク設定画面が開きます。

リンクの挿入,写真

TinyMCE Advancedのリンク設定画面の項目を
詳しく解説するとこんな感じです。

  1. URL:リンク先のURL
  2. リンク文字列:リンクにする文字
  3. タイトル:マウスオーバー時に表示される文字
  4. Rel:nofollowの設定をするかどうか▼プルダウンメニューから選択
  5. リンクターゲット:リンク先を新しいウィンドウで開くかどうか▼プルダウンメニューから選択

 

④フォントサイズ

フォントサイズの大きさの表示が
pt(ポイント)単位からpx(ピクセル)単位に置き変わります。

フォントサイズ,写真

正直どれもめちゃくちゃ重要なものではありませんが、
迷ったら一番上のリストスタイルオプションと
一番下のフォントサイズにチェックを入れておけばOKです。

高度なオプションにチェック

最後は「高度なオプション」です。

こちらは名前の通り高度な設定で初心者には分かりにくいこともあるため、
とりあえず「段落タグの保持」にだけチェックを入れておきましょう。

TinyMCE Advanced,写真この機能にチェックを入れると、
ビジュアルエディターとテキストエディターの切り替え時に
自動補完が発生することを防ぐことができます。

チェックがない状態だと記事を保存したときに
自動的に改行タグや段落タグが削除されたり、
ビジュアルエディタとテキストエディタの切替時に
改行タグや段落タグの崩れが起こります。

これを「段落タグの保持」にしておくことで
ビジュアル⇆テキストの切り替えをして編集をする際に
不要なタグが追加されてしまう不具合を少なくすることができます。

ここまで出来たら「変更を保存」で設定は完了です。

TinyMCE Advanced,写真

TinyMCE Advancedの使い方

設定が終了したら、
あとは記事作成でボタンを活用していきましょう。

ここでは簡単に投稿画面での使い方を解説させていただきます。

投稿画面に移ると、ボタンが追加されています。

ビジュアルエディタ,写真

先にテキストを入力→変更したい箇所をドラッグで選択し、
各種ボタンで装飾などを行うのが使いやすいです。

投稿画面,写真

文字色を変えてみたり…

投稿画面,写真

背景色を変えてみたり…

投稿画面,写真

太字にしてみたり…

太字,写真

色々な機能があるので、
まずは自分で試してみると慣れるのも早くなります。

プレビュー画面で見るとこんな感じです。

プレビュー画面,写真

使い方は簡単なので、
ボタンの種類は一通りチェックしておくといいと思います。

その中で自分が使いたいものを厳選していきましょう!

Blog,画像
WordPressのエディタの使い方!ビジュアルエディタの装飾ボタンを解説前回はWordPressのブログの書き方について、 記事投稿までの流れを解説しました。 その中でも少し触れましたが、 ビジュア...

TinyMCE Advancedまとめ

読みやすい記事を書く上で、
表や段落の挿入や文字装飾は欠かせないものです。

それも毎回コードを打ち込むのは相当な手間になりますので、
ボタン一つで設定ができるTinyMCE Advancedを使って
効率よく記事作成を行っていきましょう。

設定も簡単なので、ぜひ使ってみてくださいね!

最後まで読んでいただき、ありがとうございました!

Juri
Juri
私は現在、PC1台でシゴトをしながら湘南ライフを送っています。

海が近くにある大好きな街で、好きな時に起きて、好きなだけ働いて、好きな人とだけ過ごす...こんな自由な生活をしています。

今でこそストレスフリーな生活を送っている私ですが、つい最近までは普通の銀行員で家と職場を往復するだけの平凡な毎日を過ごしていました。

やりたいことはもちろん、これといって得意なことも、夢中で打ち込めるものもありませんでした。

では、私はどうやってここまでたどり着いたのか...興味がある方はよかったら私のプロフィールをご覧ください。

こちらからどうぞ▶︎▶︎JuriのPROFILE