« 記事タイトルに見出しアイコン | トップページ | 火中の栗じゃないでしょ »

2004.05.11

見出しアイコン位置調整

「やろうと思ったらすぐ実行2!」(爆)
先程の記事の続編です。
記事の見出しにつけたアイコンの位置を直してみました。

今回参考にさせて頂いたのは
とほほのwww入門 さん:「とほほのスタイルシート入門」
です。
(リンクフリーだということでご紹介)
キレイにカテゴライズされているので、スタイルシートの目的の内容が良く解りました^^


さて、変更してみました。
h3の中でも、変えた所だけ抜き出しています。
赤・太い文字部分を変えました。

■変更前



【content h3 の中の・・・】

★background-position:left;
(背景の位置)

★text-indent:30px;
(テキストの最初の文字の位置)



上記だとこう表示されていました(画像↓)
midashi1.bmp


■変更後



【content h3 の中の・・・】

★background-position:10px;
(背景の位置)

★text-indent:45px;
(テキストの最初の文字の位置)



上記に変更したらこう表示されました(画像↓)
midashi2.bmp


※テキストの位置も変えてあげないと、余白を採った分テキストに画像が被ってしまうんですね^^;

先程ご紹介の「とほほのスタイルシート」さんを読んだのですが、他に%やemなどの単位付きの数値で指定してあげればよいみたいです。
まだまだどれくらい数値を変えると、見た目どれだけ変わるかがイマイチ解らないので流石に1回ではキマらないですね(笑)


・・・今回本当に初めてスタイルシート弄っているので、「正しい指定」が出来ているかちょっと不安ですが・・・
(間違っていたら、お手数ですが是非にワタクシめに教えてやってください!)
やってみると、これはココのことだったのかー!とか色々楽しいですね^^
ふー。目が疲れた( ´,_ゝ`)


2004 05 11 10:24 午後 | 固定リンク

■トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/17997/576479

(トラックバックは記事投稿者が公開するまで表示されません。)

この記事へのトラックバック一覧です: 見出しアイコン位置調整:

■コメント

■コメントを書く