こんにちは。山ばりゅです。
今回はWordPress5.0以上のバージョンでフォントサイズと文字色(フォントカラー)を同時にサクサクサクサクっと変更する方法についてご紹介したいと思います。
やり方も超簡単で難しいところもなく、フォントサイズと文字色の変更がバッチリ同時にできるようになるかと思いますので、是非ぜひ今回も最後までお付き合いいただけましたらと思います。
超簡単!WordPress5.0以上でhtmlタグを使って文字の大きさを簡単に変更する方法
やはりブログやサイトを運営していると、その記事や内容によっては通常よりも読者の方に強調して伝えたいことってありますよね。
その方法としては、
- フォントカラーを変える
- フォントに背景色を設定する
- フォントカラーを変更する
というものがWordPressのツールバーのアイコンでも用意されておりますので、こちらを使えば、ある程度読者の方に強く伝えたいという思いを伝えることができます。
ただ、通常の場合であれば問題ないのですが、MAXに強調したいという時、どうしてもパンチが弱くなってしまいがち。
WordPressでは以前のバージョンまでは、ツールバーのアイコンを使えば簡単にフォントサイズの変更ができていたんですが、5.0にバージョンアップされてから、フォントカラーと背景色はアイコンが実装されているものの、フォントサイズの変更をアイコンが無くなってしまい、ビジュアルエディターで、気軽に文字を大きくしたり小さくしたりすることができなくなりました。
無くなっちゃったものは仕方ないですが、もしかすると、今後現在実装されている、フォントカラーの変更アイコンなども無くなってしまうかもしれません。でも、HTMLのタグで変更する方法を知っておくと、いざという時困らないですよね。しかも超簡単にフォントサイズや文字色を変更することができます。
タグって聞くとなんか取っ付きにくいイメージがありますが、フォントサイズを変更するためのタグの設定は全然難しくないんですよ。
では、ご説明ご紹介していきましょう。
フォントサイズとフォントカラーを変更するためのHTMLタグコード
まず、WordPress5.0以上のバージョンであれば、デフォルト画面が記事作成画面がビジュアルエディターになっているので、これをテキストエディターにに変更します。
記事編集画面の右上にある「・」が縦に3つ並んだアイコンをクリックします。
するとこのようにエディターがビジュアルエディターにチェックが入っておりますので、これをコードエディターに変更します。
記事編集画面がコードエディターに変わったかと思います。
これで、タグの直接入力が可能になりましたので、フォントサイズ(文字サイズ)を変更するためのタグを入力していきます。
フォントサイズと文字色を同時に変更するためのタグは
<font size="〇" color="#△△△△">フォントサイズと文字色を変更したい文字列</font>
となり、「〇」のところに1~7の半角数字を入力、「△」のところには文字コードを入力します。
では試しに「文字サイズ7、文字色赤」という文字列を、
- フォントサイズ7
- フォントカラー赤
に変更したいと思います。
<font size="7" color="#ff000">文字サイズ7、文字色赤</font>
このようにタグと文字列を入力します。では、ビジュアルエディターに切り替えて、大きさを比較してみると・・・
文字サイズ7、文字色赤
とこんな感じになります。最大値である「7」はちょっとやり過ぎ感があるような気もしないでもないですが、何かをマックスで強調表現したい時には、これだけインパクトがあると、読者の方にもよく伝わりますよね。
カラーコードについては、こちらのサイトで詳しくご紹介して下さっているので、是非ご覧になってみて下さい。
ちなみにコードエディタでも、ビジュアルエディターと同じく、改行(Enter)キーを押せば、改行が反映されますので、
- </br>
- <p>
- <a>
などといったタグ入力は特に必要ありません。(もちろんあってもオッケー)
また、文字サイズや文字色それぞれを単体で変更したいということであれば、先ほどのタグの「size(大きさ)」、「color(文字色)」のみを入力すれば反映されます。例えば、文字サイズはそのままで文字色のみを変更したいということであれば、
font color="#△△△△△△">変更したい文字</font>
という感じですね。
文字サイズのタグ入力が終われば、またビジュアルエディターに変更すれば、いつも通りの記事作成が可能です。
ぜひ良ければご活用ください。
最後に
いかがだったでしょう。今回は、WordPress5.0以上でフォントサイズと文字色を変更するためのタグコードをご紹介させていただきました。
そんなに難しいタグではないんで、是非ゼヒご活用いただければと思います。今回の記事が、あなたの記事のクオリティアップのお役に立てれば幸いです。
あ、そうそう。
反映させる文字列を除いて、タグの入力は全て半角英数字で入力してくださいね。あと、スペルや記号などを間違えると、タグの設定が反映されませんので、そのあたりだけご注意いただければと思います。
では、今回も最後までお付き合いいただき、ありがとうございます。