「Tags」をいじってみる。 その2
6/14追記。(及び修正)
atamoriさんからコメントもらいました。
「.TAGS」は大文字で書かないと反映しないようです。
そういえば私のCSSも元々エキサイトのが大文字だからという理由で、大文字で書いてるのでした(^^;
本来「基本的に 半角英数字 のみを用いる」ものだと言うので、記事は小文字で書きなおしてUPしたのです。エキサイトはなぜ大文字なんでしょうね。
TGASのクラスの設定「DIV.TAGS」がエキサイト内にあって、ユーザーは「DIV.TAGS」ではなく、「.TAGS」で記述するのですが、大文字小文字を識別するとは思ってなかったのです。ごめんなさい。
継続させる必要があるっぽい?と言うことで、昨日の記事も含めて「.tags」を大文字「.TAGS」修正しました。
ayamoriさんお知らせありがと~!
そのまま使うと、文字が詰まってる気がする「Tags」に余裕をもたせます。
記事と同じ行間でTagsが入るのが、私はちょっと気になるのです。
もう少し本文と離して表示したい。
新しく記事を書くときは最後に2行ほど改行を入れてスペースを取ってたのですが、過去の記事にタグだけ入れるときが面倒。
そこで、ここにスペースを加えるようにCSSで設定しておきましょう。
.TAGS{margin-top:2em;}を書き加えるだけ。
「em」というのは「大文字の高さを1とする」と言う意味なので、2emでほぼ2行分のスペースが入ります。もっと広げたければ数字を大きくしてください。
ついでに
Tags: スキン編集
↑こんな風に「Tags:」だけ太文字にして、キーワードは普通の太さにする方法。
これはまず「.Tags」にfont-weight: bold; (太文字の指定)を入れます。
さっき2行分のスペースも入れたのと一緒に書いちゃいます。
.TAGS{ font-weight:bold; /*太文字にする*/
color:#336600;/*ついでに文字の色も変えてみますか*/
margin-top:2em;/*本文との間に2行分の余白*/}
こんな感じでTagsを太文字にします。
ただし!このままだと、Tagsの部分は、タグの単語もすべてが太い文字になってしまいます。
単語の方はリンクになってましたので、リンクの方で設定しなおします。
昨日、単語の間にスキマを入れた部分に一緒に書きます。
.TAGS a{font-weight:normal;/*文字の太さをノーマルに*/
margin-left:6px;/*昨日やった、単語と単語の間のスキマ*/}
これで
Tags: スキン編集
こんな風にTags:だけ太文字にできます。
オマケ
雀屋の今使ってるスキンにはTagsの前に、画像が1つ入ってます。
背景画像に合わせて水滴のつもりなんですけど(笑)
このワンポイントの画像の入れ方は「.tags{}」に画像のURLを入れるのですが。
.TAGS{font-weight:bold; /*太文字にする*/
color:#336600;/*ついでに文字の色も変えてみますか*/
margin-top:2em;/*本文との間に2行分の余白*/}
background-image:url("使いたい画像のアドレス");
background-repeat:no-repeat;/*画像を繰り返さない*/
background-position:left bottom;/*画像の位置*/
padding-left:20px;/*画像分だけTagsの文字をずらす*/
こんな感じです。
padding-left:20px; ←この部分は、画像のサイズに合わせて数字を調整してください。
これを書かないと画像とTagsの文字が重なってしまいますからね。
background-position:left bottom;/*画像の位置*/
leftで左端にあわせて、bottomで上下の位置をあわせています。
画像や、お好みによっては、centerの方がいい時もあるかもしれませんので、これも調整してください。
以上「Tags」をいじってみました、おわり~。
by suzume-ya3
| 2006-06-13 21:50
| スキン編集