kuu♪からのお知らせ

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

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

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

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

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

　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

 

---

[用意するもの]
自分の記事の横幅に合わせた画像を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 記事の外枠を画像で作ろう カスタムスキン カスタマイズ

コメント 2

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

こんにちは！
このレイアウト（スキン）も可能ですか！凄い！！
ますます充実ですね～＾＾
ほんとありがたく教科書にさせて頂いています♪
by mitsu (2008-12-11 13:06) 

★mitsuさん

これができるとちょっと楽しいですよね♪
書き溜めてる記事があるので、もう少しだけ更新が続きますよ～。
今、ちょっとだけやる気があるんです（笑）
by kuu♪ (2008-12-12 11:20) 

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

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