2006年01月09日

無理をしてみた

ネタが無いのでスタイルシートの解説をしようと思った小生である。

果してどうなる事でしょうか?


といってもドコまで掘り下げればよいのか分からないので、好き勝手書く事にする。

どんなものかというのは、ブログをやっている方なら管理画面のスタイルシートの項目を見れば分かるので

もはや常用的な知識なのだが、カスタマイズに力を入れない限りは何気に知らない事も多かったりする。

各いう小生も知らないことばかりである。


ともかく書きたい事を書いていこう。

スタイルシートの表記には3種類のものがある。

 

1.タグ要素

タグ自体のデザインである。html内で指定したタグを打つたびに自動的にスタイルシートで設定したデザインになる。

たとえば、h1タグのサイズをそのままだとしてもデフォルト設定だと行間が開き過ぎて結構困る。

そういう場合はmarginを適度の間隔に設定したりするといい感じに表示される。

CSS上には以下の感じで記載していく。

h1 { margin: 0px; }


気づきづらいところでは、bodyタグやimgタグなどがある。

例えば画像を表示させる場合にいちいち

<img src="画像URL" width="横サイズ" height="縦サイズ" border="0" alt="画像タイトル" />

といった感じでbordar="0"を入れている人がブログを使っている人でも多いが、

この場合はCSSで

img { border: none; }

と設定してやると以降画像ごとにborder="0"を打つ必要が無くなる。

・・・・・・・・タグ要素以外の説明しづらくなったので以下は作成中のサイトのソースを使って解説する。

<div id="side_1">
<img src="画像URL" alt="カテゴリ" width="224" height="23" />
  <div class="menu"><img src="画像URL" alt="" width="12" height="12" /><a href="リンク先">サイト作成希望編</a></div>
  <div class="menu"><img src=画像URL" alt="" width="12" height="12" /> <a href="リンク先">GetMoney!純情編</a></div>
<img src="画像URL" alt="" width="224" height="9" /></div>

上の画像部分が、リニューアル後のサイトのカテゴリ欄である。下にはそのソース。

図らずも小娘みたいな色合いのブログに変貌を遂げる事がばれてしまったわけなのだが、

姑みたいに細かいことを書くと

デザインに使う画像の場合もalt属性は入れたほうが良い。その場合は""といった感じで空で良いと思います。

また画像のサイズしてはした方がページの表示が速くなります。


余談だが、検索エンジンではアフィリエイトリンクを嫌う傾向にある。その判断基準の1つとして広告バナーサイズを見ているようだ。

広告のバナーって大体サイズが決まっているので、これで唾棄すべきアフィリエイトページをはじく事が出来るわけである。

したがって、たとえば480x60のバナーのサイズを合えて微妙に変更して表示させる・・・・というのも地味なSEOテクニックかも知れない。

誰も実践していなそうだし、これを提唱している人間に出会った事もないので、効果のほどは知りませんが。

まぁ、小手先のテクニックである。

こんな事を感がえている奴は大成しないだろう。

もうひとつ。

<img src="画像URL" alt="" width="224" height="9"/>のように/>の閉じた括弧の前にスペースを入れる癖を付けたほうが良いでしょう。これから主流になるソース表記ではこれが推奨されています。

実際の表記上は全くどうでも良い話なのですけれども。


前置きが長くなったが、上記のソースに対しての小生が作成したCSS表記が以下のとおりである。

ココからが本題なのだ。

#side_1 {
background-color: #FED6EA; ←背景色
margin: 5px 0px 0px; ←マージン、上は5pxで他は0px
padding: 0px; ←余白全部0px
width: 224px; ←横幅指定
font-size: 12px; ←文字のサイズ
line-height: 14px; ←文字の行間
}

side_1のようにデザインの大枠に使う場合ソース上では id="side_1" という感じでidを使って対応させる。

idに対応するCSSの表記は#side_1といった感じで識別文字列の頭に#をつける必要がある。

前述のタグ要素のときはそのまま表記できたのでこの辺に違いがある。


#side_1 a:link, #side_1 a:visited{
font-weight: normal;←文字の太さ
color: #336699;←リンク文字の色
text-decoration: none;←アンダーライン当の設定、ココでは無し
font-size: 12px;←文字のサイズ
}

#side_1 a:hover{
color: #336699;
text-decoration: underline;←アンダーライン当の設定、ココでは有り
font-size: 12px;
}


リンクのデザイン設定である。a:linkというのは通常時のリンクのデザイン、a:visitedというのは一度クリックしたリンクのデザイン、a:hoverというのはカーソルがリンク上あるときのデザインである。

本来ならば、

a:link {     }
a:visited{     }
a:hover{    }

の3つの表記になるはずだが、ちょっと複雑になっている。

小生は、一度訪問したページのリンクの色が変わるのが嫌いなタイプなので、訪問前も訪問後もCSS上は全く同じ設定である。

この場合、2つの同じデザインをまとめて表記できるのだ。

具体的には

a:link, a:visited{     }

という感じで間に”,”を打つ事で表記可能である。


また、通常a:linkをCSSで設定するとそのページ内のすべてのリンクデザインが統一して表記されてしまう。

しかしながら実際は部分的にリンクのデザインを変えたい時がある。

そういう場合には

○○ a:link{    }

と表記することが出来る。

小生の例場合は

#side_1 alink{   }

と表記しているが、これは<div id="side_1">〜</div>で囲まれた範囲内のリンクの場合は、このデザインを適用するというものである。

これはリンクに限らずタグなら何でも使用可能である。

例としては
○○ h1{     }
○○ img{     }
○○ p{     }

といった感じである。これを知っているとタグやCSS関係が大変すっきりする。


.menu {
padding: 0px;←余白
margin-top: 2px;←マージン上
margin-left: 5px;←マージン左
}


ソース上でid=""ではなくてclass=""を用いる場合はCSS上は識別文字列の頭に"."をつけて表記する。

IDとの違いが分かりづらいが、同じIDは1つのページに付き1回しか使用できなく、

CLASSは何度でも使用可能と考えておけば間違いはない。

同じIDを1ページで多用してもキチンと表示されるが、文法上は間違いである。


こんな感じで、CSSにはタグ要素、ID要素、CLASS要素の3種類がある。

 

・・・・・・・・・・・というわけで、解説記事はやっぱり長くて時間が掛かる。

そして何より小生らしくない

対象にする人物像も設定できていないし、やっぱり向いてないなぁと思ったのであった。

posted by れいえん at 19:34| Comment(0) | TrackBack(0) | サイト作成希望編 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/11502475

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。