kuu♪からのお知らせ

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

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

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

記事部分全体に背景色や背景画像をつけよう

【記事本文に背景色をつけよう】

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

---

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

.articles { width:678px; border:1px solid #9a9a9a; overflow:hidden; }

ここに、background-color:#cccccc;　を付け加えます。

.articles { width:678px; border:1px solid #9a9a9a; background-color:#cccccc; overflow:hidden; }

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

 

■おまけ①
色ではなく画像を載せたいときは　
background-color:#cccccc;　ではなく　
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat;　 とすればＯＫです。
　＊繰り返して使う画像の場合は　no-repeat;　を消しましょう。

.articles { width:678px; border:1px solid #9a9a9a; background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat; overflow:hidden; }

 

■おまけ②
色もつけて画像も載せたいときは　
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat;　
のあとに
background-color:#cccccc; を書きましょう　

.articles { width:678px; border:1px solid #9a9a9a; background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat right bottom; background-color:#cccccc; overflow:hidden; }

 

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

 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事本文に背景色をつけよう

記事の外線の色と太さと種類を変えよう

【記事の外線の色と太さと種類を変えよう】

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

---

/* Articles */　とあります。

.articles { width:728px; border:2px solid #9a9a9a; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; overflow:hidden; }

外線の色と太さと種類を変えるには、
border:2px solid #9a9a9a;　を変えます。

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

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

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

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

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ

記事本文の文字の位置を変える

記事本文の文字が左端ぎりぎりの時にこのスペースを入れると見やすくなります。

---

/* Articles */　の中の　
.articles-body {　の中に　
padding:0px 10px 0px 10px;　を書き加えます。
数字は自分で変えてください。

.articles-body { line-height:1.6; margin-bottom:20px; padding:0px 10px 0px 10px; }

＊paddingの説明は【よく出てくるタグの説明】をご覧ください。

 

タグ：ソネットブログ ソネブロ So-net blog 記事本文の文字の位置を変える カスタムスキン カスタマイズ

記事の外枠を画像で作ろう

記事の外枠を、線ではなく画像で囲みます。
画像で囲めば、角の丸いもの、線がグラデーションしているものなど、オリジナルなものが作れます。

　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

 

---

[用意するもの]
自分の記事の横幅に合わせた画像を3つ用意します。
　＊自分の記事の横幅は　.articles {　の中に　width:550px;　という記述があると思います。

1.　topの画像 2.　sideの画像 3.　bottomの画像

[作成]　

【1】topの画像を入れる
　　■自分の作った画像の高さを記入する　
　　　height: 40px;

　　■画像を挿入する
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;

/* Articles */

.articles-title { margin:0; margin-bottom:0px; padding: 10px 0px 0px 35px; height: 40px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; font-size:small; }

【2】sideの画像を入れる
　　■画像を挿入する　画像を縦に繰り返す必要があるので、repeat-y　を入れる
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") repeat-y;

/* Articles */

.articles { width:550px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") repeat-y; overflow:hidden; }

【3】bottomの画像を入れる
　　.articles-bottom　という記述がない場合は、新たに書き込む。　
　
　　■自分の作った画像の高さを記入する　
　　　height: 20px;

　　■画像を挿入する
　　　background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　

/* Articles */

.articles-bottom { height: 20px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; }

 

＊画像の透過などにも気を配って作ってみてください。

タグ：ソネットブログ ソネブロ ソネット So-net blog 記事の外枠を画像で作ろう カスタムスキン カスタマイズ

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

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