かずぽんノート

管理人のかずぽんがお役立ち情報を発信するブログです。

*

ワードプレス初心者が教えるフォントの色々な装飾方法!

   

パソコンをする女性

前回は、特定の文字のフォントサイズを変更する方法について記事にしました。

これだけで、ブログのイメージが良くなり自分なりに満足はしているのですが、いろいろなブログを見ていると要所要所で文字の色を変えたり、重要な部分や訴求したいところに蛍光マーカーのような文字の装飾をすることで、さらに見やすくなるし、文章も分かりやすくなると思います。

もちろん、読み手が目を痛くするような派手な装飾なんかはしてはいけませんが、バランスよくユーザービリティを高めるためにも、ある程度のフォントの装飾は必要であると感じますので、今回はフォントの色々な装飾方法についてまとめてみました。

フォントの色々な装飾方法

フォントの色を変えて違いを表現してみよう!

フォントの色を変えることは、他の文章との違いを表現したり、注意してほしいところを強調するという意味で有効だと思います。

下記の文章を例にすると・・・。

ブログを書くうえで必要なことは、「相手の目線にたって物事を考えること」たとえそれが自分の趣味のブログであっても、独りよがりにならずに読み手がなにを求めているかを常に考え記事にすると良い文章につながります。

このように、注意してほしいところの一部分の色を変えてやるだけで、印象がずいぶん違いますよね。

今回は、フォントカラーを赤にしていますが変更方法は「style.css」に以下の記述をします。(記述方法は前回のフォントサイズを変更する方法を参考にしてください。)

そして、「style.css」に記述した内容を呼び出すHTMLは以下のソースコードになります。

これで、いつでも簡単に注意してほしい部分のフォントを赤色にすることができます。

ちなみに、赤色ではなくて他の色にしたいという場合は「style.css」に記述したクラスセレクタ名(colorRedの部分)を変えてやって、カラーコード(#c00の部分)を変えたい色にすることで好きな色にすることができます。

その場合は、HTMLのソースコードのクラス属性値(colorRedの部分)もcssで変えたセレクタ名へ変更する必要があります。

フォントにマーカーのような背景色をつけて強調してみよう!

フォントにマーカーのような背景色をつけるのも、フォントカラーと同様に読み手の注意をひくのに有効です。

たとえば、下記の文章を例にすると・・・。

なんの装飾もしていない黒文字だけの文章もありですが、装飾をすることによっておしゃれな感じを表現することもできますので、花屋さんのサイトであれば、ユーザービリティを損なわない程度の華やかな色合いを演出することも有効です。

いかがでしょうか?

ワンポイントで使うことにより、なんとなくおしゃれな感じがしませんか?

今回は黄色のマーカーでフォントの下部にラインを引いたような装飾をしていますが、この装飾をするには「style.css」に下記の記述をします。

そして、HTMLで以下のソースコードを記述してやることにより、黄色マーカーの装飾ができます。

マーカーラインの太さを変更したい時は「style.css」に記述した60%の数値を変更することで変えることができます。
※数値を小さくした場合はラインが太くなり、大きくした場合は細くなります。

参考までに、ピンクや水色のマーカーの記述を下記に記載しますのでお好みで使用されてくださいね。

ピンク(桃色)マーカー

style.cssの記述

HTMLの記述

ライトブルー(水色)マーカー

style.cssの記述

HTMLの記述

フォントの背景色全体を変えたい時は?

今回のマーカー風背景色は、アンダーラインを引いたような細いラインをメインで説明していますが、もちろんフォントの背景全体を変えてやる太い線のマーカーも表現できます。

細いラインのマーカーと比べて、見た目や印象がガラッと変わりますのでポイントポイントで使い分けをすると、表現の幅が広がると思います。

フォントの背景全体が黄色のマーカーのstyle.css

HTMLの記述

本日のまとめ

見た目や表現方法を変えてくれるフォントの装飾は、使いようによって読み手に要点を簡潔に教えてくれますので、非常に有効です。ただし、やりすぎると逆に見づらくなったりしますので注意も必要。サイトやブログの雰囲気に合わせてユーザービリティを高める装飾にすることが大事ですよ!

 - WordPressカスタマイズ