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 カスタムスキン カスタマイズ 記事タイトルに小さな画像を入れてみよう

記事タイトルの幅を変えよう

【記事タイトルの幅を変えよう】

〔スタンダード1〕と〔スタンダード2〕でやり方が違います。

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

---

/* Articles */　とあります。

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

.articles-title { margin:0 0 15px 0; padding:3px 10px; background:#003366; font-size:small; color:#ffffff; }

このpadding:3px 10px;の数字を変えましょう
3pxが上下の幅、10pxが左右の幅です。

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

.articles-title { margin:0 0 15px 0; padding-bottom:5px; border-bottom:1px solid #cccccc; font-size:small; }

このpadding-bottom:5px;の数字を変えましょう
padding-bottom:5px;は、記事のタイトルの下線と字の間の幅です。

左からの幅を広げたい時は　padding-left:5px;
上からの幅を広げたい時は　padding-top:5px;
を付け加えましょう。

.articles-title { margin:0 0 15px 0; padding-top:5px; padding-left:5px; padding-bottom:5px; border-bottom:1px solid #cccccc; font-size:small; }

 

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

 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事タイトルの幅を変えよう

記事タイトルの下の線を変えよう

【記事タイトルの下の線を変えよう】

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

---

 

/* Articles */　とあります。（上から1/3くらいのところです。）　

.articles-title { margin:0 0 15px 0; padding-bottom:5px; border-bottom:1px solid #cccccc; font-size:small; }

線の色と太さと種類を変えるには、
border-bottom:1px solid #cccccc;　を変えます。

・border-bottom:1pxの数字を変えると線の太さが変わります。

・solidは線の種類です。solidを↓↓の種類に変えることもできます。
solid（普通の線）
double（二重の線）
groove（谷型の線）
ridge（山型の線）
inset（凹型）
outset（凸型）
dotted（点線）　一部の古いブラウザでは未対応
dashed（大きい点線）　一部の古いブラウザでは未対応
none（線なし）

・#ccccccの部分が色の指定です。好きな色に変えましょう。
色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。

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

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事タイトルの下の線を変えよう

記事タイトルの色を変えよう

【記事タイトルの色を変えよう】

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

---

/* Articles */　とあります。（上から1/4くらいのところです。）　

その中に　background:#003366;　を入れればＯＫです。
スキンによって最初から入っているものもあります。

.articles-title { margin:0 0 15px 0; padding:3px 10px; background:#003366; font-size:small; color:#ffffff; }

#003366の部分を好きな色に変えましょう。

「#003366」の部分は自分で好きな色を載せてください。

色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。

 

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

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事タイトルの色を変えよう

記事中の広告を透過しよう

【記事中の広告を透過しよう】

 

■記事中の広告の色をカスタムスキンの背景色に合わせるのって意外とめんどう。
　このタグさえカスタムスキンに入れておけば自動で背景色になります。

■記事部分に画像を使ってる場合、ここだけ透過されなくて違和感ありませんか？そんなときでも大丈夫です。

今回はカスタムスキンの設定だけではできません。
必ず、①②両方してくださいね。

---

 

①設定　→　広告設定　→　カラー　→　背景色を白にする（#FFFFFF）

　今後は背景色の設定（#FFFFFF）は扱いません。
　扱うと透過しなくなります。

②自分のカスタムスキンの　/*-----Entry-----*/の一番下（/* nice! */の真上）に

.adView{ filter:chroma(color=#ffffff); }

を入れる。

〔例〕

/*-----Entry-----*/ .entry { margin-top:10px; padding:10px 20px; border-top:1px dotted #205900; } .entry h4 { margin:0 0 15px 0; padding:0; font-size:small; color:#205900; } .entry ul, .entry li, .entry dl, .entry dt, .entry dd, .entry form { margin:0; padding:0; } .adView{ filter:chroma(color=#ffffff); } /* nice! */ #nice h4 {

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

 

 

タグ：ソネブロ ソネットブログ 記事中の広告を透過しよう カスタマイズ So-netBlog カスタムスキン

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

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