すでに第１５回？！ファンブログカスタマイズ講座です〜(^O^)／

さて今回の小技編３ですが、枠の付け方をやってみますね〜

これは意外とめんどくさいんですね。。。
なぜなら画像を３つ用意しなければなりませんので(・.・;)

今回用意した画像はこれです。






では最初にCSS（スタイルシート）への定義です。

#entries .waku1 {
width:300px;
height:32px;
background-image: url(https://fanblogs.jp/burikama/file/488/d2FrdTHqOQ.jpg);
}
#entries .waku2 {
width:300px;
background-image: url(https://fanblogs.jp/burikama/file/488/d2FrdTLrOg.jpg);
}
#entries .waku3 {
width:300px;
height:18px;
background-image: url(https://fanblogs.jp/burikama/file/488/d2FrdTPsOw.jpg);
}

と、こんな定義してみましたよ〜(^^♪

まあ当然ここまでではわかりませんよね？

ではこの下に描いてみたいと思います〜



ではこれのＨＴＭＬです〜(^O^)／

---

＜div class="waku1"＞＜/div＞
＜div class="waku2"＞
＆nbsp;＆nbsp;＆nbsp;どうですかね〜？
＆nbsp;＆nbsp;＆nbsp;枠がついたかと思います〜(^^♪
＆nbsp;＆nbsp;＆nbsp;>゜))))彡
＜/div＞
＜div class="waku3"＞＜/div＞

---

こんな感じですね〜(^^ゞ

「waku1」が上の画像
「waku2」が中の画像
「waku3」が下の画像

それをＣＳＳにて背景として指定しているのです〜
如何ですか〜？

実際はもう少し細かい定義をしないと文字とかが
きれいに配置できなかったりがあります。。。

でもこれは色々応用できる技ですので是非マスター
してくださいね〜(^O^)／

まあ良く見られるのが記事のまわりですね。
そしてファンブログではちょっと出来ないと思われる
サイドバーのまわり、、、
実をいうとこの仕組みが大きくなったのがページ全体
なんですね〜＼(◎o◎)／！
まわりが囲まれているでしょ？

ということで、大分簡単に書きました。。。
わからない方はちょっと考えてみて、それでも駄目なら
質問してくださいね〜(^^♪