IE8で強制互換表示
IE8ではソースの解釈が異なるレンダリング。従来までのマークアップで作られたサイトを見る場合、IE8では表示モードの切り替えボタンを使わないとレイアウトが崩れることがあります。そこで、従来のサイトで とりあえず
IE8で強制的にIE7の互換モードで読み込ませるメタタグ
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
IE8に命令を出すことで、IE7の互換モードで読み込ませます。ちなみに、このメタタグが効いているページを閲覧する場合は、IE8の表示モードの変更ボタンが非表示になります。（そもそも使う必要がなくなるので。）
IE8のためにサイト全体を直すのが大変なとき、さしあたっての応急処置に。
被リンクとキーワード
SEO対策のひとつとして、ブログやポータルサイトなど外部からの被リンクをつくる場合。以下のようなリンクをつくっても被リンクとしての効果は低いです。キーワードにするべき△△△△が、アンカーの外に出てしまっています。
- △△△△のことなら○○会社。<a href="http://www.○○○.jp/">http://www.○○○.jp</a>
- △△△△のことなら○○会社。<a href="http://www.○○○.jp/">サイト名</a>
上記の例では、SEOの被リンク上、URLがキーワード扱いになってしまいます。また、もし会社のサイト名で検索されたいのでなければ、サイト名をキーワードにする必要もあまり感じられません。サイト名は固有名詞であることが多いので、特別な対策をしなくてもサイト名による検索結果は、たいてい上位表示です。
【改善】 下記のように、リンク先のページで使われているキーワードを入れると被リンクの効果が得られます。
- <a href="http://www.○○○.jp/">△△△△のことなら○○会社</a>
外部からではなく、サイト内でも自力で被リンクをつくることができます。その場合、以下のようなリンクをつくっても被リンクとしての効果は低いです。
- <a href="http://www.○○○.jp/">トップページへ</a>
- △△△△について詳しくは<a href="http://www.○○○.jp/">こちら</a>
上記の例では、「トップページへ」と「こちら」をキーワードとした被リンクになってしまいます。「トップページへ」や「こちら」でサイトを検索されたいのでなければ、SEO対策としては、この被リンクは あまり効果がありません。
【改善】 下記のように、リンク先のページで使われているキーワードを入れることで被リンクの効果が得られます。
- 詳しくは、<a href="http://www.○○○.jp/">△△△△</a>についてのページをご覧ください。
まとめ 『被リンクの心得』
- アンカーである a タグ内には、検索キーワードを意識したワードを入れる。
- リンク先のページは、同様のキーワードを適度に使用したページであることこと。titleも含む。
HTMLの見出しタグ
HTMLでのh1〜h6というタグは、SEO対策にとって いくぶんか重要性を持つとされています。文献によっては、あまり意味がないと書いていることもあったり、意見は まちまち。ただし、サイトの話題と関連したワード（サイト内で使われているワードと、そのワードによるサイト内でのバックリンク）を含まなければ効果は低いということについては、意見にばらつきがないようです。
もともと、h1〜h6というタグはHTMLの構文上では「見出し」を意味するタグなので、本来の見出しの使い方をするのが妥当であるという見解も一致しているようです。新聞でいうと「イチロー200本安打達成！」というのが見出しであって、この新聞を発行している「○○新聞」というのは見出しではなくロゴであると考えられます。
「○○新聞」をキーワードにするのでなければ、HTML上では このロゴは画像そのまま。「イチロー200本安打達成！」というのが h1 という組み方が見出しの意味をなすようです。また、「○○新聞」という名称自体はtitleタグに含むのと、固有名詞による競合は普通名詞ほどではありません。よって、特別なSEO対策をしなくても「○○新聞」というサイト名の検索結果は、たいてい1位で出てきます。
社名などの名称で検索するのは、その名称を覚えている常連さん。名称を知らない人にいかに見てもらうかを考えると、見出しのタグは本来の見出しの意味として使うほうがよいと言えます。（＝ｏ＝）ノ
近年のPC復旧事情
今まで、起動しなくなったりエラーが出たりするPCを十数台直してきたのですが、OSのCDがあったり、必要なドライバやソフトウェアがメーカー側であらかじめFD、CD化されていたりしたのは過去の話。5年くらい前からか、必要なものがすべてPC内に格納されていることで、起動が困難な同一PCからそれらを取り出すことは初心者では難しくなっています。
起動しないからこそ必要なのに、起動しない限りは取り出すことが容易ではないという本末転倒な近年のPC。さらに、この頃はドライバもOEM化されているので、公式サイトにあるドライバを じかにインストールすることは、できなくなりつつあります。
今後、新しくPCを買う人は、購入直後にすべてのドライバと純正ソフトウェアのインストーラを取り出しておくことをお勧めいたします。
並べて上下中央揃え
| ドラミちゃん | ドラえもん ドラえもん ドラえもん |
要素としてpで段落構成をしたい場合は、上記のpをdivに置き換えて、その中でpを使ってください。
<div class="Doraemon">
<h2>ドラミちゃん</h2>
<p>ドラえもん<br>ドラえもん<br>ドラえもん</p>
</div>
スタイルシートによる舞台裏は↓これです。
例によって、IEのためのハックです。魔法の言葉 zoom♪ zoom♪ zoom♪。Mac IEもつけておきました。
.Doraemon {
display : table;
}
.Doraemon h2 {
display : table-cell;
vertical-align : middle;
}
.Doraemon p {
display : table-cell;
vertical-align : middle;
}
みんなが買うPCにInternet Explorerが最初から入っていなかったら、ブラウザのシェアはどうなるのか。IE対応を強く考えんでもよかったりして。だが、コンテンツによっては、ActiveXを使用せざるをえない場合があって、自宅では そのためだけにIEを消さずに置いています。
* html .Doraemon h2,
* html .Doraemon p {
display : inline;
zoom : 1;
}
/*\*//*/
* html .Doraemon h2,
* html .Doraemon p {
display : inline-block;
}
/**/
上下の中央揃え
下記の ふたつのコードは、200ピクセルの高さを持つ枠内で、「ドラえもん」という文字が それぞれ上下中央揃えになります。
どちらも こんな感じ↓で表示されます。（罫線の種類は異なりますが。）
<table width="300" height="200" border="1">
<tr>
<td valign="middle">
<p>ドラえもん</p>
</td>
</tr>
</table><div id="Dramichan">
<div class="Doraemon">
<p>ドラえもん</p>
</div>
</div>
下記は、IE用に追記するやつです。
#Dramichan {
display : table;
width : 300px;
height : 200px;
border : solid 1px #000000;
}
.Doraemon {
display : table-cell;
vertical-align : middle;
}
つまり、IEを想定するとブロックが3重構造に。できるだけdivを使いたくないのですが、div ＞ div ＞ div と組めば、中身はpなどで柔軟に組めますね。IE6のシェアって、今どれくらいなんでしょう。
* html #Dramichan {
position : relative;
}
* html .Doraemon {
position : absolute;
top : 50%;
}
* html .Doraemon p {
position: relative;
top : -50%;
}
