So-net無料ブログ作成
検索選択
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

サイドバータイトルに小さな画像を入れてみよう [サイドバー]

【サイドバータイトルに小さな画像を入れてみよう】

ここでは書き込む順番が大切です。
タグを書き込む順番に気をつけましょう。

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


 

〔例:シンプルワイドのタグ〕
/*-----Side-----*/ 

.sidebar-title {
margin:0;
margin-bottom:10px;
padding:5px 10px;
border-bottom:1px dotted #9a9a9a;
font-size:x-small;
color:#1c1c1c;
}


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

background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat left center;
こんな風なタグを入れます。
入れたい画像をアップロードしてクリックすると 
background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat; こう入ります。

まず no-repeat; の ; を消します。
次に left center を書き加えます。
忘れずに最後に ; を書き加えます。

・leftは画像を左に入れるという意味(右に入れたいときは right)
・centerは上下の真ん中に画像を入れるという意味

③画像の後ろに色をつけたいときは background-color:#BBC6FE; と書き加えます。
デフォルトでは「color:#1c1c1c;」こうなってますけど、これでは反応しないはずです。

〔例〕画像を右に入れ、色を乗せるときは

.sidebar-title {
margin:0;
margin-bottom:10px;
padding:5px 10px;
background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat right center;
background-color:#BBC6FE;
border-bottom:1px dotted #9a9a9a;
font-size:x-small;
}

 

〔例〕画像を左に入れ、色を乗せるときは

.sidebar-title {
margin:0;
margin-bottom:10px;
padding:5px 10px;
background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat left center;
background-color:#BBC6FE;
border-bottom:1px dotted #9a9a9a;
font-size:x-small;
}


nice!(7)  コメント(4) 
共通テーマ:blog

nice! ありがとう 7

コメント 4

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

[アリガトウ]
;←を消さずに苦労してました(汗)
とても助かりましたありがとうございます
by のほん☆ (2009-03-09 17:31) 

kuu♪

★のほんさん

; のマークひとつで表示がちがってきますもんね[ウーン]
うまくできてよかったです[ニコッ]
by kuu♪ (2009-03-12 17:22) 

和桜

こんばんわw

ごめんなさいorz
またまた質問よろしいでしょうか。
記事のタイトルやサイドバータイトルに画像を付けていたのですが、
どうも上手くいかず、画像と文字が重なってしまったり、今はスキン白を使っているんですが、そのスキン白のタイトル左側には緑色の1センチくらいの線が画像になっているんですが、それが消えないんですね;;
これ等はどうすれば出来ますでしょうか?
お願いします。
by 和桜 (2009-04-27 20:51) 

kuu♪

★和桜さん

タイトルの線については
http://simu.blog.so-net.ne.jp/2008-12-20
ここの【13】を見てください。

タイトルの文字の位置については
http://simu.blog.so-net.ne.jp/2007-12-22-10
を見てください。
by kuu♪ (2009-04-28 10:31) 

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。