yurufuwatty.com

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

2019/05/06
 
TinyMCE Advanced
この記事を書いている人 - WRITER -
ゆる~くふわっと気になったニュース、好きな趣味なんかをブログで書いたりします。

WordPressでブログを書く際に、投稿やページ編集をより快適に「自分の思った通りに」できると

作業効率ももちろんですが、ブログを楽しみながらできるコツの一つかと思います。

しかし、初期設定の状態だと、「文字のサイズマーカー(背景色)」などを変更することができません。

今回はこのブログをより快適に楽しくするために、必要なプラグインの「TinyMCE Advanced」についてインストール方法~使い方までまとめています。

TinyMCE Advancedとは?

「TinyMCE Advanced」とはインストールするだけでビジュアルエディタを拡張できるプラグインになります。

「TinyMCE Advanced」のビジュアルエディタ拡張は特にカスタマイズ性に優れており

自分が普段使用するボタンだけを簡単に並べておけるので、ブログの作業効率が格段と上がりより快適に書くことができるかと思います。

 

TinyMCE Advancedインストール

まずは、自分のWordPress管理画面から「TinyMCE Advanced」をインストールしましょう。

プラグインから新規追加

ご自身のWordPress管理画面の左側のメニューで「プラグイン」から「新規追加」をクリック。

「TinyMCE Advanced」を検索

TinyMCE Advanced

  • 「新規追加」をクリックするとプラグイン検索画面になるので右側の検索窓に「TinyMCE Advanced」と検索します。
  • 検索すると画像のように「TinyMCE Advanced」が出てきますので「今すぐインストール」をクリック
  • 「今すぐインストール」をクリックすると「有効化」に変わるのでこちらもクリック

これで「TinyMCE Advanced」のインストールは完了しましたので設定方法について書いていきます。

 

TinyMCE Advanced設定方法

「TinyMCE Advanced」を選択

TinyMCE Advanced

インストール後、WordPress管理画面の左側のメニューの設定から「TinyMCE Advanced」をクリック

自分用にカスタマイズ

TinyMCE Advanced

「TinyMCE Advanced」をクリックした後、水色の「Classic Editor」をクリック

クリックしたら画像のようになるかと思いますので、

下の緑の枠(使用しないボタン)から自分が普段よく使うものを上の緑の枠(テキストエディタ)の部分に持っていきます。

 

例)マーカー(背景色)を追加してみよう

TinyMCE Advanced

マーカー(背景色を加えたい場合、

画像のように「背景色」をクリックしながら上の緑の枠(テキストエディタ)に移動させます。

 

TinyMCE Advanced

「背景色」をクリックしながら上の緑の枠に移動させると画像のように、

テキストエディタに追加されるので、これでマーカー(背景色)が快適に使えるようになります。

このように自分の普段使用するのもをテキストエディタに追加に追加し、使用しないものを外しましょう。

外し方は、「テキストエディタ」から「使用しないボタン」の方に移動させるだけで大丈夫です。

 

TinyMCE Advanced使い方

「TinyMCE Advanced」の設定お疲れ様でした。

ここからは、初期設定と「TinyMCE Advanced」の違いと

実際の記事作成中の「TinyMCE Advanced」使用方法について書いていきたいと思います。

 

初期設定の状態だと

TinyMCE Advanced

このように初期状態では、「文字のサイズマーカー(背景色)」などの変更ボタンがありません。

 

「TinyMCE Advanced」を使用すると

TinyMCE Advanced

「TinyMCE Advanced」で設定するとこのように「文字のサイズマーカー(背景色)」などのボタンが自由自在に設定できるようになります。

 

実際に使用してみる

ここでは「TinyMCE Advanced」で設定したマーカー(背景色)の使い方をご紹介したいと思います。

例といて「テキスト」と記入

TinyMCE Advanced

ここでは例として「テキスト」に背景色を使用するため「テキスト」と書いています。

「テキスト」を選択

TinyMCE Advanced

入力した「テキスト」を選択しましょう

背景色をクリック

TinyMCE Advanced

  • 「テキスト」を選択したら矢印にある「A」をの横の▼クリック
  • 「A」を▼クリックすると色を選択できるので色の選択

そうすると画像のように「テキスト」とマーカー(背景色)が使用できるかと思います。

 

TinyMCE Advanced【まとめ】

「TinyMCE Advanced」のインストール~設定使用方法は以上となります。

ブログ、記事等を1つ書くにしても、より快適に「自分の思った通りに」できると作業効率ももちろんですが、

ブログを楽しみながらでき、継続やモチベーションにもつながるかと思いますので、ぜひ自分の使いやすいようにカスタマイズしてみてください。

 

この記事を書いている人 - WRITER -
ゆる~くふわっと気になったニュース、好きな趣味なんかをブログで書いたりします。

- Comments -

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

Copyright© ゆるふわブログ , 2019 All Rights Reserved.