• ランディングページ
    初心者がたった1時間でプロ並みのキャッチコピーを手に入れる方法
  • ランディングページ(LP)の作り方と構成について ブログ運営
    ランディングページ(LP)の作り方・構成!重要な7つの要素とデザイン
  • SEO
    ブログのPVを3日間で1.5倍上げる方法
  • ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか? ブログ運営
    ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか?
  • 無料オプトインアフィリエイトの始め方!初心者にオススメな案件とASP ブログ運営
    オプトインアフィリエイトの始め方!初心者にオススメな案件とASP
  • 私が実際に使っている便利な無料ツールと書いてあるイラスト お得情報
    便利な無料ツール!私が実際に使っている3選
  • アドセンス以外の広告で稼ぐには ブログ運営
    アドセンス以外の広告で稼ぐ!おすすめクリック広告をご紹介
  • 便利ツール
    検索順位チェックツール!変動や推移まで保存出来るオススメツールをご紹介
  • WordPress
    初めてのブログの作り方!初心者が最低限抑えておきたいこと
  • ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる ブログ運営
    ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる!

ブログを運営する上で絶対に導入しておきたいおすすめプラグインでも紹介した「TinyMCE Advanced」

wordPressプラグインのおすすめ!ブログ運営で絶対に導入しておきたい14選
2018.4.25
wordPress(以下ワードプレス)でブログを作成するにあたって、絶対に導入しておきたいおすすめのプラグインの一覧をご紹介したいと思います。 プラグインは、とっても簡単に様々な機能を追加できるとっても、便利なものです。 しかし、プラグインを導入しすぎるとサイトが重くなってしまったり、相性の悪いプラ...

今回は、そのTinyMCE Advancedの使い方をご紹介します。

TinyMCE Advancedは、記事作成の時に毎回HTMLなどの入力をしなくてもよくなるプラグインで、記事作成がとっても楽になります。

今回は、このプラグインの使い方や設定方法を詳しく説明していきます。

TinyMCE Advancedはどんなプラグイン?

ボタン1つで文字の大きさを変えたり文字の背景に色をつけたりが出来るプラグイン

WordPressの初期設定のままだと、文字の色は変えられるけど文字の背景の色は変えられなかったり、文字の大きさも変えられませんでした。

※厳密にいえば、HTMLを直接打ち込めば可能だけどブログを始めたばかりの初心者には、結構大変。私も実際に、ここは苦労しました。

しかし、このプラグインがあるとボタン1つで文字の大きさを変えたり、文字の背景の色を変えたり出来るので、ブログを始めたばかりの頃は重宝してました。

記事作成画面がこんな感じになります。

よくある無料ブログなどの記事作成画面と似てるからHTMLとかCSSの知識がない人でも、記事作成を簡単にオシャレにできちゃいます!私もこのプラグインを知るまでは、HTMLなどをネットで調べて毎回、記入してました。

でも初心者には本当に大変な作業で色を付けるのを途中でやめたくらいです苦笑。

でも、やっぱりせっかく書いた記事。オシャレに読みやすく見せたいですよね?それを叶えてくれたのがこのプラグインでした。

TinyMCE Advancedを利用するまでの流れ

TinyMCE Advancedの利用までの流れ


  1. 「TinyMCE Advanced」をインストール
  2. 「TinyMCE Advanced」の基本設定

この2つを完了すれば、記事作成がサクサクと作れるようになります!では、その手順をご案内していきます。

1.「TinyMCE Advanced」をインストール

では、早速ですがTinyMCE Advancedの設定方法です。まず、「TinyMCE Advanced」のプラグインをいつもの手順でインストールしてください。

「TinyMCE Advanced」を検索してインストールすればOKです。

※プラグインのインストールの手順が分からない方はこちら。

WordPressのプラグインのインストール方法

インストールしたら、有効化をしてください。

WordPressプラグインのインストール方法!
2018.4.1
基本的な操作方法としてWordpressのプラグインのインストール方法と有効化の方法をお伝えします。 方法はとっても簡単です。 1.インストールしたいプラグインの名前を検索 まず、ワードプレスの管理画面の左側のメニューの「プラグイン」という項目をクリックしてください。 クリックすると今入ってるプラグ...

2.「TinyMCE Advanced」の基本設定

まずは、最初に初期設定をしていきます。

「TinyMCE Advanced」をインストールし、有効化が終わるとWordpressの管理画面の左側メニューの中の【設定】の中に「TinyMCE Advanced」が入ってます。そこをクリックしてください。

wp-tm1


クリックすると、設定画面に変わります。下の「Unused Buttons」の中にあるボタンをクリックして、そのクリックを離さずそのまま上の白いところまで持っていってください。そして、好きな場所に持ってきたらクリックを離してください。

これを繰り返して自分の使いたいボタンを全部、上に持っていきます。


この画面の上の白い部分に移動したものが、記事作成をする時の実際の記事作成画面に表示される形になりますので、自分の使いやすいように配置してください。

使いたいボタンを上に全部、移動したら右上にある、【Save Changes】のボタンを押して設定を忘れず保存してくださいね!

参考程度に

必要ないかもしれませんが、一応私が設置した例を載せておきます。

これは、ほぼ全部のボタンを追加してますが、見出し、文字の色、文字の背景の色、リンク、引用、テーブル、リストくらいしか私は使ってません。

あまり多く追加すると、ごちゃごちゃして反対に使いにくいので、自分で不要だと思ったものは表示させないほうがいいかも。

では、次に各ボタンの機能について説明していきます。

【スポンサーリンク】

ボタンの種類と機能

色々なボタンがありますね。私がよく使うボタンやメインのボタンの機能について少し説明していきます。

TinyMCE Advancedボタン一覧
設定画面での表示 投稿画面での表示 そのボタンで出来る機能
tm-bs (1) tm-b (14) フォント(文字)の大きさを変更
tm-bs (17) tm-b (12) 見出しを設定する
tm-bs (2) tm-b (1) 文字の色を変える
tm-bs (3) tm-b (2) 文字の背景の色を変える
tm-bs (4) tm-b (3) 文字を太くする
tm-bs (5) tm-b (4) 文字を斜めに表示する
tm-bs (6) tm-b (5) 文字の下に線を付ける
tm-bs (7) tm-b (6) 他サイトなどから引用した文に付ける
tm-bs (8)
tm-bs (9)
tm-b (7)
tm-b (8)
箇条書きにする
・や番号で使い分け可
tm-bs (10)
tm-bs (11)
tm-bs (12)
tm-b (18)
tm-b (19)
tm-b (20)
文字や挿入した画像の位置
左寄せ・中央・右寄せから選択可
tm-bs (13)
tm-bs (14)
WS000011
WS000012
リンクの挿入や取り消し
tm-bs (16) tm-b (17) アンカー設定
tm-bs (15) tm-b (10) 記事内にテーブルを挿入

「TinyMCE Advanced」の使い方

初期設定が、終わったと思うので次に使い方について説明していきます。記事作成画面を見てみると、さっき設定したボタンがずらーと出ていると思います。


もし、さっき設定したボタンが出てない場合は、記事作成画面のタイトルを設定する場所の右下あたりに、ビジュアルとテキストを切り替えるボタンがあるので、そこでビジュアルをクリックしてください。

下記のようなボタンです。


ビジュアルの画面に切り替えても、ボタンが全部出てないようなら、ボタンが並んでいる1番右のボタンを押してください。こんなようなボタンです。

WS000023


ここを押すと恐らく出てくるはずです。

もし、自分が設定したボタンが出てこないようだったら、先ほどの初期設定で保存がしっかり出来てなかったと思うのでまた初期設定に戻ってやり直ししてしっかり保存してみてください。


無事、自分の設定したボタンが画面に表示されましたら実際にこのボタンを使って記事を書いてみましょう。使い方としてはとても簡単です。私がよく使う機能別に使い方を記載しておきます。

1.文字を大きくする

1-1.大きくしたい文字を選択

大きくしたい文字を選択してください。 (マウスでクリックしながら横に移動して文字の色が変わってれば選択されてます。)

wp-tm7

1-2.文字を大きくするボタンを押す

文字を大きくする時に使うボタンは下記です。

tm-b (14)

このボタンを押すと下記のようにサイズが表示されます。

wp-tm8

1-3.希望するサイズのところをクリック

サイズの目安としてはこんなかんじ

8のサイズ
10のサイズ
12のサイズ
14のサイズ
18のサイズ
24のサイズ
36のサイズ

このようにサイズが変わっていきます。記事全体や見出しのサイズとのバランスを見て変えていきましょう。

2.文字の色を変える

2-1.色を変えたい文字を選択

色を変えたい文字を選択してください。 (マウスでクリックしながら横に移動して文字の色が変わってれば選択されてます。)

wp-tm7

2-2.文字の色を変えるボタンを押す

文字の色を変える時に使うボタンは下記です。

tm-b (1)

このボタンの  の横にあるを押してください。そうしますと、そこから色が選べます。

tm (2)

2-3.希望する色のところをクリック

以上で文字に色が付きます。

3.文字の背景に色を付ける

3-1.背景に色を付けたい文字を選択

背景に色を付けたい文字を選択してください。 (マウスでクリックしながら横に移動して文字の色が変わってれば選択されてます。)

wp-tm7

3-2.文字の背景に色を付けるボタンを押す

文字の背景に色を付けるボタンは下記です。

tm-b (2)

このボタンの  の横にあるを押してください。そうしますと、そこから色が選べます。

tm (1)

3-3.希望する色のところをクリック

以上で文字に背景色が付きます。

4.見出しの付け方

4-1.見出しを設定したい文字を選択

見出しを設定したい文字を選択してください。 (マウスでクリックしながら横に移動して文字の色が変わってれば選択されてます。)

wp-tm7

4-2.見出しを設定するボタンを押す

見出しを設定する時に使うボタンは下記です。

tm-b (12)

このボタンを押すとこのように見出しの種類が展開されます。

WS000014

4-3.希望する見出しのところをクリック

以上で見出しを設定できます。

SEO対策:見出しの重要性と見出し1~6の使い分けマスターの1~6の役割について別記事で詳しく説明してます。もし、見出しの使い方など分からない場合は読んでみてください。

TinyMCE Advancedの使い方はとても簡単

「TinyMCE Advanced」の使い方をご紹介してきましたが、とっても簡単なので、すぐに使いこなせちゃいますよね。

CSSとかの知識が少しずつ増えてくると、オリジナルのカスタマイズをどんどんしたくなりますが、最初からそこに時間をかけているといつまで経っても記事が書けないので、まずはこういった便利なプラグインを使って、記事作成に慣れていく事が大切だと思います。

実際に、私がこのプラグインを知るまでは、記事作成に一苦労で、これじゃ続かない・・と思ったくらいですからね。苦笑

【スポンサーリンク】
関連キーワード
  • wordPressプラグインのおすすめ!ブログ運営で絶対に導入しておきたい14選
  • 「TinyMCE Advanced」の使い方!HTML不要で記事作成が楽に
  • Edit Author Slugの設定方法!ユーザー名を非表示可能なWordPressプラグイン
  • WordPress popular postsの使い方!人気記事を表示!日本語化の方法もあり
  • 【WordPressバックアップ】BackWPupのロリポップ設定方法
  • WordPress Related Posts‐関連記事表示プラグインの使い方、カスタマイズ方法
ついに浮気しちゃいました!

ついに、浮気をしてしまいました・・・そう、ワードプレスのテーマです。

これまで、有料のテーマは何個も購入してますが、この便利屋のブログはCSSの記事とかの変更が面倒なので、なるべくテーマの変更を控えてましたが、一目ぼれをしてしまい衝動を抑えられず、ついに変更に踏み切りました。

見てもらいたい記事をスライダーで表示させることが出来たり、CSSが分からない人でも「入力補助」の機能を使って記事作成画面で、簡単にボタンの作成とかランキングの作成、会話の吹き出しの作成などが出来るので、マジで楽!

これまで、CSSやらいじってカスタマイズをしてきましたが、それがこのテーマには最初から入っているので、驚き。1年半前に出会っていれば、もっと記事に時間がかけられて、収益も上がってたのかな。。と思いつつ苦笑。

とりあえず、ブログを始めたばかりの人にとっても始めて1年以上経ってる私のような人にとっても、このテーマは欲しかった機能が揃ってる!という感じでした。まー私の説明よりも公式ページでその魅力を確認してみてください。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事