ブロプー Blog

こんにちは！さいとうです
今週末は１ヶ月ぶりの３連休です みなさんはどこか旅行にいかれますか？？
私は、友達と買い物にいって、あとは家でゆっくりと・・・

今回は第１２回の続きです。
それでは、プラグインのタイトルに背景をつけてみましょう

まずはどのようなサイドバーのデザインにするか考えましょうどのようなデザインでも、プラグインの内容によって縦の長さが変わってきます。ですから、第３回　ブログのデザインを考える（３）で書いたように、縦の長さの変化にも耐えられるように作らなければいけません

サイドバーのタイトルは
<div class="sidetitlebody">
<div class="sidetitle">～～</div>
</div>
この部分です。簡単に済ませるなら.sidetitlebodyに背景画像を表示させ、.sidetitleのmarginを指定して文字の位置を整えるだけです。でもこの方法ですと、文字数が多くなったときや文字を拡大したときに画像からはみ出してしまう可能性があります

第３回　ブログのデザインを考える（３）のように画像を３分割にすればいいのですが、プラグインタイトルのセレクタは.sidetitlebodyと.sidetitleの２つしかありません。さてどうしたらいいでしょうか・・・

プラグインのソースにはあと.sidetop, .side, .sidebodyが残っています。この中から.sidetopを使って、.sidetitlebody, .sidetitle, .sidetopの３つをタイトル部分に使ってしまいましょう。

今度はプラグインコンテンツ部分だけに背景画像を表示させます。コンテンツ部分はボックス画像を３つにわけて.sidetop, .side, .sidebodyのそれぞれに背景を表示させるだけなので、わかりやすいですね。

ここまでで、タイトル部分のみ、コンテンツ部分のみ、背景を表示させる方法を説明してきましたが、タイトル部分とコンテンツ部分、それぞれに背景を表示させたい場合はどうしたらいいのでしょうか？

答えは簡単です。上から順に、.sidetitlebody, sidetitle, .sidetopはタイトル部分に使います。そして残りの.side, .sidebody, .sidebottomの３つをコンテンツ部分に使うのです

全体の場合も同じように背景画像を３つにわけます。
.sidetitlebodyまたは.sidetitleに上部の画像、
.sidetop, .side, .sidebodyには真ん中の画像、
.sidebottomには下部の画像を表示させます。

次回もlivedoor用テンプレートのカスタマイズ方法の続きです
更新は１０月１４日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ