スポンサーリンク

ドメイン別 CSS の設定方法

CSS

CSS ではドメイン別にスタイルを設定することができます。
これを知っていると何かと便利ですので覚えておきましょう。

多く使われる例としては、自サイト内へのリンクの色と、他サイトへのリンクの色を設定するなどがあります。
応用としてはサイトに動画を貼り付ける際に Youtube と Niconico でサイズなどを設定するなどがあります。
以下のように記述します。

タグ名[属性名*="url"]{
装飾内容記述
}

ではリンクの色の設定を例に説明致します。
当サイト「http://helpsupport.blog.fc2.com/」へのリンクを赤、
外部サイト「http://kazuugna.blog.fc2.com/」へのリンクを青とします。
CSS に以下のように記述します。

a[href*="helpsupport.blog.fc2.com"]{
color: red;
}

a[href*="kazuugna.blog.fc2.com"]{
color: blue;
}

このように設定することにより HTML ではカラー設定しなくても色分けが適用されます。
次のようにどちらも HTML には何も装飾しない普通のリンクとして記述します。

<a href="http://helpsupport.blog.fc2.com/">http://helpsupport.blog.fc2.com/</a>
<a href="http://kazuugna.blog.fc2.com/">http://kazuugna.blog.fc2.com/</a>

次のように表示されれば成功です。

http://helpsupport.blog.fc2.com/
http://kazuugna.blog.fc2.com/

これを応用する事によりアイデア次第で様々なことが出来るようになるので、是非とも使いこなしましょう。

スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________
net PV
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。