自分でSEO対策その2 SEO内部対策

SEO内部対策1 CSSでSEO対策

 

「SEO初心者が最初からCSS!?」と思われている方!実は、CSSって結構簡単なんです。

しかも、ホームページが完成してからCSS様に修正するよりも、最初からCSSの使用を前提としてホームページを作成した方が楽なんです。

サンプルテンプレートも用意してありますので、SEO初心者の方も安心して実践して下さい。

CSSの必要性

CSSとは、ホームページのスタイルを指定する言語です。

“Cascading Style Sheets”(カスケーディング スタイル シート)の略で、それぞれの頭文字をとってCSSと呼ばれています。

ホームページはHTMLで記述されています。

HTMLでも凝ったデザインのホームページを作成することができますが、デザインを優先するほど複雑な記述を必要とします。

その結果、、ホームページの作成や修正も大変な作業になるだけでなく、ファイルサイズが大きくなり読み込み時間が長くなります。

CSSを使用する利点

  1. 見た目に関する変更は、CSSの変更だけで良い。
  2. 新しいホームページを作成する際に、過去のCSSを流用することで作業時間が短縮できる。
  3. HTMLのファイルサイズを小さくすることで、読み込み時間が短縮されて、訪問者のストレスが減少する。
  4. CSSでHTMLをすっきりさせると、検索エンジンが重要な文章や単語を拾いやすくなる。

などの利点が挙げられますが、SEO対策にとって重要なのは、最後の「検索エンジンが重要な文章や単語を拾いやすくなる」です。

つまり、拾いやすくなると言うことは、拾ったものが検索結果に反映されやすくなると言うことです。

CSSを外部ファイルで読み込みさせる!

CSSの読み込みさせる指定方法は幾つかありますが、ここではSEO対策様にCSS外部ファイルの使用を前提とします。

外部ファイルとは、別にファイルを作って、そのファイルを読み込んで使用する方法です。

SEO初心者でも簡単にできるようにサンプルテンプレートを用意していますので、ダウンロードして任意の場所に解凍して下さい。

サンプルテンプレート【2カラム右メニュー】のダウンロード

解凍すると、index.htmlとstyle.cssが同じフォルダーに入っています。

「sitemap.html」は、「SEO外部対策1 サイトマップでSEO対策」で使用するファイルです。

フォルダーの名前は、変更して頂いても結構ですが、今後の説明の為index.htmlとstyle.css、sitemap.htmlを同じフォルダーで、任意の場所に置いて下さい。

1.CSSの外部ファイルの読込みを指定する。

サンプルテンプレートのindex.htmlをブラウザにドラック&ドロップして下さい。

ヘッダー部分、メイン部分、フッター部分と言う構成で、メイン部分にメインコンテンツ部分とメニュー部分を入子にしています。

それぞれのボックスのボーダーは、解りやすいように色をつけています。

ソースを見て下さい。

このサンプルは、外部ファイルのCSSを読み込んでHTMLをすっきりさせています。

CSSの外部ファイルを読み込む為のタグは、以下のタグです。

		<link href="style.css" rel="stylesheet" type="text/css" />

<head>~</head>間に記述します。

キーワード+ホームページ名+ページの情報 <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta name="keywords" content="キーワード1,キーワード2,…" /> <meta content="ページの詳細" /> 		<link href="style.css" rel="stylesheet" type="text/css" />

これだけのタグでCSS外部ファイルを読込みます。

HTMLファイルを別の階層に置く場合は、href=”style.css“を書き換えて下さい。

絶対パス(httm://から始まる形式で指定する方法)、相対パス(起点になるファイルから指定する方法)のどちらでもOKです。

2.CSS外部ファイルを設定する。

では、CSS外部ファイルstyle.cssを見てみましょう。

テキストエディタでstyle.cssを開いて下さい。

※テキストエディタをお持ちでない方は、無料で高機能なテキストエディタWeb Frontierさんの“ez-HTML”が非常に使いやすいのでインストールしてお使い下さい。

なんだか訳の解らない記述ですねぇ。

ここでCSSの記述を全部説明することは不可能なので、一部だけ説明しておきます。

※本格的に修正したい方は、初心者でも理解できる専門書ゼロからわかる HTML&CSS超入門 をお買い求めになることをお勧めします。

CSSは、スタイルをセレクタと言う要素で指定します。

セレクタには、基本セレクタclassセレクタidセレクタなどがあり、読込みにはそれぞれの指定方法があります。

基本セレクタ
基本セレクタ{属性: 値;}

body {
font-size: small;
margin: 0px;
}

HTMLの<body>~</body>間を定義します。

<body>~</body>間のフォントサイズを12pxにしたい場合、font-size: small;をfont-size: 12px;にします。

<p>のフォント色を#FF0000に指定したい場合は、以下の記述になります。

p {
color :#FF0000;
}

classセレクタ
.クラス名{属性: 値;}

.imglink {
border: 0px none;
height: 50px;
width: 700px;
}

HTMLにclass要素を関連付けて定義します。

サンプルテンプレートのヘッダー部分のイメージの指定は、以下の記述で読み込んでいます。

<img class="imglink" alt="画像が表示されなかった時の代替テキスト" src="画像のURL" />

class=”クラス名“で関連付けます。

idセレクタ
#id名{属性: 値;}

#banner {
height: auto;
width: 700px;
border: thin solid #FF0000;
margin-right: auto;
margin-left: auto;
}

HTMLにid要素を関連付けて定義します。

サンプルテンプレートのヘッダー部分のボックスの指定は、以下の記述で読み込んでいます。

</pre>
<div id="banner">~</div>
<pre>

id=”id名“で関連付けます。

idセレクタは、1ページに1要素しか指定できませんのでご注意下さい。

ご自分の好みに合わせて設定して下さい。

※フッター部分の<a href=”http://seo.agingcare.jp/index.html”>seo.agingcare.jp</a>は、修正・変更・削除しないようにお願いします。


 
 

コメントの書き込み

スポンサードリンク