kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

記事タイトルに小さな画像を入れてみよう

【記事タイトルに小さな画像を入れてみよう】

〔スタンダード1〕と〔スタンダード2〕でやり方が違います。
ここでは書き込む順番が大切です。
タグを書き込む順番に気をつけましょう。

変える部分を赤　青　緑で書いています。

---

 

/* Articles */　とあります。
〔スタンダード1〕の場合

.articles-title { margin:0 0 15px 0; padding:3px 10px; background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat left center; background-color:#BBC6FE; background:#003366; font-size:small; color:#ffffff; }

①padding:3px 10px;の数字を変えましょう
3pxの方が上下の幅　10pxの方が左からの幅です。
左からの幅を広げて画像を入れる隙間を作りましょう

②background:url(/blog/_images/blog/_▲▲▲/*****/1234567.gif) no-repeat left center;
こんな風なタグを入れます。
入れたい画像をアップロードしてクリックすると　
background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat;　こう入ります。
それに、 left centerを書き加えます。
leftは画像を左に入れるという意味（右に入れたいときは　right）
centerは上下の真ん中に画像を入れるという意味

③background-color:#BBC6FE;　と書き換えます。
最初の状態では　background:#BBC6FE;　となってるはずですが、これではＣＳＳの反応がありません。

---

〔スタンダード2〕の場合

.articles-title { margin:0 0 15px 0; padding-bottom:5px; padding-left:20px; background:url(/blog/_images/blog/_bc9/dayan/6533121.gif) no-repeat left center; background-color:#BBC6FE; border-bottom:1px solid #cccccc; font-size:small; }

padding-left:20px;　を付け加えます。
あとは上記②③を付け加えましょう。

ソネットブログ(so-netblog)：カスタムスキンへの道【目次】へ

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事タイトルに小さな画像を入れてみよう

コメント 4

コメントの受付は締め切りました

こんばんわ。またまたすみません。あの・・kuuさんの記事の一番上に、記事の訂正が一応終了しました。と書いてありますよね。それみたいにお知らせなどを載せたいんですがやり方教えてくれますか？お願いします。
by □はる□ (2008-11-05 18:36) 

★□はる□さん

http://simu.blog.so-net.ne.jp/2008-04-16

ここをご覧ください[ﾆｺｯ]
by kuu (2008-11-06 11:19) 

はじめまして＾＾
スキンをいじってみたくてたどりつきました♪
記事タイトル＆サイドバータイトルに小さい画像入れることができました。
とっても分かりやすく書いていただいてうまくできてとっても嬉しいです。
またちょこちょこ変えたいので今後も参考にさせていただくと思います。
ありがとうございました＾＾
by みけ (2008-11-26 22:31) 

★みけさん

かわいらしいスキンができてますね♪
これからも素敵なスキンを作ってくださいね。

by kuu♪ (2008-12-01 14:41) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。