人気ブログランキング | 話題のタグを見る
マイスキン試行錯誤その6
☆本文タイトルの頭にアイコンを入れよう☆
↑この、黒い猫のアイコンです。
わかりにくいかもしれないけど、いちおう猫のカオですからねっ(笑)。

えー、アイコンを入れる前に、タイトルと「編集|削除」のところのスタイルを変えるのに挑戦したんですが、かなり四苦八苦しましたです。
CSSソースの
DIV.POST_TTL ~ が本文タイトルで
DIV.POST_ADMIN ~ が編集|削除の部分だろうなぁと検討をつけて文字色を変えたりサイズを変えたりしてみたものの、一向に反映されない!
なんで?なんで??
と悩むことン時間。
HTMLソースとCSSソースを見比べていて、気がつきました。
CSSの方で指定されている「POST_TTL」と「POST_ADMIN」が、HTMLソースのどこにもクラス設定されてないんですね。
本文HTML内の<DIV CLASS=POST_HEAD>~</DIV>の中に
<$postsubject$>(本文タイトル)や<$postadmin type=1$>(編集|削除)があるので、この辺りにクラス設定があってもいいはずなんだけど・・・。

というわけで、本文HTMLソースに勝手に作っちゃいました。
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%>
<DIV CLASS=POST_TTL>
<$postsubject$>
</DIV>
</TD>
<TD WIDTH=20% ALIGN=RIGHT>
<DIV CLASS=POST_ADMIN>
<$postadmin type=1$>
</DIV>
</TD>
</TR>
</TABLE>
</DIV>

赤字が書き加えた部分です。
これで、やっと本文タイトルや編集|削除のところを個別にスタイル変えられました♪

さて、本題のアイコンを先頭に表示させるには。
CSSソースの「DIV.POST_TTL ~」の部分に、次のように追加します。
DIV.POST_TTL { BACKGROUND : URL(自分のアイコンのurl) NO-REPEAT LEFT; PADDING-LEFT : 16PX(アイコンの幅+α);}

これは、アイコン画像を繰り返しなしで左側に表示、という指定です。
画像url指定だけだと、タイトル先頭の文字とアイコン画像が重なってしまうので、アイコン画像の分だけ左側を空けてタイトルを表示させるようにします。
それがPADDING-LEFT : ~PXの部分です。

タイトル全面に背景画像入れたりタイトルの下にライン画像を入れたり 、ここでもいろいろ遊べそうなのでいつか試してみたいと思います。
by kaokaopon | 2004-08-05 14:26 | SKIN
<< マイスキン試行錯誤その7 ↑ページTOP カテゴリ別トラックバックって・・・ >>



KAOと旦那と3匹の猫のたわむれの日々。家に引きこもってるのでネタがありません。最近猫日記となりつつあります(笑)。
by kaokaopon
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
全体
BBS
雑記
プレマタ
入院日記


観た
読んだ
作った
お取り寄せ
レシピ
SKIN
BLOG
WEB
日々。
ABOUT
以前の記事
2010年 10月
2010年 04月
2009年 08月
2009年 01月
2008年 10月
2008年 07月
2008年 06月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月
2005年 03月
2005年 02月
2005年 01月
2004年 12月
2004年 11月
2004年 10月
2004年 09月
2004年 08月
フォロー中のブログ
食卓から愛をこめて
* もなこの手づくり石け...
だって私はドラマ好き♪
ベジタリアンの厨房
気ままな星遊び
笑門来福
pumilus sapo
母ちゃんちのご飯
***いつか出会えるあな...
茶タローくぅぅぅん.2
ほんの小さな庭
***やっと出会えたあな...
ゆっくりのんびりいこうじ...
ライフログ
タグ
(92)
(77)
(22)
(15)
(6)
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧