この記事では、WordPressで文字色を変更するプラグイン「TinyMCE Advanced」の、使い方について解説していきます。
あなたは、WordPressでブログ作成しているときに、
と、考えたことはありませんか?
文字が全て同じ色よりも、黒・赤・太字など様々な文字装飾が入っている方が、見やすくなりますので気になるところですよね。
これ結論からお伝えしますと、
- WordPressで文字色やフォントサイズを変更する、プラグインのおすすめは「TinyMCE Advanced(タイニー・エムシーイー・アドヴァンスト)」です。
そして、この「TinyMCE Advanced」の使い方はコチラの8ステップとなっています。
使い方の手順
- 「プラグイン」→「新規追加」をクリックする
- 「TinyMCE Advanced」で検索して「今すぐインストール」をクリックする
- プラグインの「有効化」をクリックする
- 「設定」→「TinyMCE Advanced」をクリックする
- 「Classic Editor (TinyMCE)」をクリックする
- 「テキスト色」「背景色」「フォントサイズ」を追加する
- 右上にある「変更を保存」をクリックする
- 「投稿」→「新規追加」をクリックする
- 「テキスト」→「文字色」などの追加した文字装飾をクリックする
それでは詳しく見ていきましょう。
目次
サブスク自動集客ツール
「売り上げが伸びない…。」など、集客ができずに悩んでいませんか?
ツールをポチッとするだけでほったらかしで集客できてしまうツール。
月間7,500万人以上が利用しているアメブロからあなたのブログへ、自動で集客する方法に興味がある方におすすめです。
WordPressで文字色を変更する「TinyMCE Advanced」の使い方!
WordPressで文字色を変更する「TinyMCE Advanced」の使い方はコチラでしたね。
使い方の手順
- 「プラグイン」→「新規追加」をクリックする
- 「TinyMCE Advanced」で検索して「今すぐインストール」をクリックする
- プラグインの「有効化」をクリックする
- 「設定」→「TinyMCE Advanced」をクリックする
- 「Classic Editor (TinyMCE)」をクリックする
- 「テキスト色」「背景色」「フォントサイズ」を追加する
- 右上にある「変更を保存」をクリックする
- 「投稿」→「新規追加」をクリックする
- 「テキスト」→「文字色」などの追加した文字装飾をクリックする
それでは1つ1つ見ていきましょう。
step
1「プラグイン」→「新規追加」をクリックする
まずは、WordPressの左メニューにある、
- 「プラグイン」
- 「新規追加」
と、この順番でクリックして進めていきましょう。
step
2「TinyMCE Advanced」で検索して「今すぐインストール」をクリックする
するとプラグイン追加の画面になりますので、
- 「TinyMCE Advanced」を入力して検索
- 「今すぐインストール」をクリック
と、この手順で進めていきましょう。
step
3プラグインの「有効化」をクリックする
インストールが完了になったら、プラグインのボタンが「有効化」に変わるので、この「有効化」をクリックしましょう。
step
4「設定」→「TinyMCE Advanced」をクリックする
プラグインの有効化を行ったら、WordPressの左メニューにあります、
- 「設定」
- 「TinyMCE Advanced」
と、この順番でクリックして進めましょう。
step
5「Classic Editor (TinyMCE)」をクリックする
すると、「エディター設定」画面が開きますので、「Classic Editor (TinyMCE)」をクリックしましょう。
step
6「テキスト色」「背景色」「フォントサイズ」を追加する
すると、記事作成画面に文字色などのアイコンを追加出来る画面が開きます。
ここでは、
- 「テキスト色」
- 「背景色」
- 「フォントサイズ」
と、こちらのアイコンを上に追加をしましょう。
「テキスト色」「背景色」「フォントサイズ」のアイコンは、上記画像の位置ではなく、「使用しないボタン」の中の別の場所にありますので注意されてください。
step
7右上にある「変更を保存」をクリックする
すると、上記画像のように、アイコンが追加されますので、追加されたら右上にあります「変更を保存」ボタンをクリックしましょう。
step
8「投稿」→「新規追加」をクリックする
次は、記事作成画面を開くため、
- 「投稿」
- 「新規追加」
と、この順番でクリックしましょう。
step
9「テキスト」→「文字色」などの追加した文字装飾をクリックする
WordPressの記事作成画面が開きましたら、とりあえず何かしらの文章を入力してください。
そして、入力した文章をドラッグ選択して、それぞれのアイコンをクリックしましょう。
テキスト色(文字色)の使い方!
- 文章をドラッグする
- テキスト色アイコンの右にある「▼」をクリックする
- 変更したい色を選択する
背景色の使い方!
- 文章をドラッグする
- 背景色アイコンの右にある「▼」をクリックする
- 変更したい色を選択する
フォントサイズの使い方!
- 文章をドラッグする
- フォントサイズの項目をクリックする
- 変更したいフォントサイズを選択する
あとは、記事を公開して下記画像のように、文字色やフォントサイズが反映されていれば完了です。
「TinyMCE Advanced」が反映されない時の対処法!
文字色を変更する、「TinyMCE Advanced」が反映されない時の対処法はコチラです。
- 「設定」→「TinyMCE Advanced」をクリックする
- 「エディターメニューを有効化する」にチェックを入れる
- 右上にある「変更を保存」をクリックする
それでは1つ1つ見ていきましょう。
step
1「設定」→「TinyMCE Advanced」をクリックする
プラグインの有効化を行ったら、WordPressの左メニューにあります、
- 「設定」
- 「TinyMCE Advanced」
と、この順番でクリックして進めましょう。
step
2「エディターメニューを有効化する」にチェックを入れる
「エディター設定」の画面が開いたら、下記画像の赤枠部分にあります、「エディターメニューを有効化する」にチェックを入れましょう。
「エディターメニューを有効化する」にチェックが入っていないと、反映されないため注意されてください。
step
3右上にある「変更を保存」をクリックする
「エディターメニューを有効化する」にチェックを入れたら、右上にあります「変更を保存」をクリックしたら完了です。
【コピペOK!】プラグインなしで「文字色・背景色・フォントサイズ」を変更する方法!
プラグインの「TinyMCE Advanced」を使わずに、「文字色・背景色・フォントサイズ」を変更する方法はコチラになります。
「色」・「サイズ」の変更方法
- 「投稿」→「新規追加」をクリックする
- 「テキスト」をクリックする
- 変更したいソースをコピーする
- WordPressの記事へとソースを貼り付ける
それでは1つ1つ見ていきましょう。
step
1「投稿」→「新規追加」をクリックする
次は、記事作成画面を開くため、
- 「投稿」
- 「新規追加」
と、この順番でクリックしましょう。
step
2「テキスト」をクリックする
WordPressの記事作成画面が開いたら、右上の「テキスト」をクリックしましょう。
step
3変更したいソースをコピーする
「テキスト」をクリックしたら、下記のソースをコピーしましょう。
テキスト色(文字色)のソース
<span style="color: #ff0000;">ああああ</span>
背景色のソース
<span style="background-color: #ffff99;">ああああ</span>
フォントサイズのソース
<span style="font-size: 18pt;">ああああ</span>
ちなみにですが、上記のソースにあります文字色ですが、
- 青文字を変更:「色」が変わります。
- 緑の数字を変更:「フォントサイズ」が変わります。
- 赤文字を変更:「文章」が変わります。
と、このように「色・フォントサイズ・文章の内容」を変更することが出来ます。
ちなみにですが、文字色を変更する方法や他の色のコードに関しましては、「見出しの色を変更する方法とは?」こちらで詳しく解説していますので参考にされてください。
step
4WordPressの記事へとソースを貼り付ける
あとは、コピーした上記のHTMLソースを、WordPressの記事へと貼り付けたら完了です。
WordPressで文字色を変更するプラグインの使い方9ステップのまとめ
まとめますと、
使い方の手順
- 「プラグイン」→「新規追加」をクリックする
- 「TinyMCE Advanced」で検索して「今すぐインストール」をクリックする
- プラグインの「有効化」をクリックする
- 「設定」→「TinyMCE Advanced」をクリックする
- 「Classic Editor (TinyMCE)」をクリックする
- 「テキスト色」「背景色」「フォントサイズ」を追加する
- 右上にある「変更を保存」をクリックする
- 「投稿」→「新規追加」をクリックする
- 「テキスト」→「文字色」などの追加した文字装飾をクリックする
以上が、WordPressで文字色を変更するプラグインの使い方9ステップについてでした。
是非、意識してチャレンジしてみてください。