検索ランキング2 vol.01
本格的なWEB活動を始めて2つ目になる今回のサイト。
キリよく3月1日に正式オープンして、その間もいろいろあり、一時的に公開ページが減ったりしたものの、
徐々に建て直し、今日でちょうど10日。
普通にSEO対策を施し、普通に運営して、どの程度まで行くのか記録をつけてみる。
ちなみに、今回のタイトルに「検索ランキング2」となっているが、1は既にほぼ完了なので、後日適当にアップするつもり。まぁ、2サイト目ということで。
さて、もうだいたいお分かりだと思うけど、サイトのスペックから。
ジャンル：ゲーム攻略
月間検索回数：602975回 （“キーワードアドバイスツール・プラス ”調べ）
ってなカンジで。
で、肝心のランキングはというと。
検索ランキング
Google ： 26位
YST ： 51位
MSN ： 85位
Goo ： 24位
fleshEYE ： 109位
総合ポイント ： 20ppp
まぁ、10日目ならこんなもんか。
尚、今回使用した“キーワードチェックツール ”だと、いろいろ反応しない部分があったので、
50位以下は人力検索をした。
今回、訳あってドメインを2つ使ってしまってるのだけど、なぜか、YSTだけメインではないドメインが引っかかってた。この辺もなにかあるのだろうか…。
ちなみに、一日来客数は平均500人くらい。単純に検索だけでいったら300人くらいか？
前回のサイトでは、リンク先から人が来ることがほとんどなかったので、ちょっとオドロキ。
金曜の夕方～日曜日くらいが来客のピークなのは前回のと一緒。
っていうか、他サイトも同様か。
2～3月は検索回数も減るという事で、来月くらいからどうなるのか。
ゲームのピークは過ぎてるだろうけど…。
（追記）
今回は幅広いキーワードを、ということで単体キーワードのみの結果だったが、メインキーワードである“攻略”を付け足したところ、“キーワードチェックツール”で14位をたたき出したGoogleで、実際表示が4位になっていた。
挙動がおかしいと思い、グーグルダンスチェッカー を使用してみたところ、12サーバー中、6サーバーで10位になっていた。グーグルダンス中なのか？
燃える野獣と…氷
過去、6度にわたってCSSについて紹介してきたが、
「あまり凝ったデザインでなければ、これまでの記事でだいたいイケるんじゃないの？」
などと思ったんだけど、どうだろう？
さて、前々回、
「画面を左メニューと右コンテンツに分ける場合、floatのleftとrightを使う」
と説明したけど、これを覚えたての頃、コンテンツを更に左右に分ける際にも、
これを使おうとしていた。
それは別に構わないのだけど、その時のレイアウトというのが、同じデザインのパーツが横2個×縦4個に並んだレイアウトだった。
「左右2つに分かれたレイアウトにはfloatのleftとrightを使う」と思い込んでいたからだ。
でも、ここの問題はfloat: left; のみを使って解決できる。
一見して上で書いた2つのことは、同じようなことを言っている。
でも、明らかに違うのが、上は各々両端にくっついたレイアウト、下は横幅が同一の物が隣接したレイアウト。
タグで書くと分かりやすいだろう。要は、
【CSS】
#oowaku {
width: 600px;
}
.kowaku{
width: 300px; float: left;
}
【HTML】
<div ID="oowaku">
<div class="kowaku">コンテンツ01</div>
<div class="kowaku">コンテンツ02</div>
<div class="kowaku">コンテンツ03</div>
：
<div class="kowaku">コンテンツ08</div>
</div>
これで解決だ。
どういうことかというと、横幅600pxの大枠の中に、
横幅300pxの小枠コンテンツを配置する。
2つめは1つめの右側に並ぶけど、3つめは並びきれずに左下に、4つめはその隣に…
を繰り返す。
さらに、.kowakuの横幅を200pxにすると、今度は3つめは2つめの右側に並び、
4つめはオーバーフローして、左下（1つめの下）に並ぶ。
これこそが、CSSレイアウトの醍醐味だろう。一発OK。
尚、上では全部<div>タグを使ったので、あまり見栄えは良くないけど、
これを<p>タグや<li>など使うと、とってもスマート。
といことで、あまり変にレイアウトに懲りすぎず、「float: left；で一発解決」が望ましいという事だ。
そういう事か？
男一匹花一輪…リングに賭けた
いままでTABLEレイアウトの時は特定の箇所をセンタリングするときしか使わなかったような気がするＤＩＶこそが、CSSレイアウトの肝。
さて、解説本なんかを見てると、「汎用属性」とかいって、idやらclassやら出てきて、
もうそこで嫌になるひとも多いはず。
でも、こんなんでヘコたれる人はホント諦めるしかない。
でも、そうも言ってられないので、ざっと説明を。
詳しいことは解説本を読んでもらって、簡単に言えば、
idは1ページにひとつ、classは1ページで何度でも使える、ということだ。
わかりやすく説明すると、
ヘッダーや、フッターなどはページにひとつしかないのでid。
小見出しや小項目は何度も出てくるのでclass。
だいたい、こんなカンジで覚えておいてOKなハズだ。
しかも、（html側で）idに対してclassを設定することができるので、
例えば、
<div id="header" class="text">タイトル</div>
みたいな事も可能。
どういうことかといえば、
汎用できないところはidで設定し、使いまわせるところはclassで設定も可能。
ということ。
このへんはやっているうちに分かってくるので、敢えて深くは説明しない。
では、css側ではどういう記述になるのかというと、
ｉｄの場合は#（シャープ）、classの場合は.（ピリオド）をアタマにつける。
#header {
width: 700px;
}
.text {
font-size: 12px; text-align: center;
}
みたいなカンジ。
これを上のｈｔｍｌと合わせるとどうなるかというと、
横幅700ピクセルの透明ボックス中央に、フォントサイズ12ピクセルの“タイトル”という文字が表示される。
これで、CSSレイアウトはバッチリ！
とまではいかないが、さわりくらいはわかったハズ。
次は元に戻って、floatを使ったレイアウトの作り方編へ。
そして…野獣は甦った
だんだんとCSSに近づきつつこのブログ。
無意味に引っ張りすぎたので、そろそろ本題へ。
TABLEレイアウトとCSSレイアウトの違いは前回述べたとおりだけど、
では実際にCSSレイアウトを組むにはどうすればいいか？
まずは、ページを幾つかのパーツで分けてみる。
基本的な形として、
・ヘッダー
・メイン（真ん中）
・フッター
また、内容となるメインにメニューを追加する際、メインを左右で分けるという事で、
・レフト（メニュー）
・ライト（コンテンツ）
そして、これらを全部囲む
・大枠
大雑把に分けて、この6つ（もしくは4つ）くらいになるだろう。
とりあえず、これらのパーツををDIVで設定する。
ここで注目するのが、「メイン」に入れる「レフト（メニュー）」と「ライト（コンテンツ）」。
これをやるにはどうすれば良いか？
ここで出てくるのが、CSSレイアウトのキモである“floatタグ”だ。
通常、“float”は画像にテキストを回り込ませたい時に使うタグなのだけど、
CSSレイアウトではパーツを配置する時に“float”を使う。
,. -‐'''''""¨¨¨ヽ
(.＿＿_,,,... -ｧァﾌ| あ…ありのまま 今 起こった事を話すぜ！
|i i| }! }} /／|
|l､{ j} /,,ｨ//｜ 『おれはCSSレイアウトを学びに来たのに
i|:!ヾ､_ﾉ／ u {:}//ﾍ いつのまにか画像とテキストの話を聞かされた』
|ﾘ u' } ,ﾉ _,!V,ﾊ |
／´fト､_{ﾙ{,ィ'ｅﾗ , ﾀ人 な… 何を言ってるのか わからねーと思うが
/' ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ おれも 何をされたのか わからなかった…
,ﾞ ／ )ヽ iLﾚ u' | | ヾｌﾄﾊ〉
|／_／ ﾊ !ニ⊇ '／:} V:::::ヽ 頭がどうにかなりそうだった…
/／ 二二二7'T'' ／u' __ /:::::::/｀ヽ
/'´r -―一ｧ‐ﾞＴ´ '"´ ／::::／-‐ ＼ TABLEだとかCSSだとか
/ // 广¨´ /' ／:::::／´￣｀ヽ ⌒ヽ そんなチャチなもんじゃあ 断じてねえ
ﾉ ' / ノ:::::`ー-､___／:::::／/ ヽ }
_／｀丶 /::::::::::::::::::::::::::￣`ー-{:::... ｲ もっと恐ろしいものの 片鱗を味わったぜ…
という、本来の“float”の使い方が分からない人はこちら へ。
（上のAAの元ネタを知りたい人はこちら へ。）
わかりやすく説明すると、
パーツを左側に持ってきたいときは“float: left;”
パーツを右側に持ってきたいときは“float: right;”
という覚え方でほぼ大丈夫なはずだ。
そして、決まりごととして、floatを使った後はclearをする。
本当は、floatのleftかrightか、どちらをクリアするのか、という指定までしなくてはいけないが、
面倒なので“clear: both;”で一発解決。
要は、「leftもrightもクリアする」ということ。
具体的なタグの記述をすると、
#left {
float: left;
}
#left {
float: right;
}
で、次に来るのが流れ的にフッターだとしたら、
#footer {
clear: both;
}
これで大体いけるはずだ。
さて、ここまで来たところで、「なんか、タグの頭に#が付いてるんだけど、ナニソレ？？」
と思った人もいるだろう。
ということで、次回はDIVについてのお話。
姿を見せた…大いなる標的
CSSレイアウトに移行するにあたり、重要な事はやっぱり
TABLEレイアウトの概念を捨てる
という事だろう。
ちょっと違うかもしれないけど、感覚的にいうと、
【TABLEレイアウト】
全体をTABLEというマス目で区切って、配置したい要素をその中にいれる。
【CSSレイアウト】
配置したい要素をDIVという枠にくくって、あとは数値を指定しつつ上から順々に配置する。
といったところか。
ここの感覚の違いでなかなかすんなり行けなかった気がする。
わかってしまえば、どうって事ないんだけど。
また、事前情報で手に入れた
「CSSはHTMLソース通りじゃなくても、SEOに有利なよう好きなように配置できる」
というのも、混乱を招いた。
確かにその通りかもしれないけど、無理に使うわなきゃいけない機能でもないし、極論でいうと内部SEOでそこまで極端な影響はでない（と思う）。テーブルレイアウトでも上位に来るサイトは上位にくるし。
SEO的な部分はまた別の機会で語るとして、
現に、オレが作ったサイトでは、メジャーキーワードを意識したサイトで、
Googleにて約3,030,000件中 の4位だし、
Yahoo!では約5,330,000件中の3位、
MSNでは266,899件中の2位。
いずれもオフィシャルサイトの次だ。
でも、HTMLは表示どおりの順番だし、そこまで気にしなくても大丈夫（なハズ）だ。
若干、話がそれたけど、要は分かってしまえばそれほど難しくないということ。
経験談として、その辺の理解がなかなかできずに敬遠してた部分があった。
ただ、上記の部分さえ理解できれば、もう精神的下地は大丈夫。
ということで、具体的なレイアウト方法はまた次回。
意外と長くなるから困る。
編注）“青き青春編”は作者取材の為、お休みいたします。
遠い照準か…世界への道
3回目にして、やっと本題のCSSに入るわけだけど。
CSSレイアウトへ移行するにあたって、何に戸惑ったかって、
TABLEレイアウトではhtmlソースのみで、コンテンツとレイアウトをするが、
CSSレイアウトでは、コンテンツにｈｔｍｌ、レイアウトにはCSSと切り分けるところだ。
慣れてしまえば、当たり前で、しかも、全然ラクなんだけど、
TABLEレイアウトの概念があると、なかなか難しい。っていうか難しかった。
まず、どういう構造で、どのような手順でつくっていけば良いかが分からない。
そこで、これを買ってみた。
まぁ、結論からいうと、個人的には大変役に立った。
最初にして最大の謎だった、『どういう構造』っていうのが細かく説明されてたからだ。
内容はというと、実際のページを参考にして、htmlとCSSのソースがどういう役割を担っていて、
それをやるにあたっての注意点やポイントとなるタグを赤字で紹介。
そして、なんでそれを注意しないといけないのかが載っていて便利。
とはいうものの、どういうソースになっているかというのには役立ったが、
メニューボタンの製作方法をいきなり <LI> と background-image を使ったやり方で説明している。
初心者にこれはキツイ。
「ある程度さわりは分かったので、中級クラスに行きたい」という人にはオススメ。
という訳で、最初の壁だった「htmlとCSSの組み方」について、今はどうしてるかといえば、
1・ FIREWORKS でほぼ完全なレイアウト（デザイン）をつくり、パーツを書き出す。
2・ ヘッダー（メニュー）等、ある一括りのｈｔｍｌをDREAMWEAVER を使っておおまかに組む。
このとき、レイアウト情報は入れず、コンテンツ内容だけにする。
例）
<h1>タイトル</h1>
<div id="menu">
：
3・ そして、コンテンツ内容に対応したCSSをプレビューしながら、タグ打ちで作成。
4・ 完成形に近づける（2～3 繰り返し）
5・ 完成
ポイントは 「臨機応変に対応する」 これに尽きる。
TABLEレイアウトと違って、ちょっとサイズを間違えるとレイアウトがガタガタに崩れる。
ちょっとミスが大惨事を招く（おおげさ）ので、数値は計算機を使ってしっかり算出するのも必須。
でも、「合ってるはずなのにおかしいなぁ」という時もあるので、
そういう場合は、とりあえず完成させて、次の機会になんとかする。
数をこなすとだんだんわかってくるので、そういう力技があることも覚えておくと気がラクだ。
次回は、「TABLEレイアウトだったらどんなにラクだったか…」と思ってしまった、“青き青春編”で。
そして、帰ってきた…
思い出したので、もう一点。
コンテンツごとにフォルダを分ける
独学でWEBを学んだ人にはありがちかもしれないけど、
index.htmlもプロフィールもギャラリーも全て同一階層に置いて、
imagesフォルダの中に全部の画像を置いてしまうというやり方。
ページ（ファイル）数が少ない分には問題ないだろうけど、
多くなってくるともう収集がつかない。
そこで、コンテンツごとにフォルダ分けをし、そのコンテンツだけでしか使わない画像ファイルは
各フォルダごとにimagesフォルダを用意して、その中に格納する。
それだけでもだいぶ管理しやすくなって便利。
ふつうに考えれば分かることだけど、コノ発想ハナカッタワ。
これでサイトの中もほんまスッキリや。
今回もCSSについて触れなかったなぁ。
また次回で。
さらば・・・古き愛しきものたち
とりあえず、それなりにオールCSSレイアウトのサイトを普通に作れる程度にはなったので、
結構ハマったTABLEレイアウト脱却時の事とかを書いてみようかと。
と、その前に。
WEB業界に入ってから知った、普通にWEBを作っている人には当たり前かもしれないけど、知っているともの凄く楽になるポイントを。それは、
ヘッダー（メニュー）とメインとフッターを切り分ける
これだ。
初めてこれを聞いて実践した時の感動っぷりといったら、もう。
要はパーツパーツで分けて製作っていう事なんだけど。
今まで、ひとつの大きなテーブル（この時はまだTABLEレイアウトだった）にガンガン詰め込んでいたけど、このやり方を教わってから、ページの使い回しが相当楽になった。虜。
独学でWEBを始めたオレのような人は陥りやすいので、これを抑えておくだけでもだいぶ違う。
TABLEレイアウト時に覚えた作業だけど、この感覚がないとCSSレイアウトに移行する際、若干戸惑うと思うので、知らない人は覚えておくとお得。
ありがとうTABLEレイアウト。そしてサヨナラだ！
次はもう少しCSS寄りな話を…。