【WordPress】フォントカラー(文字色)の変更で見栄えよく!【CSS】

ワードプレスの文字色を変える

サイトの見やすさにとって重要な項目のひとつのサイトのフォント。
前回まではフォントの変更方法やよくあるフォントについての疑問についてのまとめ記事を公開していましたが、今回は文字色の変更についてです。
サイト全体に使われるフォント、大きさ、表示色でそのサイトの印象もかなり変わりますし、より重要な文章やリンクは他とは違った形にしてユーザーの目を引くものにするべきです。

文章中の文字の色を変える

記事作成の際に文字の色を変える方法です。
Classic Editorをインストールしている場合はビジュアル編集モードに変更し、右上のツールバー切り替え→Aという記号を押して色を選択、で変更が可能です。

フォントカラー

またブロックエディターで作成されている方の場合は、ブロックや文字を選択、右上の歯車マーク内の「色設定」で変更可能です。
部分的な文字のみの変更は文字をドラッグ、下矢印マークの「よりリッチなテキスト制御」で変更が出来ます。

フォントカラー2

HTMLやCSSでで文字の色を変更する

記事作成をHTMLも使うるテキストモードで作成居ている場合やサイト内の文字色を変更したい場合はHTMLでの変更やCSSで変更します。
サイト全体の文字色の場合はCSSで一括で設定してしまうのが管理もしやすくなりますのでおすすめです。

まずHTMLでの変更は
<font color="red">赤</font>
<span style="color: #ff0000;">レッド</span>
上記のような形があります。CSSでn変更は段落や見出しごとに設定できます。
h2 { color:#ff0000; }
p { color:#ff0000; }

まとめ

今回はフォントの設定の中でも文字色、カラー設定についてまとめてみました。
使う色によってサイトの印象や目に留まりやすさが変わりますのでより見栄えよく、より注目されやすい色を考えて設定していきましょう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です