エディタをカスタムするTinyMCE Advancedの導入方法と設定、使い方!

TinyMCE Advancedの導入方法と設定、使い方!

 

ワードプレスで記事を作成する時に使うのがエディタ画面(記事作成画面)ですが、お世辞にも正直ちょっと使いやすいとは言えません。

せっかく記事を作るわけですから、効率的に記事を書いてゆくためにも、使いやすいエディタ画面で表現力豊かに記事を作ってゆくべきですよね。

そこで、ワードプレスのビジュアルエディタ画面を拡張し、使いやすくかつ効率的に記事を執筆することの出来る「TinyMCE Advanced」を導入しましょう。

 

目次

まずはプラグイン Classic Editor をインストールしよう!

 

ワードプレス5からブロックエディタが標準設定されることになったので、記事を書く画面(エディタ画面)が大きく変わりました。

動画を始め本記事でも説明する表示と合わせるために、ビジュアルエディタに変更します。

ワードプレスのブロックエディタをビジュアルエディタに変更するには、プラグイン「Classic Editor」をインストールします。

以下でインストール方法をご案内します。

設定などは必要なくインストールして有効化するだけなので、とても簡単です。

↑クリックで拡大

 

プラグインの新規追加画面で、「Classic editor 」を入力して検索します。

検索されてきた「Classic editor」の「今すぐインストール」ボタンを押して、ボタンが「有効化」になるのを待ちます。

↑クリックで拡大

 

プラグインのインストールが完了し、ボタンが「有効化」に変化したら、「有効化」ボタンをクリックします。

↑クリックで拡大

 

プラグインの一覧表示で、Classic edhitorが表示されていればOKです。

これで、あなたの記事を書く画面(エディタ画面)の表示がブロックエディタからクラシック表示に変わるはずです。

 

 

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」を入力。

 

TinyMCE Advancedの導入方法と設定、使い方!

 

 

入力する文字列はこちら。

TinyMCE Advanced   ←コピー&ペーストしてお使いください。

 

 

検索されて表示された「TinyMCE Advanced」をインストールし、有効化します。

TinyMCE Advancedの導入方法と設定、使い方!

 

インストールし、有効化が完了すると、プラグイン一覧画面に自動的に遷移します。

「TinyMCE Advanced」の列を見つけ出し、「設定項目」リンクをクリックします。

TinyMCE Advancedの導入方法と設定、使い方!

 

エディタの設定画面に遷移します。

 

TinyMCE Advancedの導入方法と設定、使い方!

 

動画の2:59あたりからご覧いただくと、分かりやすいと思います。

私も使っているオススメのメニュー配置もご説明しています。

メニュー項目の移動や配置変更はドラッグ&ドロップで出来ます。

 

設定が完了すれば、右上にある「変更を保存」ボタンをクリックして保存してください。

 

 

「TinyMCE Advanced」の使い方

 

「TinyMCE Advanced」によってエディタの画面のメニューボタン配列を変更することが出来ました。

文字や文字列を装飾する場合は、選択した状態で各機能のメニューボタンを押せば、その効果が適用されます。

 

TinyMCE Advancedの導入方法と設定、使い方!

 

各効果は複合した形で与えることも可能です。

例えば、文字色を赤色に変更して、さらに太字(B)にして、文字の大きさを18に変更する・・などが可能です。

メニュー上の左矢印ボタンで一つ前に戻る(アンドゥ)、右矢印ボタンで一つ前に進む(リドゥ)、事が出来るので、操作を間違えても心配はいりません。

焦らず確実に文字列に機能や効果を与えて、読みやすいブログの文面にしてゆきましょう。

 

 

 

まとめ

 

「TinyMCE Advanced」はワードプレスのビジュアルエディタを拡張するプラグインでしたね。

ビジュアルエディタのメニューボタンへのアクセスがしやすくなり、ライティング(記事を書く)を行う際の効率化に役立ちます。

ライティングに慣れてくれば、ボタン配置などもあなた流にしてより効率的なライティングが出来るようにしてゆきましょう

 

 




【"miura"のプチプロフィール】

miuraの画像


2018年夏、長いサラリーマン生活から独立、起業。自由をゲットしました。

人生は一度きり行きたい時に行きたい場所に行き、やりたいことをやる。
時間と経済的な自由を得て、自分に嘘をつかないスマートライフを送っています。

好き:乗り物、しいたけ、モフモフ猫さん、レッサーパンダ

嫌い:パクチー、夢のない仕事、カロリー

サラリーマンとしていくら頑張っても、結局は人からの評価で物事が決まり、たった一度の人生であるにも関わらず「住むところも、稼ぐ額も、自由になる時間も自分自身が決める事が出来ない」、という不自由に嫌気がさしたのがインターネットビジネスを始めたきっかけ。

【実績】
2017年2月:副業としてネットビジネス開始
2017年8月:副業で月収70万円達成(ブログ)
2018年1月:自身で1記事も書かずに月収60万円達成(ブログ)
2018年7月:念願の独立(自分自身の働き方改革)


“正しく行動すれば目指す結果に到達出来、未来をあなたが望む自由な人生に変えてゆく事が出来る事“を発信しています。


⇒何その話?、ちょっと気になるって方はこちら





【今ならフルセット教材を無料プレゼント中!】

10万円ナビゲーション登録

え?どういう事?詳しく確認するにはここをクリック!




いつもありがとう、よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次