ブログ練習帳

ちょっとだけSEO パーマリンク

普通のサイトを作ってるとき、すこーしだけ、SEOのこと、勉強しました。やっぱり、せっかく作ったサイトが、誰にも見られないんじゃ、ちょっとさびしいし・・・。本を読んだり、人に聞いたりして、できそうなのからトライしてみました。でも、SEOって、ほんと、企業秘密っぽいところが多いから、一般的なのは調べることできるけど、なかなか教えてもらいにくいし、真偽ほども、あやふやなのもあって、難しい分野と思いマース。

ということで、駆け出し見習いには、敷居の高いところではありますが、カンタンなのだけ、一般的なのだけでも、押さえておくだけで、ずいぶん違うといいます。まったくSEOしないのと、よく知られてる一般的なSEOだけをしているのでは、雲泥の差と聞いたことがあります。こういう、都合のいい話には、目ざとい新米です。(だから、深くはわからなくてもいいやと、都合よく解釈。)

で、今日取り組むのは、パーマリンクです。普通のサイトでも、HTML(そのほかにもファイルの種類はあると怒られそうだが)のファイル名が、英語で内容を示したものだと、SEO的にグッドだと聞きました。それからファイル形式も静的なHTMLのほうが、PHPとかよりいいとか(PHPを勉強しない言い訳)。たとえば、連絡先について書いてあるページは、contactus.htmlとかだと、renraku.htmlとかより、いいそうです。必死に英和辞書を引きまくる見習いですが、Word Pressの場合、デフォルトだと、？マークで始まるへんな文字列のファイルが生成されてしまいます。これが動的ページっていうのねー、と感心している場合ではないそうで・・・。

これを解決してくれるのが、パーマリンクです。Word　Pressの管理画面の設定からパーマリンク設定を選びます。パーマっていうくらいだから、髪の毛がくるくるになる、っていうんじゃなくって、永続的なリンクを作成してくれるって意味でしょうか。静的ページっぽく見せる設定みたい。で、デフォルトでは、？プラス数字みたいな感じになってますが、ここでお好みの規則を選択できます。グーグル先生にお伺いを立ててみると、いっぱい情報が出てきますが、何が何やら。でも、きちっとそれっぽい名前がつきゃ、いいじゃん、くらいで、見習い、取り組みます。長すぎるのだめ、とか、全部の単語、ずらずら並べたのだめ、とか、ありすぎで、よーわかりません。でも、初心にもどって、「まったくやらないより、ちょっとだけやるのがいいのがSEO」です。で、一般設定の中なら、こまかいこと、考えずに、選ぶだけで、パーマリンクの規則が決められます。調べれば、カスタム構造のところで使えるタグ一覧とかがあって、投稿者の名前とか、カテゴリ名とかそういったものを読み込むタグを使って、独自にパーマリンク名規則を作れます。

とりあえず、すぐに使えるのから、どれにしようかなー、と一つ一つクリックして確かめます。なんか、数字だけっていうのは、ちょっとつまらないかも。毎日毎日、たくさん投稿があったりすると、わざわざリンク名をか考えずにすむし、いいかもしれないけど、私の場合、ちょびっとしか投稿しないし、できるだけ英語で内容を示した名前にしたいと思います。ということで、「日付と投稿名」にしました。この「投稿名」っていうのは、投稿タイトルから生成されるもので、「投稿スラッグ」というようです。投稿編集画面でパーマリンクのところに表示されているのが確認できました。このページだと、「pc.beginners-luck.net/pcwp/2011/11/06/ちょっとだけSEOパーマリンク/」です。で、実際に公開してみると・・・。
ありゃー、呪文だ！
そもそもURLは、基本、英語なので、日本語で投稿タイトルを入れると（まあ、私の場合、普通そうなる）、文字化けのようになってしまい、％だの数字だの、呪文のようなのができあがってしまします。投稿編集の画面では、日本語で表示されますが、実際にWeb公開してみると、ぶっぶーです。別にいいっていえば、それまでですが、じゃ、なんのためにパーマリンク設定したのか、意味不明です。

気を取り直して、投稿編集画面に戻ると、パーマリンクの横に、「編集」ってボタンがあります。ここを押すと、この「ちょっとだけSEOパーマリンク」の部分が編集できまぁす。辞書を出してきて、パーマリンクを英語に直してみました。「permalink」って書くんですね。英語の勉強もできました。で、ここに「permalink」と書いて「変更」を押してから、公開されているページへアクセスすると、きちっとpermalinkでアクセスできます。やったー。ちなみに、この名前、投稿編集画面の下のほうにある、「スラッグ」と同じになります。どちらかを編集すると、両方変更されます。

それから「投稿名」をパーマリンクに使うと、固定ページのほうも、タイトルが日本語だと、呪文のようなURLになってしまいます。固定ページのほうも、同様に、管理画面の「固定ページ」から各固定ページの編集画面に入って、パーマリンク設定のところを英語(アルファベット表記)に修正しておけば、OKみたいです。

一回一回、パーマリンク用に、スラッグを考えるのが、面倒な気もするし、もし、忘れると、変なURLができちゃうのは、なんか解決策がありそうな気がしますが、とりあえず、見習いは、退散です。それから、幸か不幸か、まだ、非リンクなしなので、パーマリンクを変えることで、せっかくいただいたリンクが切れるということはおきてませんが、もっと後になると、そういった問題もでてくるだろなーと思います。そういったことは、自動変換プラグインがあるようです。こういうことで逆に悩んでみたいと思う見習いです。えーん。

追加　パーマリンクの設定で「日付と投稿名」にすると、同時に「カスタム構造」のところに「/%year%/%monthnum%/%day%/%postname%/」と入力されてます。ここの部分を「/%year%/%monthnum%/%day%/%postname%.html」に書き換えると、本当に静的ページみたいに拡張子がhtmlのファイルが生成されるので、ちょっとみブログっぽくてカッコいいかもです。

2011年11月7日12:14 AM| カテゴリー： 見習い奮闘記| コメント (0)

CSSのカスケード(2)詳細度の計算

ということで、もっとCSSのカスケード、実験ですう。

今回つかうHTML

<div><div><div><div><div><div><div><div><div><div><div>

<div><p class="p_class">あいうえお</p></div>

</div></div></div></div></div></div></div></div></div></div></div>

CSS No.1

div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、すべて1点の要素が10で、10点、下は11点。で、下のあか。

CSS No.2

div div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、すべて1点の要素が11個で、11点。下は10+1の11点。単純に足すと同じ11でも、下のあか。この上のほうの11点って、16進法的に言うなら、bと書いたほうがいいのかも。だから、a点と11点で、11点が大きいと。

CSS No.3

div div div div div div div div div div div div p{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、1点の要素が13個で、13点。でも、これって16進法的にいうならd点。下は、11点。で、下のあか。

CSS No.4

div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}
p#p_id{
	color:#F00;
}

上は、クラスが12個あるので、120点。でも、これって、10の桁が12個で16進法的にいうならc点。それに要素が13個あるので、13点だけど、これはd点。だから、ここは133点っていうより、cd点というほうがいいのかな。下は、101点。で、比較の結果、下のあか。

CSS No.5

p#p_id{
	color:#F00;
}


div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}

上は、101点。下は、cd点。やはり、上のほうが点数が高い。あか色です。No.4が、あかだったのは、あとから書かれているほうに上書きされたからじゃないようです。

CSS No.6

p#p_id{
	color:#F00;
}

div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p.p_class{
	color:#090;
	background-color:#000;
}

上は、101点。下は、クラスが13個、要素が13個で、dd点。で、上のあか。

CSS No.7

.p_class {
	color:#f00;
}
div div div div div div div div div div div div {
	color:#090;
	background-color:#000;
}

上は、クラス1つで10点。下は、要素12個で12点だけど、c点。で、上のあか。

CSS No.8

.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 {
	color:#090;
	background-color:#000;
}

上は10点。下はクラスが1個で10点、プラス、要素が12個。だから、下は、1c点。ということは、下のほうが点が高い。のに、あれー。上のあかだ。

CSS No.9

.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

上は、10点。下は、クラスが1個で10点、プラス、要素が13個。だから、下は、1d点。あれ、今度は、下のみどりになってる。

CSS No.10

div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

No.9と詳細度は同じですが、順序を上下逆にしても同じ。あとからきたのが、上書きってわけじゃないみたいだ。

CSS No.11

div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

今度は、順序はNo.10と同じですが、上のdivを1つ消して、クラスが1個で10点と、要素が12個で、1c点。下はクラス1個で、10点。クラスと要素の数の関係や点数はNo.8と同じなのに、挙動が違う。上のみどりです。

見習い、もう、わかりません。W3Cのサイトも、日本語のページも、ほかの方のサイトも、一生懸命探したけど、これについての記述がどうにも見つかりません。「点数で、10進数に見立てるなら」という部分についての記述は、ところどころに書いてあるのですが、この、最後の部分のNo.8以降のところについては、説明が見つかりませんでした。探し方が、悪いんでしょうか・・・。ただ、ちょっと思ったのですが、今、私が書いたHTMLでいうと、P要素についてのスタイルを決めようとしています。だから、「詳細度」という意味で言うなら、「どれだけくどく書いているのか、特定しようとしている意図が強いのはどれか」ということが「詳細度」と考えると、P要素に言及したセレクタの書き方をしているほうが、詳細度が高いと考えるのでしょうか・・・。はて。

追加　念のため追記ですが、ブラウザによって挙動が違う?と思い、チェックしてみました。IE8と、FireFox5.01で見ましたが、はやり同じです・・・。

2011年11月6日5:32 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

CSSのカスケート(1)スタイルの優先順位

CSSを書くとき、IDとかclassで指定していきますが、思うような動きをしてくれないときがあります。スペルミスとかできちっとCSSが指定できてないってことはないのに、なぜか、うまく反応してくれない・・・。はてー。となります。とりあえず、指定するセレクタを長くしてみると、反応した、っていうこと、結構あって、なぜにぃ～と思います。基本は、後から書いたほうが上書きするとか、クラスやIDに点がついててその足し算したのが、関係してるらしい、ということまではなんとかなったんですが・・・。で、調べなきゃ、永遠に「駆け出し」も「見習い」も取れないよー、と勉強ですぅ。

ということで、前々から気になっていた、本家本元のW3Cのサイトを見てみました。ひぇー、英語じゃん。って当たり前ですね。すんません。翻訳サイトとかも見ながら、英語、読んでみました。

スタイルの優先順位(CSS2.1の場合)

1. ブラウザ＜ユーザー＜製作者＜important付き製作者＜important付きユーザ
2. セレクタの詳細度がより高い方が、詳細度が低いほうを上書きする。
3. セレクタの詳細度が同じ場合、あとからかかれたものが優先される。

詳細度の計算方法は、セレクタを点数付けすする。点数は、style=””で記述した場合、1000点、ID属性ひとつあたり100点、その他の属性および擬似クラスがひとつあたり、10点、要素および擬似要素ひとつあたり1点。これを足し算して、大きいものが優先順位が高くなるということです。

ただ、ここで、気がついたのですが、これを100点、とか、10点とか、考えないほうがいいような気がしてきました。本家サイトによると、style=””で決めたら、A、IDでB、その他の属性等でC、要素等でDとして、それをABCDのように4桁の数字に並べるのだと書いてあるようです。だから、たとえDである要素が10個集まっても、繰り上がってCのクラスと同等になるということではないような・・・。

ということで実験です。

HTMLのソースはこちら

<div id="d_id" class="d_class"><p id="p_id" class="p_class">

あいうえお</p></div>

CSS No.1

p{
	color:#F00;
}

まず、最初、文字が赤いです。

CSS No.2

p{
	color:#F00;
}
p.p_class{
	color:#090;
}

上は、1点、下は1+10で11点。で、下のみどり。

CSS No.3

p.p_class{
	color:#090;
}
p{
	color:#F00;
}

上は、11点、下は1点。で、上のみどり。

CSS No.4

p#p_id{
	color:#090;
}
p{
	color:#F00;
}

上は、101点、下は1点。で、上のみどり。

CSS No.5

p#p_id{
	color:#090;
}
p.p_class{
	color:#F00;
}

上は、101点、下は11点。で、上のみどり。

CSS No.6

p#p_id{
	color:#090;
}
div.d_class p.p_class{
	color:#F00;
}

上は、101点、下は22点。で、上のみどり。

CSS No.7

p#p_id{
	color:#090;
}
div#d_id p.p_class{
	color:#F00;
}

上は、101点、下は112点。で、下のあか。

CSS No.8

p#p_id{
	color:#090;
}
div#d_id .p_class{
	color:#F00;
}

上は、101点、下は111点。で、下のあか。

CSS No.9

p#p_id{
	color:#090;
}
div#d_id p{
	color:#F00;
}

上は、101点、下は102点。で、下のあか。

CSS No.10

div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、102点、下は101点。で、上のあか。

CSS No.11

div#d_id {
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、101点、下は101点。で、下のみどり。

CSS No.12

#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、101点、下は101点。で、下のみどり。

CSS No.13

div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、102点、下は101点。で、上のあか。

CSS No.14

div#d_id p{
	color:#F00;
}
div p#p_id{
	color:#090;
}

上は、102点、下は102点。で、下のみどり。

と、いくつも例題をやってみることで、なんとなく、見えてきたような。ということで、こんどは、もっといろいろといてみようと、思う見習いですが・・・。乞うご期待？

2011年11月6日3:37 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)