★ソラマメのオリジナルテンプレートの使い方 -Case.6-

Lovely Wolf

2008年02月21日 12:20



【第 8 話】 ソラマメのオリジナル★テンプレートのリンク文字の色を見た目Cool にしてみたい!- スタイルシート編集編 -


★キミはセカンドライフでお友達契約するとき、見た目セクシーなお嬢さまと、見た目おばちゃんな女王さまのどちらを選ぶだろうか?

・・・友達を選ぶという行為自体、なんだかんだいうヤツもいるかもしれないが、実は誰だって無意識のうちに選んでるんじゃなかろうか?曙太郎に激似の長澤まさみと、夏目ナナに激似の浜幸せんせのいずれかと一生を共にせよ!なぁんて言われた日にゃ、浜幸だけど夏目ナナとならっていう快楽的妄想を膨らませる男性読者ばかりじゃないだろうか?いくらなんでも、・・・その、曙と夜を共にするワケ???

・・・世の中は、見た目に左右されるようにできている。セカンドライフは見た目だけっていうウワサもあるし。そして、男なら誰もが憧れるナースのお姿を拝見したとき、その男の脳内物質はすでに鼻から垂れ流しモードに入っているに違いない。

# BDSM Club Japan
<SL Url> secondlife://Susukino/220/37/31/



★野獣のようなナースをセクシーと感じるAvatar がいる一方で、恥じらいを見せる美少女をセクシーと感じるAvarar もいる。どうぞお好きなほうをお選びください。

# BDSM Club Japan
<SL Url> secondlife://Susukino/220/37/31/



★目の保養も済ませたことだし、そろそろいつものヤツでもやりますか。本日のお題は、「リンクテキストの色を見た目Cool にしてみる。」です。- by Lovely Wolf -


【ソラマメのオリジナルテンプレートの使い方 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e135832.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e136709.html
# Case 3.<Web URL> http://lovelywolf.slmame.com/e140178.html
# Case 4.<Web URL> http://lovelywolf.slmame.com/e142021.html
# 夜の診察室 Case 1.<Web URL> http://lovelywolf.slmame.com/e144955.html
# Case 5.<Web URL> http://lovelywolf.slmame.com/e147730.html


★いつものように、「オリジナルテンプレート2カラム(サイドバー右)」を使って、サイドメニュー「ブログの設定」-「テンプレート」を選んでから、「カスタマイズ」(赤アミ部分)をクリック。




★保存しなくても少しいじるたびに、「プレビュー」を見れば、編集状況がすぐにわかるようになっている。




★では、今日のレッスンではリンクを張った文字の上にカーソルを合わせたとき、文字の色を変化させる方法を紹介しよう。




★デフォルトのリンク文字は、青や紫色になっていてCool どころの話しじゃないゼ、まったく。

・・・どこをいじったらよいのか、じつはすでに決まっていて、スタイルシートに以下の赤字部分を追加するだけだ。このとおり操作するだけで、通常は水色、マウスオーバーでピンク色に変わるようになる。俺のブログは、通常は水色、マウスオーバーでグレーだから、読者の皆さんは自分のブログのデザインに合わせて変えてみるだけさ。ねぇ、簡単でしょ?

・・・といっても、スタイルシートのどこを修正したらよいのかお悩みの方は、# Tips 2. も参考にしてみてください。検索する文字は「リンクカラーの設定」です。
<Web URL>http://lovelywolf.slmame.com/e136709.html


/* ************************************************
* リンクカラーの設定
* ************************************************ */

/* 全般 */

a{color:#00FFFF;text-decoration:none;}
a:link{color:#00FFFF;text-decoration:none;}
a:visited{color:#00FFFF;text-decoration:none;}
a:active{color:#FF33CC;text-decoration:underline;}
a:hover{color:#FF33CC;text-decoration:underline;}


# Tips 7.
「color」と「text-decoration」

色の書き方は2 通り

color: #FFFFFF;・・・・・・・・・・ホワイト
color: #000000;・・・・・・・・・・・ブラック
color: white;・・・・・・・・・・・・・・ホワイト
color: black;・・・・・・・・・・・・・・ブラック

「スタイルシートでの色の指定方法:スタイルシート(CSS)辞典」 - HTML タグボード -
<Web URL> http://www.dspt.net/stylesheet_css/001/006.html

「HTML - 色一覧」
<Web URL> http://www.page.sannet.ne.jp/mtoga/html/bih-h_x1.htm

下線の書き方

text-decoration: none;・・・・・・下線なし
text-decoration: underline;・・・下線あり

【オリジナルテンプレート講座】