<< 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 | Trackback(1) | Comments(10)
トラックバックURL : http://potto.exblog.jp/tb/3442682
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 中国広東東莞駐在奮闘生活.. at 2006-04-07 00:56
タイトル : 4月6日 スキン編集とBloginfluence
夕方から雨降りだした中国東莞(トンガン)で部屋ごもり中のぱーたいです。 お気づきの方も多い?とは思いますが、 二日前からまたまたスキンをいじっていますv(≧∇≦)v 久しぶりにするとすごく億劫なんですよね( ▽|||) カスタマイズの場合、以前の内容を忘れてしまって、 『あれ?どこ触ればいいの?_| ̄|○』 の連発なんです(-""-;)ムム・・・ で、エキブロは昨日から『TAG機能』も取り入れたようで、 それもついでに対応させていました(; ̄ー ̄川 この二日間自宅から出てない...... more
Commented by colortail at 2006-04-06 10:14
ご無沙汰しておりますm(__)m
あ!これ可愛い!と惚れちゃいました^^
早速使わせていただきます。有難うございます♪
うちのスキンは記事の文字を中央揃えにしているので、
最初うまくいかず、あれ?あれ?ってあせっちゃいました(笑)
ポジションをcenterにして、pxをずらしてずらして調整しました。^^
Commented by blue_moon_rabbit at 2006-04-06 16:30
こんにちは^^あっcolortailさんだ♪
早速使ってみました。画像は使い回しで(笑)
ありがとうございました
Commented by potto37 at 2006-04-06 20:06
colortailさん、ご無沙汰です。
あ、気に入っていただけました(#^.^#)
良かったです。
画像によっては調整が必要ですが、楽しめますね。
Commented by potto37 at 2006-04-06 20:07
blue_moon_rabbitさん、早速試されたようで嬉しいです^^
こちらこそ、ありがとうございます。
Commented by pa-tai at 2006-04-07 01:00
ぱーたいと言います。
以前から拝見しているのですが、
今回TAGの記事参考にさせて頂きました。

ちなみにCSS編集だけで反映されなかったので、
HTMLでidを指定するとできました。
よくわかっておらずかなり感覚でいじっているので、
以前に何か消してしまっているからでしょうか(-ω-;)?

これからも色々なテクニック等楽しみにさせていただきます。
Commented by potto37 at 2006-04-07 06:40
ぱーたいさん、こんにちは。

CSSだけで反映されるのですが、画像の大きさなどにより隠れて見えないときがあります。
Paddingなどでスペースを余分に入れると通常ならばできるのですが、
わたしもその現象についてはちょっと分からないですね。
exciteのブログって、ブログ作成時期によって使える特殊タグが違ったり、特定ユーザだけエラーがでるなどの現象がでているのでなにかあるかもしれませんね。


Commented by xoanon at 2006-04-07 14:21
こんにちは(^^)
タグの飾り、とってもかわいいので真似させていただきました。
そのままだと、記事の続きみたいでしまりがなかったのが、
飾りを入れるだけでずいぶんちがいますね。
Commented by potto37 at 2006-04-07 20:21
xoanonさん、こんにちは^^
とっても可愛いタグのアイコンですね。
Tagsとタグ、おしゃれですね。
Commented by chiering-ring at 2006-04-08 16:05
お久しぶりです こんにちは!
タグのワンポイントのアイデアさっそく使わせていただきました。
それから、タグと本文の間隔、とくにMoreにしたとき
タグとMoreの区別がつかず見づらいなあ、と感じてましたが
スペースを入れる方法も真似させていただきました(わたしは二行でやってみました)。
ありがとうございました!
Commented by potto37 at 2006-04-09 07:00
chiering-ringさん、お久しぶりです^^
コメントありがとうございます。
可愛いタグになりましたね。
いろいろ工夫して楽しんで頂けて、よかったです。
<< Tagsのおしゃれ part2... Excelを利用した簡単な画像... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。