Press "Enter" to skip to content

WordPressで一部の文字にだけ色や下線を装飾する方法

やり方は簡単でわかりやすい!

今回ご紹介したいのは、HTML編集を使ってこういう文章を作る方法です。

はい、アスペルガーのいそっぷです。

この記事では、WordPressでブログをやられている方で、
「一部だけを太字にしたいな」
「ここだけを赤字にしたいな」
といったお悩みにお答えしていきます!

HTMLとして編集

今回触れていく装飾のやり方は、テキスト系のブロックに対して共通して使える方法です。

段落ブロックを例にして紹介していきます。

WordPress 段落をクリック

まずは段落ブロックを選択状態にしましょう。

WordPress、段落の詳細設定でHTMLとして編集をクリック

図のように、ブロックツールバーの[詳細設定]をクリックし、展開されたプルダウンメニューから[HTMLとして編集]をクリックします。

WordPressのHTML表示

上手くいけばこのような画面になります。<p>タグで囲まれた文章が現れます。これがHTMLの編集画面です。

このやり方ですと、ブロック毎にHTMLを編集することができます。違う方法では、コードエディターという表示にして行うこともできますが、そちらは正直わかりにくいです。僕はこのやり方をおすすめします。

よく使うHTMLタグ3選

  1. <b></b> 太字
  2. <font color = “”></font> 文字色
  3. <u></u> 下線

太字と下線については説明不要でしょう。
2の文字色について、少しだけ解説します。

<font color = “red”></font>とした場合、タグで囲んだ文字が赤色になります。

さらにもう1つ、色コードを使った場合を見てみましょう。
<font color = “#fa8072”></font>とした場合、タグで囲んだ文字がサーモン色になります。

色コードはほぼ無限にあるので、ググってお好きな色を探してみましょう。「HTML 色コード」と調べればいくらでも出てきます。きっと気に入る色が見つかります!

実際にHTMLをいじってみよう!

WordPressのHTML文

今回僕は、

<p><b>段落</b> <font color=”red”>通常の文章</font>は<u>こんな感じです。</u></p>

といった感じのHTML文を書いてみました。

ビジュアル編集に戻す

WordPress、段落ブロックのビジュアル編集

ツールバーの[詳細設定]をクリックし、[ビジュアル編集]をクリックします。

これで普段見ていたビジュアルエディターに戻ります。

WordPress、HTML装飾の例

すると、HTMLでタグ付けした文字に装飾が施されていることがわかるかと思います。

WordPressではこのようにして一部の文字や言葉を、太字にしたり色をつけたりすることができます。

通常のテキストでHTMLのタグ付けをする場合、先述した「よく使うHTMLタグ3選」を活用すれば事足りると思います。

終わり

いかがでしたでしょうか。
WordPressではブロック単位で色を分けたりというのは、とても簡単でわかりやすいのですが、もっと細かく色を設定したいという場合少し手間がかかります。

でも慣れてしまえば、その都度ブロック毎にHTML編集を行えば良いだけですし、そこまで高頻度に使う機能でもないかと思います。

この記事があなたのお役に立てることができれば幸いです。
それでは今回はこれにてSee you soon.

Be First to Comment

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください