2010年12月26日

【第15回】サイドコンテンツの枠線と文字のスペースをあける

前回は、記事本文とその枠線との間のスペースを広げるCSS編集を行いました。

今回は、サイドコンテンツの中身と枠線との間のスペースを広げてみましょう。

SD_015_01.JPG

ご覧のように、サイドコンテンツは、ちょっと上下の隙間が狭い気が・・・

本当にちょっとですけど。

ということで、今回はこのサイドコンテンツの上下の隙間を広げてみたいと思います。

サイドコンテンツを定義しているクラスは、もうこのブログで何度も採り上げた.sideクラスです。
そして、枠線との隙間を調整するのは、前回も使用したpaddingプロパティ。

これさえ分かっていれば、今回の修正は簡単です。

★サイドコンテンツの枠線と文字のスペースを調整する方法★

.sideクラスのpaddingプロパティを調整する。

▼▼▼ 変更前 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:0 5px 0 15px;
/* ▼▼▼ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▼▼▼ */
font-size:11px;
/* ▲▲▲ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▲▲▲ */
/* ▼▼▼ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▼▼▼ */
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
/* ▲▲▲ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▲▲▲ */

}

▼▼▼ 変更後 ▼▼▼
.side{
margin-top:0px;
margin-bottom:25px;
padding:5px 8px 10px 8px;
/* ▼▼▼ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▼▼▼ */
font-size:11px;
/* ▲▲▲ 2010/12/13 【第4回】サイドコンテンツフォントサイズ小設定 ▲▲▲ */
/* ▼▼▼ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▼▼▼ */
border-right:4px double #FF9900;
border-bottom:4px double #FF9900;
border-left:1px solid #FF9900;
/* ▲▲▲ 2010/12/15 【第6回】サイドコンテンツ枠線追加 ▲▲▲ */
}
(注)灰色字箇所は、過去にこのブログで変更を加えた箇所です。

今回は、.sideクラスの上側に5px、下側に10pxのスペースを設定してみました。
また、左右のスペースをそれぞれ8pxずつに修正しています。

その結果がこちらです。

▼▼▼ 変更前 ▼▼▼
SD_015_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_015_02.JPG

上下のスペースが広がり、左右のスペースが変わりました。

今回は以上です。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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