<< Tagsのおしゃれ part2... Excelを利用した簡単な画像... >>
 

Tagsのおしゃれ part1

はじめに

 exciteブログにタグが付きましたね。そこで、タグ部分のおしゃれをしてみたいと思います。「Tags」の前にワンポイントを付けて、ちょっとだけ見やすくします。すごく簡単なので、よろしかったら試して下さいね。

a0031863_22432116.gif

図1 設置例


難易度:★




CSS編集

CSS編集で次のコードを入れます。background-imageで表示したいイメージのURLアドレスを入力し、padding-leftでイメージの大きさ分だけずらしています。イメージファイルによって、このずらし量を調整して下さい。

なお、左側に表示させるために、イメージの位置を左、中央寄せに、background-positionで指定しています。また、記事とのtagsの間に1行の隙間を入れて見やすくしています。

CSS編集


.TAGS{
background-image:url("イメージURLアドレス");
background-repeat:no-repeat;
background-position:left center;
padding-left:20px;

margin-top:1em; /*上との記事の間に1行分の隙間を入れる*/
}





関連リンク


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-04-05 22:43 | │├Tags
<< Tagsのおしゃれ part2... Excelを利用した簡単な画像... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。