TinyMCE Advancedでビジュアルエディタをイイ感じにカスタマイズする方法

ヴィジュアルエディタ

どうもブログ専門の集客屋、まつです。

 

いま現在、ビジネス用のブログを作る場合、

多くの人はWordPressを使っていると思いますが、

ビジュアルエディタ(投稿画面)には多少気を使っていますか?

 

例えばこの文章ビジュアルエディタをカスタマイズすると、

こんな風に文章の魅せ方を変えることが出来ます。

 

 

と、まああまりこんな風にすると胡散臭くなるので

あまりやらないほうが良いのですが、

もし文章の中で特に大事な部分、要するに読ませたい文章がある場合、

部分的に太文字や赤文字にするなどの工夫は大切です。

 

しかし、WordPressのビジュアルエディタは

デフォルトではあまり良い機能が入っていないのが難点。

文字サイズも変えられないし、文字に背景色を付けることもできません。

 

そこで役に立つのがTinyMCE Advanced。

 

TinyMCE Advancedを使えば、

HTMLやCSSの知識が全くなくても、

超簡単にヴィジュアルエディタの編集、機能の追加をすることが出来ます。

 

文章をメインに書いていく人種にとって、

文字で表現方法を広げることは大切です。

それによって読むか読まないかが決まってしまうことすらあります。

 

もし、今後あなたが文章コンテンツを軸に集客をしていきたいなら、

ぜひこのTinyMCE Advancedを取りいれて、

独自の表現方法をマスターしてみてください。

 

TinyMCE Advancedのインストール・設定方法

それではさっそくですが、

TinyMCE Advancedのインストール・設定方法に入ります。

 

まずはプラグインの新規追加画面に入ってください。

TinyMCE Advanced1

右上の赤枠内に『TinyMCE Advanced』と入力し、エンターを押しましょう。

 

TinyMCE Advancedが出てきました。

TinyMCE Advanced2

『今すぐインストール』をクリックしてください。

 

無事、インストールされました。

TinyMCE Advanced3

『プラグインを有効化』をクリックします。

 

プラグインが有効化されたら、そのまま下にスクロールしましょう。

TinyMCE Advanced4

『TinyMCE Advanced』の設定項目をクリックしましょう。

 

こちらがTinyMCE Advancedの設定画面です。


TinyMCE Advanced7

主に使う機能を赤枠で囲んでおいたので、画像の通りに追加してみてください。

大体はこれで大まかな機能は申し分なく使えるようになります。

追加したら『変更を保存』を忘れないようにしてください。

これで設定は完了です。

 

TinyMCE Advancedでカスタマイズするとこんな機能が使える!

ではでは、つぎは

カスタマイズしたヴィジュアルエディタを使うとどうなるか?

というのを検証してみましょう。

 

まずは文字色から。これは僕もものすごく使います。

特に赤文字は、強調するのに最適なので絶対に使いこなせるようになって欲しい。

フォントカラー

上の赤枠が文字色です。フォントカラーとも言います。

 

実際に表示してみるとこんな感じ。

文字色

まあ、とにかく色々なパターンが使えます。

上記で載せた色はほんの一部なので、自分でブログのテーマに合った色を

探してみるのもいいかもです。

※テーマによって若干色合いが異なる場合がありますので、その点だけご注意を。

 

そして次は『文字の背景色』です。

フォントの背景色

この『A』の背景に色が付いているのがそうです。

ここをクリックすると、好きな色を文字の後ろに表示することが出来ます。

font-color

実際みるとこんな感じ。

僕はたまーですが、黄色の背景を使います。

でも、使い過ぎるとうさん臭くなるので、ここぞという時に使った方が良い気がします。

 

さて、お次は『フォントサイズ』です。

これは文字通り、文字のサイズを変更する機能です。

フォントサイズ

赤枠をクリックするとフォントサイズ一覧が出てきて、

好きなサイズを選ぶことが出来ます。実際に使うとこんな感じです。

fontsize

こんな風に超ドでかいサイズまで設定することが出来ます。

まあ、今はスマホが主流で、あんまりデカいと表示できないから使わないんだけど。笑

もしランディングページとかも作っていきたいなら、

24ptくらいのサイズまでは頻繁に使うと思います。

 

次は『箇条書き(リスト無)』『箇条書き(リスト有)』です。

箇条書き

 

箇条書き(数字)

 

実際に表示するとこんな感じです。

list

これはたぶん、テーマによって違うと思うので、

各々確認が必要ですね。とりあえずハミングだとこの表示です。

 

では次は『集中執筆モード』です。

これは、文字通り集中して執筆するために

管理画面から両サイドの項目を消し去る機能です。

集中執筆モード

集中執筆モードをクリックすると、、、

 

超シンプルな投稿画面だけが表示されました。

集中執筆モード画面

コレを使うことで、集中力が途切れることなく、

執筆作業を進めることができます。 僕コレ、良く使ってます。

 

そして次は引用です。意味は文字通り引用であることを

検索エンジンに知らせてくれます。

引用

設定すると、、、

 

こんな風に、引用であることを示してくれます。

引用基本的に他人のコンテンツを使う時は、引用タグを付けるのが基本なので、

他人のコンテンツを借りるのが多い場合は、必ず取り入れておきましょう。

 

そして最後は『テーブル』です。

これは文字通り、Wordやエクセルのようなテーブル機能を付けることが出来ます。

テーブル

では、実際にセルを入れてみましょう。

 

こんな感じになります。

table

ちょっと味気ないセルですが、

たぶんこれはCSSをいじらないと何ともならないので、

スキルのない僕じゃ無理っぽいですね。笑

 

 

とまあ、TinyMCEAdvancedを使えば、

こんな感じの機能が付けられるので、初期設定に必須のプラグインだと思って

取り入れてみてください。

 

まとめ

さて、いかがでしたでしょうか。

WordPressってちょっと難しいイメージもあると思いますが、

1つ1つじっくりひも解いていけば、じつは簡単な機能なばかりです。

(最初何もわからないうちは、ノートに書きながら一つ一つ覚えてました。ようやったなぁ)

 

使いこなせば使いこなすほど味が出てくるので、

とりあえず今回は僕がご紹介機能を使いつつ、

どんどん独自開発してオリジナルのWordPressを作っていってください。

 

それではこの辺で。

最後までお読みいただき、ありがとうございました。

ヴィジュアルエディタ

メルマガバナー

コメントを残す

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

ABOUTこの記事をかいた人

大島 松二郎

ブログ専門の集客屋:まつ。 1985年10月31日生まれ 福島県出身(現在 東京在住)。 ブログ著者、ブログ集客コンサルタント、WEBプロデューサー、セミナー講師。 《ブログ著者として》 会社倒産をきっかけにWEBの世界に足を踏み入れる。その後、タイピングすら出来ない全くの初心者から突然、 ブログ集客の専門家としての活動を始め、 自身で立ち上げた公式ブログでは、 半年間で一万PVを越え、特定のキーワードで、 検索エンジン一位、二位、四位を獲得。 『どんなブログ初心者でも 実践できるわかりやすいノウハウ』 をモットーに、手順書付きで解説された記事は、 初心者のみならずWEBの専門家からも高い評価を得ている。