アフィリエイト

当ブログにおいても例外では無く、左上にタイトルを配置しています。そしてこれも殆どの人が「そうする」、もしくは「そうしたい」のだと思いますが、タイトルは見栄えのするロゴ（画像、イメージ）にしたいはずです。この点についても当ブログでは実現しています。

その際、SEOの観点からすると、タイトルには上位表示させたいキーワードを含み、尚且つ内部リンク効果を発揮させる為、全ページからリンクを貼る（全ページにタイトルロゴを配置）のが理想です。

さらにタイトルは画像のalt属性（alt="アフィリエイト・ゼミ"）よりもテキストリンクの方が効果が高いです。（<a href="http://business-affiliate.net/">アフィリエイト・ゼミ</a>）

CSSを使えば画像を使用しつつもSEO効果を高める事ができる

それでは画像はタイトルに使わない方が良いかと言えば、それは間違いです。SEOというのは検索エンジンに正しく評価して貰えるようサイトを最適化する施策なので、ユーザー視点からすると、プレーンなテキストよりは、見栄えのする画像の方が興味を引きつけるはずです。

ここでCSS（カスケーディング・スタイルシート）の登場です。CSSを使えば、画像を使用しつつも、検索エンジンのクーローラにはテキストとして認識させられるテクニックがあるのです！

このサイトを例に、そのテクニックを紹介しておきます。まずは当ブログのタイトル部分のソースコードを見てみましょう。

<h1><a href="http://business-affiliate.net/>アフィリエイト</a></h1>

ここで注目して欲しいのは、タイトルにはゴロを使用しているにも関わらず、画像に関するリンクや画像のalt属性に関する一切の記述が存在していない事です。

それでは画像はどのように表示させているかと言えば、<h1>のタグにそのカラクリがあります。実は、CSSを使用し<h1>タグを再定義することで実現しているのです。

具体的なやり方としては、まず画像を3枚用意します。

タイトルロゴの画像と、タイトルロゴにマウスを乗せた時に切り替わる画像、もうひとつは画像をクリックした時に表示させる画像です。

画像は一枚でも構いません。各自の判断で良いかと思いますが、ゼミ長はクリック出来る対象には、必ずマウスホバー（mouse hover…マウスが乗った時）した時、クリック時に何らかのアクションが起こるようにしています。

これは、ユーザービリティの点から良いと思うのでそうしています。マウスを乗せた時に何らかのアクションがあれば、それでユーザーは『ここ、クリック出来るな。』と思うはずだからです。

画像が用意できたら、次はCSSの記述です。当ブログでは以下の様に記述しています。CSSファイルの名前は「stylem.css」としました。

h1 {
display: block;
text-indent: -9999px;
height: 81px;
width: 321px;
background-image: url(/img/title.jpg);
margin-top: 9px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
}



h1 a {
display:block;
height: 81px;
width: 321px;
}


h1 a:hover {
background-image: url(/img/title_hover.jpg);
}


h1 a:active {
background-image: url(/img/title_active.jpg);
}

そして最後に、HTMLのヘッダー部分に上記のCSSへのリンクを記述して完了です。当ブログはMTで作成していますので、以下の独自のコードになります。

※因みに、$mt:BlogURL$の前後の＜＞は本来は<>になります。理由は、本文中にMTのタグを使用出来るプラグインを導入しているため、普通に記述してしまうと、そのままタグの内容が反映されてしまうためです。

<link rel="stylesheet" href="＜$mt:BlogURL$＞css/stylem.css" type="text/css" />

結果、データベースが吐き出すソースは以下になります。

<link rel="stylesheet" href="http://business-affiliate.net/css/stylem.css" type="text/css" />

以上で完了です。

ゼミ長は独学でCSSを習熟していったので、少し美しくない書き方なのかもしれませんが、大概の人が書いてもこのような形になるでしょう^^

内容は普通の英語で構成されているので、どういった事が書かれているのか？概ね理解できるかと思いますが、ここでの最大のポイントはtext-indent: -9999px;の箇所です。

つまり、テキストを左側に9999pix（ピクセル）移動させる事で、ブラウザの表示領域のはるか外にテキストを飛ばしているのです。

そして、テキストは飛ばしつつも、display: block;において縦81、横321の画像領域を確保し、そこに背景画像（background-image）としてロゴを配置させているのです。

結果、ソース上においてはテキストにリンクを貼っていながらも、視覚的には画像にリンクが貼ってあるように見せる事が出来るのです。

そして、ゼミ長は<h1>のタグについて再定義しているので、ブログ内全ページの見出し1はアフィリエイト、というキーワードのみを設定していることになります。

気が付いた方もいるかと思いますが、アフィリエイト・ゼミでは無く「アフィリエイト」にしています。これもCSSのテクニックを使うことで得られるメリットなのですが、

つまり、テキストに関しては視覚的に見えない領域に飛ばしているので、極端に言えば何を記述してもOKなのです。

ですから、ゼミ長はSEO対策を考えて「アフィリエイト・ゼミ」よりも濃い文字列「アフィリエイト」にしてます。

しかし、本来のCSSの記述方法としては推奨されている訳ではないので、今の所スパムかどうか？と言えばグレーゾンだと思っています。

…CSSの技術の更なる進歩を願っています。