テキストリンクは、なぜ青いのか？
この記事を読むのに必要な時間は約 22 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
最近、いろんな方のブログなどを拝見させていただくことがあるのですが・・・
ある傾向に気づいたのです。
記事内の文字に青色で装飾しているんですね
基本、ブログの背景は、白の場合にリンクの色が青色であることが圧倒的に多いのです。
正直、文字の装飾に青はおすすめしません！
今回は、そういった内容についてのお話です。
なぜ、リンクの色は青が多いのか？
1995年くらいからウェブサイト作成などがはじまったくらいかな？
まだネット接続も電話線でモデムをつないで接続していた感じですね
WindowsでいうとWindows3.1からWindows95に変わっていくくらいの時期ですね
その頃、よく使われていたブラウザがInternet ExplorerとNetscape(ネットスケープ)の２大ブラウザの時代でしたが、Internet Explorerのシェアは、全体の７割でした。
そんな中でブラウザで指定されているリンクの色が青だったのです。
それからほぼ２５年ほど経った今、ほとんどのブラウザで青色が設定されています。
そういった過去の流れから訪問者の方もリンクの色は、青色と覚えていてそれが主流になっているということなのです。
サイトによっては、リンクの色を変えただけで収益があがったとかクリックされやすい色があるなど
気になる方は、以下のサイトも参考に・・・
文字装飾に使わない方がいい色
そんな中で文字装飾に使わない方がいい色というのが、青・赤・紫なのです。
リンクの色は、実は１つではなく
４種類設定できるのです。
- 未訪問のリンク色
- 選択中のリンク色
- 訪問済みのリンク色
- マウスがのった時のリンク色
では、なぜ３色なのかというと選択中のリンク色とマウスがのった時のリンク色が同じ赤であることが多いので３色ということなのです。
しかし、赤はたまに使う時があるのですけどね
どうやって判別しているのかというと訪問済みリンクは、ブラウザのキャッシュ機能を使って訪問したのかそうでないのかを判別するようになっており、キャッシュをクリア(削除)すると未訪問のリンク色に変化します。
ブラウザが表示する初期のリンクカラー
通常、ウェブサイトはリンクカラーを設定しなくても通常はブラウザで初期設定された色が適用されるのですが、アメブロなどの場合は、デザインの変更の中で スタイルシートを使って設定されています。
|
1 2 3 4 5 6 |
/* コピペOK */ a:link { color: #0000ff; } a:visited { color: #000080; } a:hover { color: #ff0000; } a:active { color: #ff8000; } |
上記がリンク色を設定するオーソドックスな指定方法です。
ここで注意しておきたいのは、 Safariの場合に上記の順番でないと反映しないことがあるようです。
スタイルシートでの設定方法
|
1 2 3 4 5 6 |
/* コピペOK */ a:link { color: #0000ff; } a:visited { color: #000080; } a:hover { color: #ff0000; } a:active { color: #ff8000; } |
WordPressの場合は、テーマファイルのstyle.cssで設定されているはずです。
テーマファイルは、下記のところに格納されています。
https://あなたのドメイン/wp-content/themes/あなたが使っているテーマ/ スタイルシートの編集は、外観→テーマエディターでも行うことが可能です。
装飾の事例
では、実際にどうすればいいのか？
この装飾よりも・・・・・
こちらの装飾でいかがですか？
別に青や赤でなくてもOKだと思いますが、書き方は下記を参考にしていただいてもいいですが、ビジュアルエディタでも設定が可能です。
|
1 2 3 |
/* 基本的な書き方 */ <span style="background:#ff0000; color:#ffffff;">こちらの装飾でいかがですか？</span> |
色コードの指定方法は、３進法や６進法だけでなくRGBでも指定したりすることがあるのですが・・・
できるだけ６進法で固定しておく方がわかりやすくていいと思います。
色コードについては、下記のページを参考にしてください。
カラーコードが一目でわかるWEB色見本
まとめ
こういう記事を書いてる本人がツールチップで青色での装飾をしているのですが、これはわざとそうしているのです。
リンクと思っていたら注釈のポップアップだったとかいろいろ賛否両論なのですが、このサイトは専門用語が多くなりがちなのでできるだけわかりやすい注釈が必要なので気づいていただくためにそうしているのです。
WEBサイトにあるいろいろな仕掛けには、それなりの意味があるのです。
個人的には、青色での文字装飾をできるだけ避けているとOKだと思っていますけど・・・
普通にテキストを青色にするだけなど正直、意味なさそうでそれよりも意味のない青色テキストは、紛らわしいと思ってしまいます。
それなら背景に色をつけて装飾する方法や色を変更するなどした方がいいと思ってます。
とここまで書いてきましたが、記事部分の背景が白色の場合という前提であることを最後に付け加えておきます。
記事表示部分というのは、基本背景が白である方が個人的にはいいと思ってます。
背景で文字が読みにくくなっているブログなどたまに見受けますが、お世辞にもいいと思わないし、途中で離脱することも正直、多いですね。
この記事がこれからブログをはじめる方の参考になれば幸いです。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
Evernoteに保存