【SEO初心者のEvoブログ】

画像のロールオーバー

ロールオーバーとはページ中のボタン画像などにマウスカーソルが移動すると、その部分のイメージが違う画像に変わるようにする手法のことです。

マウスが載った途端にイメージ画像が変化することによってユーザのクリックを誘導します。リンクにはなっていない場合もありますが、これは多分に自己満足でしょう。

ロールオーバーはめんどくさいし重くなる

ロールオーバーを行うには、代替の画像を作成しJavaやCSSで設定する必要があり、一枚一枚代替画像を作るのは結構めんどくさい作業です。

明らかにボタンと分かる画像に、ロールオーバーを指定する必要があるかどうかは意見の分かれる所ですが、サイトは極力軽い方が良いと思うので、使いすぎにも注意が必要です。

簡易ロールオーバーもどき

そこで、代替画像を作る必要が無くロールオーバーしているように見せるためのCSSをご紹介いたします。

リンク付きのイメージに対し、透明度を変化させることによって、ロールオーバーしているようにみせる手法です。IEはopacityプロパティに対応していない為、filterを使います。

【CSSソース】
a:hover img {
-moz-opacity:0.5;
opacity:0.5;
filter: alpha(opacity=50);
}

0.5や50の数値を変えることにより透明度が変化します。

簡単かつ全ての画像をロールオーバーした時よりも軽く、全てのリンクイメージに一発で対応できるので、結構使ったりします。

※このCSSはCSS Validatorではエラーとなります。

背景画像上にボタン画像を設置し、先ほどとは逆に元のイメージの透明度を下げ、a:hoverで透明度を上げることによりよりこんな感じにもなります

文字コーとドはコンピュータ上で文字を利用するために、各文字に割り当てられるバイト表現もしくは、バイト表現と文字の対応関係のこと。出典: フリー百科事典『ウィキペディア（Wikipedia）』

日本語サイトの文字コード

日本語サイトで一般的に使われている文字コードは3種類です。

UTF-8

• Unicodeで定義される文字集合を用いて記述された文字列。
• UTF-8では1文字を1～6バイトの可変長の数値に変換するようになっている。
• 日本語などの文字では元々2バイトのものが、3バイトや4バイトで表現される。

EUC-JP

• 元々はUNIXで日本語文字を扱うためのコード体系で、複数バイトの文字を扱う文字コードの枠組み。
• 日本語UNIXシステム諮問委員会の提案に基づいて1985年にAT&T社が定めた。

Shift_JIS

• 現在多くのパソコン上で日本語を表すために使われている文字コード。
• 文字化けやエスケープ文字などの問題がある。

SEOにとってどの文字コードがベストなのか

キーワード「SEO」で上位20位の文字コードを調べてみます。（リンク切れは除外）

【Google】
UTF-8…10
EUC-JP…3
Shift_JIS…6

【Yahoo!】
UTF-8…7
EUC-JP…4
Shift_JIS…7

UTF-8に移行するサイトが多いが・・　　

上記の「SEO」上位20位で調べた結果はUTF-8に軍配が上がりましたが、日本語サイト全体で調べてみるとShift_JISが圧倒的に多いことが分かります。

数年ほど前からUTF-8がウェブサイトの標準文字コードになると言われていましたが、日本語のようなマルチバイト文字はデータサイズ面で不利になってしまう関係で、それほど普及してはいないようです。

現時点ではどの文字コードが有利、不利ということはありませんが、SEO関連サイトにUTF-8が多いことは気になるところです。

Yahoo!JAPANも1月に行われたホームページリニューアルにともない、EUC-JPからUTF-8に変更されています。

やっぱりこれから作るのはUTF-8が良いのかなぁ。

ブラウザの違いによるレイアウト崩れ

テーブルレイアウトではなく、CSSでサイトレイアウトを行うとブラウザにより見え方が異なる場合があります。多少の違いはどうしても起こってしまうのですが、ブログなどのカラムが崩れると訪問ユーザに不快感を与えてしまいます。

当ブログはWordPressで作成しており、標準のテーマ（テンプレート）に手を加えつつ使っているのですが、サイドバーをカスタマイズする際にデフォルトCSSをそのまま利用すると、Firefoxでは下図のようにレイアウトが崩れてしまいます。

今回は、サイトバー部分のCSSの「width、float、clear」などで調節し、Internet explorer（以下IE）、Firefoxの両ブラウザでストレス無く見られるブログとなりました。

Web制作者でもない限り、自分が使っていないブラウザでどう見えているのかなんて確認しない方がほとんどだと思いますが、ユニークユーザーをリピーターにするためにも、ブラウザチェックは必須です。

FireFoxユーザが急増

当サイトの訪問者が利用しているブラウザは下図の通りです。

サイトやブログの主要ターゲットとなるユーザさんによる違いもありますが、管理サイトも含め昨年あたりからFireFox利用ユーザが増える傾向にあります。

個人的には普段IEを使っているのですが、Firefoxはとても優れたブラウザで、文字コードに関係なくソースが文字化けしないので、他サイトのソースを見るときに使用したり、アドオンのFirebugでサイト分析したりするときに活用しています。

当サイトのSEO対策コンテンツ「Firefox」と「Firebug」は、毎日結構な数の訪問者をGETしており、その点でもFirefoxの注目度は高いと思われます。

バージョンを変えてブラウザチェック

ブラウザチェックをする際に注意しなくてはならないことに、「ブラウザのバージョンによる見え方の違い」もあります。IE6とIE7ではCSSレイアウトによる見え方が大きく異なる場合があるのです。

各ブラウザの新バージョンが発表されてから、そのバージョンがユーザに浸透するまでに1～2年はかかります。そのため、主要ブラウザに関しては、旧バージョン・新バージョンともにチェックする必要があるのです。

当サイトのIE利用者のバージョンによる割合は下図の通りです。

IE7がWindowsの重要な更新に含まれたことによりIE７利用者が増えていますが、未だIE6利用者も多いのが現状です。

IEの新旧バージョンとFireFoxは最低限確認しておこう 

全てのブラウザに対応しておくことがベストなのですが、現状ではIE6、IE7、Firefox2.0で同じように見えていれば特に問題はないでしょう。訪問者にNetscape navigatorやsafari利用者が多い場合は、ネスケやサファリにも対応させておいたほうが良いでしょう。

自分のサイト訪問者がどのブラウザを利用しているかは、アクセス解析を設置すれば確認することができます。当サイトは無料アクセス解析のGoogle Analyticsを使用しています。