Press "Enter" to skip to content

WordPressの色設定について

文章にメリハリをつける大事な要素

はい、いそっぷです。

今回はWordPressの投稿及び固定ページにおいて大事な要素、「色設定」について書きたいと思います。

シンプルな機能なので長くはならないと思います。

色設定とは何か

段落ブロックに書いた文章の背景色や文字色を変える機能です。
通常は背景はテーマの背景色で文字色は黒ですね。
これを変えることができます。

このように。

長い文章ではメリハリをつけないと読むのがダルくなってしまいますので、色設定は重要なポイントだと思われます。
なお、色設定はテーマを変えるとやり直す必要がある点に注意。

色設定のやり方

色設定の項目はブロックパネルにあります。

WordPressの色設定の場所
WordPressの色設定は文字と背景に付けられます

色設定はText Color(文字色)とBackground Color(背景色)の2つが用意されています。

文字色は「色設定」で変えることができますが、それは段落ごとに変えることになります。
つまり、段落内の全ての文字が変わってしまいます。

これを避けて、ある特定の文字にだけ色をつける方法もあります。今回はこれを紹介して終わろうと思います。

こちらの記事のほうがわかりやすいです。

コードエディター

皆さんがお使いのブロックエディターはデフォルトで「ビジュアルエディター」になっています。

WordPressのビジュアルエディター

このような画面ですね。投稿結果を意識したデザインのエディターです。

コードエディターにするには、

WordPressのコードエディターの場所

画面右上にある3点リーダーのボタンをクリックして、[コードエディター]をクリックします。

これでHTMLに詳しくない方にとって、訳わからない画面になります。

WordPressのコードエディター

こんなコードばかりの画面になるでしょう。
いかにビジュアルエディターが優れたものか理解できそうですね。昔のブログといったらこんな感じでしたから。

さて、文字色の設定の話に戻りましょう。

文字に色をつける

特定の文字に色をつけるにはHTMLで指定する必要があります。

<font color=”色コード”>文字</font>

fontというHTMLタグを用います。


WordPressのビジュアルエディター上で文字を選択

一例として、画像にあるように「文章」という文字だけを赤色にしたいと思います。

WordPressのコードエディターで該当する文字を選択

コードエディターで該当する場所を見つけ出します。(意外と難しいです)

WordPressのコードエディターで<font>タグを挿入する

色を変えたい所だけを先程紹介した<font>タグで囲みます。

今回は色コードに「red」を使いましたが、他にも「HTML 色」と検索すればたくさんの色コードを見つけることができますので、お試しあれ。

WordPressで特定の文字にだけ色をつける

無事に一部の文字だけに色をつけることができました。

終わり

途中横道にそれてコードエディターのことまで書いてしまいましたが、どうでしたでしょうか。

ブログの記事は長くなれば長くなるほど、読むのに集中力が必要になってしまいます。そこで、背景に色をつけたり、画像を差し込んだりと、色々手間をかけなくてはいけないのです。

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

Be First to Comment

コメントを残す

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