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

kuu♪からのお知らせ

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

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

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

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

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

kijiwaku-01.PNG

    ↓   ↓   ↓   ↓   ↓   ↓

kijiwaku-02.PNG

 


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

1. topの画像
menu_title03.GIF

2. sideの画像
side.GIF

3. bottomの画像
bottom.GIF 


[作成] 

【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;
}

 

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


nice!(1)  コメント(2) 
共通テーマ:blog

nice! ありがとう 1

コメント 2

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

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

kuu♪

★mitsuさん

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

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

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

  

         

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

×

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