2010年12月16日

【第7回】サイドタイトルのスペースを調整する

前回の修正で、サイドコンテンツに枠線を付けました。

しかし、その状態ではご覧のように、タイトルとコンテンツの間に微妙な隙間ができてしまっています。

SD_006_04.JPG

このままでは見栄えが良くないので、これを修正していくのが今回の内容になります。

さて、修正に入る前に、なぜこの状態で隙間があいてしまうのかを簡単に説明します。

第6回の修正を加えた状況では、サイドタイトルとサイドコンテンツの間で、少し枠線が途切れています。
これは、サイドタイトルとサイドコンテンツの間に隙間が存在していることを意味します。

具体的に言うと、サイドタイトルの設定の中に、サイドタイトルの外の下側にスペースを空けるという設定が存在しているのです。

CSSでボックスの外側に余白を取る設定は、marginプロパティで行います。

CSS変更画面でご覧頂ければわかるかと思いますが、サイドタイトルを定義している.sidetitleクラスの中に、margin-bottom:3px;というプロパティが設定されています。
これを、0pxに修正してやれば良いことになります。

★サイドタイトルの(下)外側のスペースを削除する方法★

.sidetitleクラスのmargin-bottom0pxに設定する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:3px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字の箇所は、過去にこのブログで変更を加えた箇所です。

このような変更を加えると、ご覧のようにサイドコンテンツの枠線が綺麗につながって見えます。

▼▼▼ 変更前 ▼▼▼
SD_006_04.JPG

▼▼▼ 変更後 ▼▼▼
SD_007_01.JPG

以上で、今回の変更は完了です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ

posted by o(^0^)o ほくほく at 19:13| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。