2010年09月28日
15.ファンブログカスタマイズ(小技編3)
すでに第15回?!ファンブログカスタマイズ講座です〜(^O^)/
さて今回の小技編3ですが、枠の付け方をやってみますね〜
これは意外とめんどくさいんですね。。。
なぜなら画像を3つ用意しなければなりませんので(・.・;)
今回用意した画像はこれです。
では最初に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);
}
と、こんな定義してみましたよ〜(^^♪
まあ当然ここまでではわかりませんよね?
ではこの下に描いてみたいと思います〜
ではこれのHTMLです〜(^O^)/
<div class="waku1"></div>
<div class="waku2">
   どうですかね〜?
   枠がついたかと思います〜(^^♪
   >゜))))彡
</div>
<div class="waku3"></div>
こんな感じですね〜(^^ゞ
「waku1」が上の画像
「waku2」が中の画像
「waku3」が下の画像
それをCSSにて背景として指定しているのです〜
如何ですか〜?
実際はもう少し細かい定義をしないと文字とかが
きれいに配置できなかったりがあります。。。
でもこれは色々応用できる技ですので是非マスター
してくださいね〜(^O^)/
まあ良く見られるのが記事のまわりですね。
そしてファンブログではちょっと出来ないと思われる
サイドバーのまわり、、、
実をいうとこの仕組みが大きくなったのがページ全体
なんですね〜\(◎o◎)/!
まわりが囲まれているでしょ?
ということで、大分簡単に書きました。。。
わからない方はちょっと考えてみて、それでも駄目なら
質問してくださいね〜(^^♪
さて今回の小技編3ですが、枠の付け方をやってみますね〜
これは意外とめんどくさいんですね。。。
なぜなら画像を3つ用意しなければなりませんので(・.・;)
今回用意した画像はこれです。
では最初に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);
}
と、こんな定義してみましたよ〜(^^♪
まあ当然ここまでではわかりませんよね?
ではこの下に描いてみたいと思います〜
どうですかね〜?
枠がついたかと思います〜(^^♪
>゜))))彡
枠がついたかと思います〜(^^♪
>゜))))彡
ではこれのHTMLです〜(^O^)/
<div class="waku1"></div>
<div class="waku2">
   どうですかね〜?
   枠がついたかと思います〜(^^♪
   >゜))))彡
</div>
<div class="waku3"></div>
こんな感じですね〜(^^ゞ
「waku1」が上の画像
「waku2」が中の画像
「waku3」が下の画像
それをCSSにて背景として指定しているのです〜
如何ですか〜?
実際はもう少し細かい定義をしないと文字とかが
きれいに配置できなかったりがあります。。。
でもこれは色々応用できる技ですので是非マスター
してくださいね〜(^O^)/
まあ良く見られるのが記事のまわりですね。
そしてファンブログではちょっと出来ないと思われる
サイドバーのまわり、、、
実をいうとこの仕組みが大きくなったのがページ全体
なんですね〜\(◎o◎)/!
まわりが囲まれているでしょ?
ということで、大分簡単に書きました。。。
わからない方はちょっと考えてみて、それでも駄目なら
質問してくださいね〜(^^♪
【ファンブログカスタマイズの最新記事】
投稿者:ブリカマ|09:52
|ファンブログカスタマイズ