以前の記事「0045-140827 文字色のコントラスト比を確認したら、リンクテキストの色を修正することになった – mzmjp.net::blog」で書いた通り、リンクテキスト色のコントラスト比が WCAG2.0 の 等級AA にあたる「最低限のコントラスト」すらクリアしていない問題がこのブログでありました。

今回はこの問題を解消したことについてのメモ書きと、上の記事内で Colour Contrast Analyser というアプリケーションについて書いたことの訂正です。

リンクテキスト色を修正した話

ずっとほっぽらかしていたリンクテキスト色修正。なんで放置していたかというと、色の決め手が無かったからです。青系の色にするのは決まっていたのですが、どんな色がいいんだろうと考えていました。

で、リンクテキスト色について参考になるページは無いかなと探していたところ、クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学というページにたどり着きました。こちらのページでは、「有名なサイトではリンクテキストにどんな色を使っているのか」が表でまとめられています。

こちらを参考にして、いくつか試した結果、リンクテキスト色は color: #1122cc; にしました。Google の2013年1月時点でのリンクテキスト色です。問題だったコントラスト比は“8.60”になりました。これで問題解決です。

Colour Contrast Analyser でカラーピッカー機能を発見した話

コントラスト比の問題を書いた記事内で、コントラスト比を調べるアプリケーション“Colour Contrast Analyser”のことを書きました。その時は気づかずに「スポイトのアイコンが無いので、カラーピッカー機能が無い」と書いてしまったのですが、数日前にカラーピッカー機能を発見しました。以下に、どうやって色をピックするかを書いておきます。気づいてしまえば、なんてこと無いことでした。。。

Foreground（前景色）の Colour select という項目の色を表示している部分をクリックすると、“Colors”というウィンドウが出てきます。

このウィンドウの左下の部分にスポイトがありました。そのアイコンをクリックしたら、無事カラーピッカーとして動いてくれました。何で前にさわった時は気づかなかったんだろう。。。

以前、はてなブックマークを iPhoneアプリから見ていて良いなと思ったことがあったので、それについてメモしておきます。

ネイティブ広告（記事広告）というものがあります。これは、そのサイトにおけるコンテンツと同様の形式で掲載される広告のことを指します。例えば Twitter だったら普通のツイートと同じ形式で広告が流れてくるし、ニュースサイトだったらニュース見出し一覧の中に広告の見出しが紛れているような状態です。

このネイティブ広告、自分はあまり良い印象がありません。最近はどうなのかわからないのですが、広告であるという表記が凄くわかりづらいことが多く、ヒドいものだと広告を踏んで記事を読み終わった時にページ下部に小さく広告の表記があることに気づくものもあった気がします。

そんな感じでユーザーに気付かれないように、まるで人を騙すかのようにして広告を踏ませるものが多いため、記事内容に関しては満足したにも関わらず、広告記事だったということがわかってしまうと、途端にその広告主とそんな掲載の仕方をしているサービスに対しての不信感が増してしまうこともあります。

そんな時に、このはてなブックマークの iPhoneアプリを見て「おお」と思いました。それまで私が見てきたネイティブ広告の中で一番わかりやすく広告であるという表記がされていたのです。下の画像の「ロケーション抜群〜」というエントリーの箇所に “PR” という文字があります。

このようにちゃんと表記してもらえると、通常のエントリーとは違うものとして認識できます。やりすぎかもしれないけど、更に判別しやすくするために、背景色を通常のエントリーと変えてもいいかもしれないです。

このはてなブックマークの iPhoneアプリに限りませんが、ちゃんと広告であることを明示してくれると、そのサービスに対する信頼感が上がります。ちゃんとわかりやすく広告であるということが明示されていれば、絶対に広告を踏みたくない人は避けらるし、広告とわかっていても見出しの内容に興味があれば踏めるし。

うまいこと隠したと発信側は思っていても、大抵の場合誰かが気付くし、今の時代共有されて悪名や不信感が高まる可能性もある。なので、隠さずにもっと広告であるということを主張していった方がいいと思う。

今回、また少しブログのデザインをいじったので、さらっと（？）メモ。

タグとパーマリンク追加

わからないことがあって検索してる時に、その記事のタグから更に関連情報を拾うことがあります。が、自分のサイトでは、それができないことに気づきました。ということで、タグを記事の下部に追加しました。今は記事数が少ないので、あまり役に立たないのですが、後々便利になっていくと信じます。

もう一つ、ページ下部にパーマリンクをつけてみました。これは、ページ下部にタグだけだと締まりが悪かったので、とりあえずブログっぽくなるかなと置いてみました。もしかしたら、いつの間にか無くなっているかもしれません。

アイコンフォント増やした

前回ブログのデザインを変更した際、検索フォームに飛ぶためのボタンを右上に設置したのですが、そこにテキストと併記するかたちで、虫眼鏡アイコンを置きました。せっかく使い方がわかったのだからと欲が出て、新たに2箇所アイコンフォントを置きました。

1箇所は、記事上部の日付の部分です。カレンダーのアイコンフォントを設置しました。このブログでは、記事タイトルに独自の数字を入れていて、数字ばかりでごちゃっとしてしまっているので、メリハリをつける意味で置きました。

もう1箇所は、上記したタグの部分です。このアイコンフォントがあると、タグであるということがとてもわかりやすくなると思います。

アイコンフォントに関しては、これからもう少し改良する予定があって、それはアクセシビリティに関する改善です。装飾をしたためにアクセシブルでない箇所が出てきてしまってはいけないので、こちらのサイトを参考にさせていただいた上で改善する予定です↓

• アイコンフォントにラベルを付ける — Website Usability Info
• PUAアイコンフォントのアクセシビリティ – Unreviewed

run_prettify.js を prettify.js に変更

前回のブログデザイン変更時、ソースコードのハイライトツールを Syntax Highlighter から、 Google Code Prettify に変更しました。その際、勘違いして run_prettify.js を読み込んでいるのに、prettify.css も読み込んでしまっていました（prettify.css を _prettify.scss にして、style.css に @import していました）。

run_prettify.js は You can load the JavaScript and CSS for prettify via one URL とあるように、単独で JS と CSS を読み込めます。私の環境では、prettify.css を別途読み込んでおり、CSS が重複してしまうので、prettify.js に変更しました。

今後実施を考えているデザイン変更

• リンク文字色の変更（前回記事参照）
• アイコンフォントのラベル付け
• 記事タイトル一覧ページ作成