2010年12月23日

【第13回】CSSのクラスの調べ方

今回は、少し話題を変えてみたいと思います。

題して『CSSのクラスの調べ方』。

Seesaaブログである場所のデザインを変更したいとき、CSSのどの部分を修正すれば良いのか。
その調査の方法を説明したいと思います。


例えば、カレンダーに枠線を追加したいとき、CSSのどの部分を修正すれば良いのでしょうか?

その方法は第9回で解説した通りなのですが、自分で調べる時はどうすればよいのでしょう?


その答えは、自分のブログのHTMLソースを見てみるです。

HTMLのソースを見ることによって、ブログのどの部分にどのCSSが適用されているのかが分かります。
従って、修正すべきCSSが分かるのです。

それでは、HTMLソースをどのようにして見るかというと・・・

★HTMLソースの表示方法★

<手順1>
HTMLを見たいサイトをブラウザで表示する。

<手順2>
ブラウザの表示ソースを押下する。

SD_013_01.jpg

以上の操作を実施すると、このようなHTMLソース画面が表示されます。

SD_013_02.jpg

表示されましたか?

あとは、この中を見ていけば、適用されてるCSSが分かります。


例えば、先ほどのカレンダー。

HTMLソースの中でカレンダーがどの部分かは、例えば現在ですとブログのカレンダー部分に2010年12月と表示されていますので、HTMLソースの中でその文字列を探してみましょう。

SD_013_03.jpg

ありました、@の箇所です。

この部分にどのCSSが適用されているかですが、ざっくりと見て、A<div id="calendar">が該当しそうです。

そこで、CSSの#calendarという部分を試しに修正して枠線を付けてみると、ちゃんと枠線が表示されることが分かります。

また、通常のサイドコンテンツ、たとえばファンのコンテンツに枠線を付けたいときは、やっぱりHTMLソースでファンという文字列を探してみましょう。

SD_013_04.jpg

Bの箇所ですね。

ファンという文字がC<div class="sidetitle">で囲われているので、サイドコンテンツのタイトルには.sidetitleクラスが適用されていることがわかります。
また、その下のコンテンツにはD<div class="side">と記載されているので、サイドコンテンツの本文部分には.sideクラスが適用されています。

同様に、第8回で解説したタグクラウド。
Eの箇所です。

タイトルには、他のサイドコンテンツと同じく.sidetitleクラスが適用されているのが分かります。
そして本文部分には、F<div class="side-tag">と記載されているので、.side-tagクラスが適用されているのが分かるわけです。

HTMLソースで、どの部分にどのクラスが適用されているのかが分かったら、あとはCSS変更画面でそのCSSを修正して、プレビューしてみましょう。
大体、希望通りの場所に修正が適用されると思います。

SeesaaブログのCSSにはたくさんの定義が記載されていて、それをそのまま見ていても、慣れない方には分からないことばかり。
そんな時はHTMLソースの方を見てみて、修正するCSSにアタリをつけていきましょう。


ちなみに、CSSは通常、以下の書式となっています。

  セレクタ { プロパティ:値; }

そしてこのセレクタには、いくつか種類があります。

HTMLソース上でclass=の形式で設定されているセレクタをクラスセレクタと言います。
例えば、<div class="side">なんかがそうです。
このクラスセレクタは、CSSでは“.”で始まる記述となっています。
従って、sideはCSS上では.sideと記載されています。

一方、HTMLソース上でid=の形式で適用されているものをIDセレクタと言います。
例えば<div id="calendar">
このIDセレクタは、CSS上では#calendarのように“#”で始まる記述となっています。

クラスセレクタとIDセレクタの違いについては、興味のある方はCSSの本などで調べてみてください。

Seesaaブログで、用意されているテンプレートをカスタマイズする場合には、両者の違いはあまり意識する必要はないと思います。

以上、今回は修正するCSSのクラスの調べ方でした。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:CSS HTML ソース
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

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