オススメ記事★☆

知らなきゃ損する! 今オススメの記事はコレ↓
【CSSでスタイル変更】背景を変えてみる
【CSSでスタイル変更】背景を変えてみる・2
Yahoo!ブログ検索(Beta)にPingを打て!

これからもオトク情報&コネタ満載でお届けします。初心者必見ですよ〜☆

2006年04月10日

【CSSでスタイル変更】背景を変えてみる・2

こんばんは、ハコです。

この間、「【CSSでスタイル変更】背景を変えてみる」で、全てのリンクのスタイルを変更する方法について書きました。

今日は、リンク以外の文字の背景の変更法と、一部のリンクに変更を加えたい場合についての解説です。

記事本文のスタイルだけを変更する

まずは、「【CSSでスタイル変更】背景を変えてみる」で、「前手順」を確認してくださいね。
用意ができてから、このページに戻ってきてください。

全体に共通のスタイルシートは、以下のようになるのでしたね。

a:hover{
 background-color:#008000;
 padding:2px;
}

でもこれだと、全てのリンクの背景が緑になってしまいます。
それはイヤだ、記事本文だけのリンクにしたい、とか思いますよね?
では、まず自分のブログを開いて、そのソースを見てみてください。
画面で右クリックをすると、大抵どのブラウザでも「ソースを見る」に該当するものがあるはずです。
見たら、そこで検索してみてください。
昨日今日書いた記事の本文の一部なんかがいいですね。
私の場合ですと、「こんばんは、ハコです。」なんかを検索してみます。

たぶん、1つめに引っかかるのは、RSSの部分なのでとばしていただいて、2つめにひっかかったところを見てください。
そのちょっと前、<div class=...とかって書いてませんか?

seesaaなら、<div class="text">、livedoorなら、<div class="main">というのがあるはずです。
重要なのは、このclass="text"の部分、ここで「この括りはtextっていうclassです」と宣言してあります。ここをメモしておいてくださいね。

細かいことは置いておいて、早速やってみますね。
おっと、ちゃんと書く前に、該当部分が既に書かれていないかどうか、検索してみてくださいね。

.text a:hover{
 background-color:#008000;
 padding:2px;
}

前回の内容に「.text 」が追加されただけです。(textの前にドットがあるので注意!)
これは、「textというclassの中の」という意味なんです。
続けて読むと、
「textというclassの中の、aというタグにマウスを乗せたとき」という意味のことが「{」の前に書かれてあるんです。

だから、さっきメモした「class="..」の部分を、お使いのブログの環境に合わせて、この「.text 」の部分を変更すればいいんです。
livedoorなら、「.main a:hover{」ですね。

指定の場所だけスタイルを変更したい

上の方法で思いついた人はいますか?
classの名前は自分で勝手に決められるんです。既に使ってある名前以外のものなら何でも構いません。
それを応用してやればいいんです。

たとえば、、、、

オススメリンクだけ、背景を変えたいとき

いつもかいているリンクタグに、このclass=".."を追加してやります。

<a href="http://infopreneuse.seesaa.net" target="_blank" class="osusume">ぱっくん!情報商材−初心者必見の丸秘情報</a>

↑上の例だと、class="osusume"というのを追加してますよね。
これにだけスタイルシートを指定したいときは

a.osusume :hover{
 background-color:#008000;
 padding:2px;
}

さて〜、osusumeって文字がaの後にきましたね。これは「osusumeというclassが指定されている aタグにマウスを乗せたとき」という意味です。

リンク以外の文字の背景を変えたい

↑これを知りたい方はコメントください。次回に回します。

いっぺんに書くと難しすぎてわかりませんよね?
なので、このへんで。
変更したら、ちゃんと、古いスタイルシートに上書きしておいてくださいね。
ハコでした☆

------
今回の記事は

posted by ハコ at 18:00| Comment(6) | ■コネタ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんばんは!!

さっきまでビール祭りだったリュウです^^;

おお!今スタイルシートいじってるのでありがたいです♪

背景も変えてみようかな??

では、応援クリック♪
Posted by 情報商材の不安解消 リュウ at 2006年04月11日 00:23
はじめまして。

人気Blogランキングからお邪魔しました。

CSSでスタイル変更の話、すごく勉強になりました。

人気Blogランキングの応援クリックして帰ります。
Posted by ネットビギナーの夢をかなえる応援団長! masayume at 2006年04月11日 12:24
こんにちは、たゆです。
分かりやすく説明してくれているのに
いまいちピンときてないたゆ(^^ゞ
変更するとき、ここ来ます・・・。
応援ポチ!
Posted by 物販ブログアフィリエイトで月28万稼いだ方法暴露中たゆ at 2006年04月11日 14:13
こんばんは、回り途中下車?!
時間が…と言いつつもハコさんのところで見入ってます^^
CSS ありがとうございます。
勉強になります。
(ほったらかし)&沖縄にもアコガレル〜
でも、そこに至るまでが大変なのでしょう?
応援★
Posted by ★0からブログ体験中★ネットで小遣い稼ぎ、副収入Get !! ミナ.リッチ at 2006年04月11日 22:05
しのっぷです。
お久しぶりです!!
CSSが詳しく載ってますね〜!!
僕も勉強しようかなぁー。
ではまた勉強しに来ます!!
ポチっと!!
Posted by へたれアフィリエイターしのっぷ at 2006年04月13日 12:32
最近、仕事が忙しくなってきたハコです……(−−;

リュウさん>
なんか盛り上がってますよね〜
いいなぁ。
今日私は桜を見てきましたよ☆

masayumeさん>
たぶん二回目のご来訪ですよね、いらっしゃいませ。
お役に立てたら光栄です。

たゆさん>
ええ、理解できなくていいので見ながらやってください。
でも覚えた方が楽ちんですよ。

ミナ、リッチさん>
ほったらかし、買ってしまいましたよ…とほほ。
今日から実践する予定なのです。
前のもまだやりきってないんだけどなぁ。

しのっぷさん>
自分流デザインを求めるならやっぱり必要ですよね。
真似から始めるといいですよ

Posted by ハコ@ぱっくん!情報商材 at 2006年04月15日 20:22
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。

ぱっくん!情報商材−初心者必見の丸秘情報★トップページへ戻る

×

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