高機能エディタで文字の色を変更する方法

ブログが作りたい!FC2ブログの作り方 > 高機能エディタで文字の色を変更する方法

高機能エディタで文字の色を変更する方法

高機能エディタで文字の色を変更する方法

FC2ブログの記事内の「文字の色」を変更してみよう!

今回は、高機能テキストエディタにて、記事内の文字の色変更する方法をご紹介します。

FC2ブログにて、「この文字列だけ色を変えて強調したい!」というような、ちょっとだけ変更したいときの方法になります。

全体的に、あるいは恒久的に変更したいような場合は、CSSによる文字色の変更を行うほうが効率的です。


「高機能エディタで文字の色を変更する」とは?

1:「高機能エディタで文字の色を変更する」とは?

一般的にブログの文字の色は、黒色が設定されていますが、ときには、次のように文字の色を変更したい場合があるはずです。

文字の色をうまく変えることによって、表現を強調することができるようになります。重要な箇所の色を、うまく変更するのがポイントです。

重要な箇所の色を変更するのがポイント

2:色を変更するときの留意点

しかし例えば、次のようにひとつの段落の中で、様々な色を使ってしまうと、いかがでしょう?

ターゲットユーザが、若い女子学生などであれば良いかもしれませんが、一般的には、読みにくい印象をもつ人が多いかもしれませんね。

ひとつの段落の中で様々な色を使ってしまうと読みにくい

色を変更する場合は、次のようなことに注意しましょう。

  • ひとつの段落の中で、様々な色を使い過ぎない。
    (逆に強調されません)
  • 背景色とのかね合いも考えて、読みやすい色を選択する。
  • 使用する色に意味をもたせて、一貫して使う。
  • 青系や、紫系の色は、できるだけ使用しない。

とくにリンクの色は、一般的に青系(未訪問カラー)、紫系(訪問済カラー)と決まっています。青系や、紫系の色は、できるだけ使用しないほうが良いように思います。

リンクだと思ってクリックしたのに、リンクではなかったときはたいていイラッとくるはずです。(見てくれる人たちを混乱させないように気をつけましょう)

3:参考になる良い例

例えば、ふわふわふわりんさんのように、各章ごとに色を変える方法は、とても読みやすくて良い印象をもつのではないでしょうか。

心遣いが伝わってくる良い例です。

常に長文になってしまう傾向があるブログは、このような工夫をしておくと、読み手にやさしい感じになります。


書いている途中で、文字の色を変更する方法

(01)

それでは、書いている途中で、文字の色を変更する方法を試してみることにしましょう。

「高機能テキストエディタ」モードに、切り替えます。

「高機能テキストエディタ」モードに切り替える

(02)

お好きなように、文章を書いてみましょう。

文章を書く

(03)

文字の色を変更したい箇所にきたら、右の方にある「T」と書かれたボタンをクリックしてみてください。

「T」ボタンをクリック

(04)

カラーパレットが表示されます。

お好きな色を、選択(クリック)しましょう。

色を選択

(05)

続けて文字を書いてみると、前述(04)で選択した色で記述できます。

続けて文字を書く

(06)

文字の色を黒色に戻したい場合は、右の方にある「T」と書かれたボタンをクリックして・・・。

「T」ボタンをクリック

(07)

カラーパレットの中から、黒色を選択(クリック)しましょう。

黒色を選択

(08)

文章を書いてみてください。また、黒色で書けるようになります。

黒色で書ける

書いた後で、文字の色を変更する方法

(01)

後になって、「あぁ、ここの文字は違う色にすれば良かった~」なんてこともあるはずです。書いた後で、文字の色を変更する方法を試してみましょう。

変更したい文字列を、範囲選択してください。

変更したい文字列を範囲選択する

(02)

右の方にある「T」と書かれたボタンをクリックし・・・。

「T」ボタンをクリック

(03)

カラーパレットの中から、好きな色を選択(クリック)しましょう。

色を選択

(04)

範囲選択されたままで分かり難いでしょうから、適当な箇所をクリックして範囲選択を解除してみてください。

文字の色が、変わっているはずです。

適当な箇所をクリック

もっと違う色を使いたい場合

(01)

右の方にある「T」と書かれたボタンをクリックします。

「T」ボタンをクリック

(02)

カラーパレットが表示されます。

「その他の色...」を、クリックしましょう。

「その他の色...」をクリック

(03)

「色選択」画面が表示されます。

好きな色を選択して、[OK]ボタンをクリックすれば、色を変更することができます。

好きな色を選択して[OK]ボタンをクリック

あるいは、16進数でカラー指定する方法をご存知であれば、右下の方にある入力欄に数値を入力することで、色を設定することもできます。

16進数値を入力

この「16進数」についての意味がよく分からない場合であっても、記事『色見本(HTMLカラーチャート)』をご覧いただいて、好きな色をみつけて、その数値を入力すれば変更することができます。

良かったら、試してみてください。


高機能モードと標準モードでのボタンの違いについて

ちなみに、標準モードの場合は、「パレットの絵」のようなボタンをクリックすることで、文字の色を変更できます。

標準モードでの文字色の変更

この「パレットの絵」のようなボタンは、高機能モード(高機能テキストエディタ)でもクリックできます(使うことができます)が、今回ご紹介した「T」ボタンとは、混在して使わないように気をつけてください。

文字の色を変更する場合は、どちらかのボタンを一貫して使うようにしないと、「色が変わらない」という不具合が起きる場合があります。

混在して使ってしまうと、CSSのコード指定がそれぞれ違うために、片方の指定だけ優先されます。

前の記事へ
次の記事へ

次回予告

次回は、FC2ブログ高機能テキストエディタで、文字の背景色を変更する方法について書きます。


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2009/12/19 更新日:2009/12/19

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

カラー

うちのブログでも文字の色を変えた方がいいでしょうかね…
強調したい時だけ文字色を変えたりしますが、
う~ん好みもありますからね(^_^;)
少なくとも派手になり過ぎたり、過度に多用するのは
NGかなと思います。

ギャル

fuminchuさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

えぇ、そう思います。

fuminchuさんのブログは、
カラフルじゃなくって、良いんじゃないですかねー。(´Д`;)

ターゲットとするユーザが、
ギャルとかなら、別ですけどー。(;´Д`)

いろいろ♪

こんばんわあ~♪なかなか来れなくてすみませんでした^^;
参考ブログの方の「段落ごとの色のぬりわけ」イイですね~!私、すこぶる長文野郎なんで、意識して太い文字や濃い色を使うようにはしてますが、印象には残らないかもなあ(・・;)って思ってました。ほんわか系ではないのですがwでもこういう使い方参考になります♪
どうすれば、みていただく方に見やすいか、わかりやすいか、は気をつけていますが独りよがりになりがちですよね^^;
うん、タメになります~^▽^♪

プラン

ありんこさん、こんばんは!(・∀・)/
コメントありがとうございます。

いえいえ、年末でお忙しいでしょうから~。(´Д`;)

体調を崩している人もけっこういらっしゃるようですので、
お気をつけくださいねー。


見やすさ、読みやすさ、
大事ですよね。(`・ω・´)

少なくとも、自分で読み返してみて、
読みやすいってことが基本になるように思います。

あとは、マーケティングのプランが、
しっかりしているとブレなくて良いのでしょうねー。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/617-dcdecaca
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて