15.ファンブログカスタマイズ（小技編３）：ブリカマ日記

15.ファンブログカスタマイズ（小技編３）

すでに第１５回？！ファンブログカスタマイズ講座です～(^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◎)／！
まわりが囲まれているでしょ？

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

【ファンブログカスタマイズの最新記事】