TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年01月13日

色(color)を使う

■ 5-15 カラーイメージを確立しよう


ウェブの世界には、企業や個人のホームページ、ブログが溢れています。

それらの中で、
ビジョン(テーマ)をもって作り上げられたブログやホームページを閲覧していると、
発信している管理者のしっかりとしたコンセプトが感じられて、内容にも信頼感を持ちます。

企業はCI(コーポレートアイデンティティー)に沿ったイメージを確立して、ロゴ、制服、CMなどに統一した戦略を展開しています。
色使いも一つのビジョンであり、コーポレートカラーとして経営戦略の一部を構成しています。

  ※現在ではCIの理念を強化して「ブランディング」と表現をしています。

ホームページやブログの世界でも
背景、テキスト、見出しなど、独自のビジョンに沿った色使いを、どのように生かしていくかがポイントになります。

ブログを「目立たせる」には全体の色合いのバランスも重要ですが、

●文字を大きくする。
●文字に色を乗せる。

ことも、サイトの構成には無くてはならない手法です。

訪問者を記事へ導き、読ませる手法の一つが文字使いや色使いです。

カラーの使い方は、書体の使い方とも連動するもので
文字の大きさに「適度」があるように、色にも「適度」は有ります。

色使いを誤ると
ターゲットユーザーにとっては、読みにくい、馴染まないという結果になってしまいます。

文字で強調する、色で強調する
ブログやホームページのテーマに沿って基準値を決めておくことも、大切なことです。



Seesaaブログでのカラー指定のタグは、左から11番目のアイコンのクリックですね。
ki-ic01.jpg
                             ueya.gif

ブログでは
記事入力時にHTMLの各要素で文字の書体、大きさ、太さ、文字色などを変更しなければ、CSSのセレクタの定義が反映されますね。

記事を入力している時
文章の一部、あるいは文字や語句の色や大きさを変えて強調したい、修飾してアピール度を高めたいと思うことがあります。

HTMLタグで部分的に文字色を変更して、修飾を設定する方法を確認します。

タグの使い方は、文字サイズの変更と同じ方法です。


を確認しておきましょう。

coai01.jpg アイコンをクリックすると

color02.jpg

カラーチャートが表示されます。
このカラーチャートは色指定用としてのセーフカラーの色見本ですね。

カラーにはwwwに準拠した「基本16色」と「セーフカラー216色」が有り、プラウザやOSの異なる環境でも同じ色で表示されるようになっています。

PCやネット、TVでも表現可能なRGBカラーは、その組み合わせによって「1600万色余」の色合いを表現できますが
緻密な細かい色指定をしても、ユーザー環境の違いで表示される度合いは変化します。




●印刷物や広告の制作では「色を多用(乱用)しない」

の原則が有ります。

目立たせようと多くの色を使ってしまうと、肝心なポイントが、逆に目立たない結果になります。

この原則からみると
文字に使用するカラーは、表示されているセーフカラーの色で十分だと言えます。


■ 文字・語句・文章の色指定。

【例1】

文字色・下地色

@ 三国志は歴史を背景
A 三国志は歴史を背景
B 三国志は歴史を背景


@は頻繁に使用される文字の色乗せですね。

単純に色文字にしたい時は、指定したい文字や語句をドラッグして範囲を指定します。

範囲をドラッグすると、下記のように反転した表示になりますね。

【ドラッグ範囲の反転表示】
テキスト

反転させたまま、
入力アイコンのカラーチャートから使用する色を選択してクリック。

仮に赤色 = <#FF0000> を選択すると
  
表記されるHTMLタグは
<span style="color:#FF0000;">テキスト</span>
の形式になっています。
 ↓
「表示」
テキスト
赤色の文字で表示されますね。

このHTMLは
<span style>」の要素名で括った形です。

<span>はとくに意味を持っていませんが
<span>〜</span>で括った範囲の要素にCSSを適用するのに用います。
     ※<span>要素  ← このページ下段を参照

他のHTMLの形<font>タグを使用して表示する方法もあります。

    注)
   ●<font>タグは、現在では使用を推奨しないタグになっています。
   ●CSSを適用する<span>タグの使用が推奨されています。

文字に色を乗せる属性は<color>のみの表記になります。
<font-color>の形は取りません。

形式は
<span style="color:#FF0000;">テキスト</span>
の形を取ります。

属性の<color>は、文字に色を適用することを表し、属性値の<#FF0000>はカラーコード(番号)で、文字に乗せる色を指定しています。

カラーコード<#FF0000>は「赤」を表示しますが
「red、blue」のような「カラー名称」での指定でも構いません。

文字色は比較的、楽に指定できるため、多用する傾向にありますが、一定のコンセプトの中で使うことが望まれます。

コンテンツ毎に文字色が変わったら、色の異なる文字が何のためなのかユーザーは戸惑ってしまいます。

色を使うメリットとデメリットを十分に考え、色の多用は避けるようにすべきです。


■ 文字のバックに色を使う。

A 三国志は歴史を背景

文字のバック(下地)に色を使っています。
seesaaブログのアイコンには
文字のバックに色を使用するタグは用意されていませんので、HTMLの直接入力になります。

HTMLは
<span style="background-color:#dddddd;">テキスト</span>

文字のバックに色を乗せる属性の「background-color」を指定しています。色(属性値)は、この例では<#dddddd>(薄ねずみ色)を指定しています。

例のHTMLには、文字の色が指定されていませんね。
文字色<color>の指定が無ければ、CSS定義のデフォルトの色で表示されます。

デフォルトは「黒」色です。

多くのブログで見かける色を使った強調ですね。

バックに色を乗せる範囲(文字の上下左右の範囲)は
使用文字の大きさ分ですので、基準書体「12px」の文字幅でバックが表示されます。


B 三国志は歴史を背景

は@とAを組み合わせた方法です。
タグの形は
<span style="background-color:カラーコード;color:カラーコード;">テキスト</span>

<background-color>=「バックの色」と
<color>=「文字の色」を同時に指定しています。
   (注:<font-color>の使い方はしない。colorのみ)

バックの色と文字の色が、お互いに干渉しないような配色を考えて指定することが重要ですね。

文字や語句に色を使う強調の方法では、上記の@〜Bまでの使い方が多いようです。

 
■ 文字列(行)や段落を色で強調する。

【例2】

文字列・段落のバックカラー(1)

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

【例3】

文字列・段落のバックカラー(2)

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


文字の色乗せのHTMLは、前述したとおりです。
「例2」「例3」は文字列、あるいは「段落」を強調する方法です。

「例2」では、文字列のバック(下地)にカラーを
<span>要素
で表示しています。

複数行や段落に
<span>要素での指定は、間違った使い方ですが
<span>と<div>要素の違いを確認するための使用例として表示しています。

HTMLタグは「style」指定です。
span style="background-color:カラーコード;">テキスト</span

Aの文字の下地にカラーを使うと同じ形式ですが、
複数の文字列に<span style>を適用しているため、行と行の間(行間)には色が乗っていません。

<span>はインライン要素のため、段落では使用しません。
結果的には表示されますが、構文的には間違った使い方ですので薦める方法ではありません。

しかし見た目では面白い強調ですね。

学生時代に教科書の重要箇所を覚えるために、マーカーで文字に色を太く塗った感じです。

この方法を使うのは若い人に多いように思えますが、バックの色が文字を邪魔しないような配色で指定することが重要です。

「例3」は<div style>で指定しています。

この形式は
div style="background-color:カラーコード;">テキスト</div

文章の「段落」全体の指定になっていますので、複数の文字列をカバーしています。
<div >要素は「ブロック要素」であり、文章の段落にCSSを適応するときに使用します。

●文字、語句、文章の一部には<span style>
段落では<div style>を使うことを覚えましょう。


ブロック要素とインライン要素は
使っているうちに理解できてきますので、当初は間違っていても試して結果をみましょう。

    注)
   ●HTMLの構文上では明確に使い分ける必要があります。
   ●このブログでも、HTMLやCSSは、体系に基づいて正しく使っている
    とは言えません。
   ●一歩でも正確な使い方に近づくようにしましょう。

【例4】

バックカラーの幅の設定

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


「例4」は「例3」と同じ段落強調です。

「例3」では段落の上下左右ぎりぎりにバックカラーが表示されているため、文章に狭苦しさを感じます。

文章の下地の色の表示域を、段落(行列)の幅より大きく表示するため、一定のスペース
(ここでは使用文字の半分の6px)

<div style="padding:6px;background-color:#・・・・;">

を「padding」を使って、元のHTML構文に追加して、同じ色を記事(テキスト)の外側に下地として乗せています。
二重構文になっていますが、レイアウト上では「例3」より下地が広がり、見やすくなっています。

「例3」に比べて
バックカラーはゆとりある表示になっていますね。

スペースや範囲を指定するタグには
「margin」「padding」が有りますが、それぞれ用途が違います。

参照 
■ marginとpadding・その応用(1)~(3)

■(1)=枠内に余白を空ける。
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(2)=余白の考え方
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(3)=文字や文章の表示位置
http://tosiji-dreamafi.seesaa.net/article/152597959.html


テーブル作成やファレーム作成のとき
この両方のタグの使い方を覚えていた方が、見栄えのいい、形のいいテーブルやフレームが作成できます。

上記の参照ページを確認して見ましょう。

ブログやホームページの読みやすさを考えるとき
重要なものは背景に使用している色と文字の色、
つまり「明度」の差です。


「明度」とは色の明るさをいい、
色の明るい方を「明度が高い」暗い方を「明度が低い」と表現します。

明度の低い色を使った背景に
同じように明度の低い黒色のような文字を使うと、判別がし難く読みにくいことになります。

また逆に明度の高い淡い色に
白のようなさらに明度の高い色を使った文字も読みにくいですね。

明度の高い背景(下地)には、明度の低い文字色を、
明度の低い背景には、明度の高い文字色を

使用するようにしましょう。

色には
「明度」のほかに、
「彩度」= 色の鮮やかさの度合い
「色相」= 色の移り変わり
があり、お互いに相関的な働きをします。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
こんにちは!
またお邪魔しました。

ビジョン(テーマ)をもって
作るブログ・・・考えさせられます。

「例4」のスペースを指定するタグ
勉強になります。

Posted by hebaseijin at 2010年01月13日 19:00
はじめまして♪

ブログを拝見させていただきました。

私自身数多くの商材をレビューしております。
良かったら遊びに来てくださいね♪

また寄らせていただきますのでよろしくお願いします♪
Posted by 情報商材レビュー at 2010年01月13日 21:46
今晩は。文三です☆

イヤァ、面白いです!
思わずじっくりと
読み返してしまいました。

バックカラー(下地)の幅設定・・・

ナルホドです。

これだけでも
かなりインパクトが
違ってくる気がしますネ。

まだまだ
全然使いきれてないというか
勉強不足というか (^^ゞ

利 爺さんの記事は
宝石箱ヤァ〜^^

今日も
大変勉強になりました。

ありがとうございます!


気合いをこめて本気の応援!
Posted by やるんです!幸福を呼ぶ☆本気のブログ・アフィリエイト by文三 at 2010年01月15日 22:48
ハイサイ、利爺さん

ありすです。
いつも温かいアドバイスを本当にありがとうございます☆

色はブログを差別化するためにも重要ですよね。
記事を読みながら、カラーセンスが欲しいと思ってしまいました。

応援☆

Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月16日 01:36
ハイサイ、利爺さん

いつも温かいアドバイスありがとうございます!

左サイドのプロフィール欄について、
修正を加えました。

うまく表示されているでしょうか??
うまく表示できていない場合は、
またご一報おねがいします!!

最近気づいたことなのですが、
私のブログはwindows(Explorer)と
mac(firefox)で見る場合、
記事・サイドバーの文字の大きさ等々も若干違いがあるようです。

これってブラウザの違いで
起こることなの???…と、思いながら作業しています(汗)
パソコンって難しいですね。。。

応援済み☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月18日 13:35
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/137944334
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。