- date
- 050303
[桜]罫線と文字サイズを変える
SBテンプレート"桜"で、記事の罫線と文字のサイズを変えるカスタマイズ。
フォントサイズが10pxのデフォルトのものから、
・フォントサイズを12pxにして、12px用の罫線に変更する場合
・記事に罫線をつけずに、桜のみの背景画像に変更する場合
(フォントサイズを固定しない場合など)
の2点を解説しています。 ●記事のフォントサイズを12pxにする
CSSよりblockquote,entry_body,entry_moreの3つを修正。
デフォルトでは↓このようになっています。
●罫線をなくし、記事の背景に桜だけを散らしてみる
フォントサイズを%やemなど相対指定をされる方はこれ。
entry_bodyとentry_moreのbackground-imageを下記のように修正します。blockquoteについては背景を削除するだけ。
フォントサイズが10pxのデフォルトのものから、
・フォントサイズを12pxにして、12px用の罫線に変更する場合
・記事に罫線をつけずに、桜のみの背景画像に変更する場合
(フォントサイズを固定しない場合など)
の2点を解説しています。 ●記事のフォントサイズを12pxにする
CSSよりblockquote,entry_body,entry_moreの3つを修正。
デフォルトでは↓このようになっています。
blockquote{これらのこの色の文字の部分を↓のように修正して下さい。
margin:0px 5px 0px 5px;
padding:17px 2px 17px 5px;
background-image:url(http:/~略~/bc006_note10b.gif);
color:#8B7765;
font-size:10px;
line-height:17px;
}
div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:10px;
line-height:17px;
background-image:url(http:/~略~/bc006_note10a.gif);
}
div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:10px;
line-height:17px;
background-image:url(http:/~略~/bc006_note10a.gif);
}
blockquote{以上で完了。画像を新しくアップロードする必要はありません。画像のURLはあなたのサイトURLに合わせて書き換えて下さい。
margin:0px 5px 0px 5px;
padding:20px 2px 20px 5px;
background-image:url(http:/~略~/bc006_note12b.gif);
color:#8B7765;
font-size:12px;
line-height:20px;
}
div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:12px;
line-height:20px;
background-image:url(http:/~略~/bc006_note12a.gif);
}
div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:12px;
line-height:20px;
background-image:url(http:/~略~/bc006_note12a.gif);
}
●罫線をなくし、記事の背景に桜だけを散らしてみる
フォントサイズを%やemなど相対指定をされる方はこれ。
entry_bodyとentry_moreのbackground-imageを下記のように修正します。blockquoteについては背景を削除するだけ。
このサンプルではフォントサイズや色を仮定していますが、お好みで変更してお使い下さい。
blockquote{
border:1px dashed #E38C99;
margin:5px;
padding:3px;
color:#808080;
font-size:90%;
line-height:140%;
}
div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:90%;
line-height:140%;
background-image:url(http:/~略~/bc006_bg.gif);
}
div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #8B7D6B;
font-size:90%;
line-height:140%;
background-image:url(http:/~略~/bc006_bg.gif);
}