ロゴ

【プラグイン】TinyMCE Advancedの初期設定&使い方

PLUGIN WORDPRESS

アニマル-ペンギン

「TinyMCE Advancedプラグインを導入したいんだけど、設定や使い方が全くわからないので、知識がないぼくでもわかりやすいように教えてほしいなぁ・・」

そんな疑問にお答えします。

こんにちは YASUです。

「TinyMCE Advancedは文字装飾には必須」

ワードプレスをインストール後に最初に入れておきたいプラグインの1つとして人気があるのが「TinyMCE Advanced」です。

※ 当ブログはこんな感じ。

技術的な知識なども必要なく、誰でも簡単に扱えるプラグインです。

本記事の内容

  • 【プラグイン】TinyMCE Advancedの初期設定
  • 【プラグイン】TinyMCE Advancedの使い方

記事を見ていきましょう。

【プラグイン】TinyMCE Advancedの初期設定

TinyMCE-文字装飾

TinyMCE Advancedは、サイト作成していく上では必ずと言っていいほど、必須アイテムです。

ワードプレスをインストールして初期状態のままだと、文字を装飾するためにはHTMLを使ってコードを直接打たなければいけない状態です。

さすがに毎回コードを直打ちするのも面倒だし、そもそもHTMLのコードなんてわからないという人も多いかと思います。

そんな時に役に立つのが今回ご紹介する「TinyMCE Advanced」です。

ということでさっそく記事の流れについてご紹介します。

  • TinyMCE Advancedとは
  • TinyMCE Advancedをインストール
  • TinyMCE Advancedの設定

順番に解説します。

TinyMCE Advancedとは

TinyMCE-文字装飾

TinyMCE Advancedはブロックエディターとクラシックエディターを拡張・強化してくれるプラグインです。
※ エディターというのは記事の編集(文字装飾)ができる場所。

もっと簡単に言うと「文字装飾」のプラグインです。

ビフォーアフター

HTMLの知識が全くない人でも簡単にボタン一つで文字装飾することができ、自分の好みにカスタマイズすることができるので超便利な機能です。

ということで説明は終わりにします。

実践あるのみ!

TinyMCE Advancedをインストール

まずはTinyMCE Advancedをインストールしていきましょう!

TinyMCE-インストール

上記画像の通りです。

1, ワードプレスの管理画面にあるプラグイン新規追加 をクリック。

2, プラグインの検索で「TinyMCE Advanced」と検索。

3, 今すぐインストール有効 をクリック。

以上です。

TinyMCE Advancedの設定

TinyMCE-設定

管理画面の左の 設定TinyMCE Advanced の順にクリック。

上記画像のような設定画面にアクセスします。

旧エディター(TinyMCE)」をクリック。
※ 設定するところは「旧エディター(TinyMCE)」のところだけ。

下にスクロールするとオプションがありますが、デフォルトのままで大丈夫です。

上記画像の通りです。

上記画像のように、追加したいボタンを選んでツールバーに「ドラッグ&ドロップ」するだけです。

超簡単ですね。

ちなみに当ブログで設定しているボタンは下記くらいです。

ほぼ初期状態に近いかもです。

文字装飾-設定

上記のツールバーの中に入っているボタンが下記の内容です。

ボタン名内容
段落<h2>や<h3>タグを使う時に使用。
太字文字を太字にしたい時に使用。
イタリック文字をイタリック(斜め)にしたい時に使用。
引用引用タグを挿入したい時に使用。
番号なしリスト番号がないリストタグを挿入したい時に使用。
番号付きリスト番号付きのリストタグを挿入したい時に使用。
左寄せ文字を左寄せにしたい時に使用。
中央揃え文字を中央に寄せたい時に使用。
右寄せ文字を右に寄せたい時に使用。
リンクの挿入/編集文字の中にリンクを挿入したい時に使用。
リンクの削除文字の中のリンクを削除したい時に使用。
テキスト色文字の色を変えたい時に使用。
背景色文字の背景色を変えたい時に使用。
テーブル表を挿入したい時に使用。


文字装飾は好みなので、自分の好きなようにカスタマイズして、たくさん試してみることです。

設定が完了したら、最後に忘れずに変更を保存をクリック。

設定は以上です。

その他チェック項目がありますが、基本そのままでも十分使えるのでデフォルトのままにしておきましょう。

【プラグイン】TinyMCE Advancedの使い方

TinyMCE-使い方

TinyMCE Advancedの使い方に関しては正直説明するほどでもないくらい簡単です。

あとは管理画面の 投稿新規追加 をクリック。

エディター画面を見ると設定したボタンがツールバーに追加されているので、あとは文字に装飾するだけです。


上記画像を見てもらうとわかりますが、エディター画面の右上に「ビジュアル」「テキスト」と表示されていますが、文字装飾のボタンを使うときは基本「ビジュアル」画面で使用。

※ テキストはHTMLコードを直接入力する時などに使います。

ということで使い方は以上です。

最後に:文字装飾の使いすぎには注意

結論、文字装飾を使いすぎると、読者が記事を読みづらくなるので使い過ぎには注意したほうがいいです。

文字装飾を使いすぎた記事のデメリットはこんな感じ。

  • 文字色を使いすぎて、強調したい部分が読者に伝わりにくい。
  • 読みづらいと感じて離脱。

文字装飾が多い記事だと、読者が不快に感じて記事を読む前に離脱される可能性が高くなります。

とはいえ、全く何も文字装飾しない記事だと新聞みたいになって読み疲れるので、この辺はバランスが大事。

基本的には文字色は黒と赤くらいでいいかなと。

あとは一度「型」を決めたら、ずっとそのスタイルで文字装飾をしていくと読者も読みやすいと思います。

毎回記事によって、カラフルな文字装飾になっていると読みづらいですよね。

初めのうちは色をたくさん使いたくなりますが、第一に考えるのは「読者」です。

上から目線ですいませんm(__)m

ということで、今回は以上です。

まずは好きなように文字装飾して色々試して遊んでみるのが一番(^_^)v

人気記事 【全公開】ブログの立ち上げ方法/サイト作成完全マニュアル【無料】

人気記事 【就職サポートあり】動画編集のおすすめオンラインスクール【5社】

                                                                   

Resources