た け の こ 生 活

アクセスカウンタ

zoom RSS CSSのID

<<   作成日時 : 2005/09/12 03:23   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

今回は前記事に投稿したCSS編集、「新着記事画像の枠線を消す」の説明です。
そんなこと知らなくてもいい、という方は、サクサクっとスルーしてください。(^^;

Webページを表示させるためにはHTML文書が必要です。CSSはスタイルシートの名の通り、HTMLの部分部分を修飾しているものです。どこを修飾するかは、HTMLに定義されている名前(IDやCLASSと呼ばれる)によって関連付けられています。

例えばウェブリブログでは、トップページのタイトル部分には「banner」という名前がつけられていて、そこの大きさを決めたり、画像を配置したりするときは、CSSで #banner{ } の中カッコの中に指定していくわけですね。

この名前はHTMLを作成する人が、ほぼ自由につけることができます。このブログの場合、名前をつけたのはウェブリブログの制作者さんということになります。

ほぼ自由と言ったのは、たいてい英語で指定しているので、どのCSSでもだいたい同じような名前になっているからです。ただしタイトル部分が「banner」になるか「blog_banner」や「title」になるかは制作者によって違ってきます。(ブログの場合はブログツールによって決まる)



前回は新着記事画像の枠線を消したかったので、その部分になんという名前がつけられているかを知らなければなりませんでした。ところが提供されているCSS編集画面にはその記述がありません。
HTMLを見ることができれば、もちろん即わかるのですが、ウェブリブログではHTMLの編集は許可されていないので、ユーザーが見ることはできません。そこで、

推測することになります!

まず「新着記事」部分は「contents」という名前であることはわかります。

次に「画像」。このCSSでは「img」「image」とふたつの語が使われていますが、この新着記事の画像は、クリックするとその記事ページに飛ぶリンク画像になっています。
そしてCSSを探してみると、リンク画像には「a img」という名前がつけられているようです。
以前編集を行った記事ページのリンク画像は「blog-body a img」でした。

そうすると、「新着記事の画像」は「contents a img」ではないかと推測できるわけですね。ではさっそく試してみよう。
あ、一発でうまく行った!! ラッキー!☆彡 (時にはうまく行かないときも多々あり)



次になぜこの場所に記述したかということですが。
もちろん「新着記事」のところに記述しておくのがわかりやすいということもありますが、自分で変更した部分なので、その下の記事タイトルなどよりも上、できるだけ説明の箇所「/*---- 新着記事 ----*/」の近くにおいておく方がいいと思ったんです。
CSSの場合上から順に実行していくので、実際はどこに書いてもいいんですけどね。

上の「#contents{ }」は必ずそのまま残しておきます。
ここは新着記事部分の基本設定、文字の色を変えたり、背景を変えたりするときに必要だからです。記事幅を変更するときにもここを使います。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
CSSのID た け の こ 生 活/BIGLOBEウェブリブログ
文字サイズ:       閉じる