SEOで検索エンジン上位表示!猿でも出来るSEO対策

新着情報などのご紹介です!
猿でも出来るSEO対策サーチエンジンへの登録基準が変わりました。あまりにもスパム行為が多い為です。登録をご希望の方はこちらから仮登録後、こちらから申請済みの連絡をお願いします。
【PR】無料で効果絶大の情報は、イッキヨミ!でGET。

猿でも出来るSEO対策 (CSS)

CSS(スタイルシート)の重要性

ここからは、ホームページに対しての技術的な話が出てきます。初心者の方は難しく感じる所があるかもしれませんが、最後まで読んでいただければ必ずご理解いただけると思いますので、頑張っていきましょう!

いきなりですが、CSSってご存知ですか?

猿でも出来るSEO対策(基本編)の、パート2の最後に少しお話しましたがSEO対策を行なう上で、CSSは非常に重要な要素の1つとなってきます。

ここで、CSSについて再度、簡単にご説明いたします。

CSSとはカスケーディングスタイルシートの略なのですが、このCSSの役目はといいますと、ホームページ作成時において、デザインとコンテンツ(文章と思ってください)を、別々に定義しようという考え方です

一昔前までは、CSS自体のルールが、現在ほど明確に決定していない部分が多く、CSSを使用すると、ブラウザ等によるユーザーサイドの使用環境によって、表示がとんでもないことになる場合が多く、使われることが少なかったのですが、現在はCSSの基準もかなり明確になってきたため、CSSの使用が必須項目となりました。(W3C的にもです)

もちろん「猿でも出来るSEO対策」も全てCSSで作成されています!

「CSS??デザインと文章を分けて作る???」

CSSを今回はじめて聞いた方は、意味が把握しづらいかと思いますので、一度ここで、現在見ているこちらのページの、CSSをとってしまった場合はどうなるのか?をご覧下さい。

←クリック

※戻す場合は、ブラウザの更新ボタンを押してください。

どうですか?とんでもない表示になってしまいましたよね!様は、HTMLのページとCSSのファイル2つそろって初めて普通に閲覧できる、そして希望とするページとなるのです。

HTML+CSS=閲覧可能なページ

じゃあ、なぜCSSが必要なのか?

当然これだけではCSSの必要性がわかりません。

それでは以下にある2つのボックスを見比べて下さい。双方ともに幅480ピクセル、高さ60ピクセルを指定し、上付き、赤文字という具合に同じような指定を行ったものです。

普通に見る限りでは、大した違いを感じることは出来ません。
こちらはHTMLのtable(テーブル)タグを使って作成しました。


普通に見る限りでは、大した違いを感じることは出来ません。
こちらはHTMLを使わずCSSのみを使って作成しました。

いかがでしょうか?ブラウザから見る限りでは、ほとんど違いは感じられないのではないでしょうか?しかし、今度はソースコードで見てみましょう!

まず最初にテーブルタグを使って書いた方をご覧下さい。

<table width="450" height="60" border="2" cellpadding="0" cellspacing="0" bordercolor="#0000FF">
<tr>
<td valign="top"><P><font color="#FF0000">普通に見る限りでは、大した違いを感じることは出来ません。<br>
こちらはHTMLのtable(テーブル)タグを使って作成しました。</font></P>
</td>
</tr>
</table>

次に、CSSだけで書いた方をご覧下さい。

<div class="box2">
<p>普通に見る限りでは、大した違いを感じることは出来ません。<br>
ちなみに、こちらはHTMLを使わずCSSのみを使って作成しました。 </p>
</div>

いかがでしょうか?違いがお分かりになりましたか?

最初のテーブルタグを使った場合には、不要なコードが多すぎる事に気がつきますでしょうか?次に、CSSを使った場合は、ソースコードが、物凄く簡潔に書いてあり、文章などが非常に見やすいですよね?

実は、検索エンジンも同じなのです。

余分なソースコードを省くことによって、検索エンジンが重要な文章や単語を拾いやすくなるのです。拾いやすくなるということは、拾った物が検索結果に反映されやすくなるのです。

今回は、1つのテーブルでソース結果を見てみましましたが、この違いです。

もしも、サイト全部をテーブルで作った場合はどうなるでしょう?大量の余分なコードによって大事な情報が、奥へ奥へと追いやられてしまいます。

まだまだあるぞ、恐るべしCSS!

SEO対策を行なう上で、CSSが必要な意味が伝わったかと思いますが、CSSはテーブルだけではありません。デザインに関する全ての定義を行なうことが可能です。

文字サイズ、文字カラー、表示位置、背景色、回り込み、解除、等々デザイン面における全てをCSSから定義することが可能です。

これら全てを、CSSによって定義することで、もっともっとソースコードを簡潔に書くことが出来ます。またSEO対策上非常に有利であるとされているブログですが、もちろんブログも全て、CSSでデザインされています。

また、CSSを使うと検索エンジンが、読み込む順番も自由に変えることが出来ます。通常検索エンジンは、ソースコードを上の部分から読み込んできます。

ソース読み込み順

テーブルを使って書いた場合などは、この様な流れになりますが、2番目のメニュー部分って重要な文章なんて、あまり無いですよね?また、こちらに広告や、そのほかの物を掲載している場合、左側の重要性は更に低くなります。

しかし、検索エンジンは上記の様な流れで読み込んでいきます。

CSSを使った場合は↓

CSSを使ったソースコード読み込み順

この様に、設定によって強制的に読み込ませる順番を変えることが可能なのでサイト内で重要な説明文やキーワードが確実に検索エンジンによって読み込まれます。これはSEO対策を行なう上で重要な要素といえるでしょう。

しかし、残念ながらCSSの使用方法や、CSSによって出来ることを全て書くことは当サイトでは出来ません。CSSの定義というものは、膨大な情報量だからです。完璧にCSSを理解されたい方は、CSSのリファレンスなど専門書籍を読まれることをお薦めします。

しかしながら、CSSを使いたいという方々の声が、あまりにも多く私もどうしたものかと考えました。そこで、CSSが使いたいとおっしゃっている方々には、ある共通点が存在することに気がつきました!

その共通点とは、みなさんは、すでにCSSを使っている!という事です。

ご意見をお寄せいただいた方のほとんどは、実はCSSを使っている人が8割だったのです。使い方は、文字の設定や背景色などが圧倒的に多かったです。

「じゃあCSS使えるじゃん!」 と私は思ったのですが、サイト全体をCSSで作るとなると、そこが問題のようです。

確かに、以前はまずテーブルを作って、分割してホームページを作っていた場合CSSでの作成は、設定項目が多く、少々難しく感じるかもしれません。

そこで今回は、サイト全体がCSSで定義された枠のテンプレートを作成いたしました。今回は、2カラムバージョンと3カラムバージョンを作成し、ダウンロードできるようにいたしましたので、必要な方はご使用下さい。

各部位を分かり易くするために、全て違う色で、色分を行なっています。

枠だけの非常にシンプルなものですが、逆に、 枠だけで何もない分、CSSを使ってのboxの組み方や定義方法が理解しやすいかと思います。

2カラムパターン1をダウンロードする。

2カラムパターン2をダウンロードする。

3カラムをダウンロードする。

※ホームページのカラム構成(箱の枠組み)に関して、ご要望がありましたらご連絡下さい。当方にて作成可能な場合、時間の都合も御座いますが、当方にて作成いたしますので以下のメールフォームよりご連絡下さい。

ホームページカラム構成依頼申し込み!
 
当サイトが週間SPA!より取材を受け「集客のキモ、SEOに効果的なテクニック!」として掲載されました。

週間SPA!より取材を受けました。

猿でも出来るSEO対策メニュー
SEO対策初心者はココから!
Yahoo!ディレクトリ登録でSEO
猿でも出来るSEO対策(基本編)
こんな事でもSEO対策
ちょっぴり高度なSEO対策
SEOスパム
便利なSEO対策ツールを紹介
免責事項とコンタクト
Powerd by Jigsaw
W3C CSS
W3C XHTML

上記の「W3CCSS」と「W3CXHTML」のバナーをそれぞれクリックしてみて下さい。もしW3C勧告に従い、正しいホームページ構成になっていれば、リンク先のようにバナーの使用を許可する文章が表示されます。ご自身でも調べてみたい方は、CSSを調査!でCSSが、HTMLを調査!でHTMLがそれぞれ調査できます。

上手く表示されない場合、セキュリティーソフトなどが問題となる場合があります。

クリックで救える命がある