人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートの設定方法を教えてください。

http://www.obanzaiya.com/

1、右カラムの、タイトルと本文の余白を狭くしたい
2、右カラムの、本文と、本文下の下線との余白を狭くしたい
3、右カラムの、各投稿記事の間にある下線の上下の余白を狭くしたい

教えていただけると助かります。
どうぞよろしくお願いします。

●質問者: Tomo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

>1、右カラムの、タイトルと本文の余白を狭くしたい

余白を狭くの意味がわからないですが以下の値を増減してみてください。

.leftmenu .col1 {
 margin-right: 106px; ←


>2、右カラムの、本文と、本文下の下線との余白を狭くしたい

.entry-body {
 margin-bottom: 20px; ←小さく

それでもまだ余白が気になるなら

.entry-body p {
 margin-bottom: 1em; ←小さく


>3、右カラムの、各投稿記事の間にある下線の上下の余白を狭くしたい

.col1wrap .entry {
 margin-bottom: 20px; ←小さく



追記:
>1、右カラムの、タイトルと本文の余白を狭くしたい
について。高さの余白。

.entry h2 {
 margin:0 0 0;
}

.entry-body {
 margin:0 10px 20px 10px;
}

さらに余白がきになる場合は以下の部分を調整してください。
.entry-body p {
 margin:1em 0;
}

Tomoさんのコメント
他のスタイルが効いているからでしょうか。回答いただいたように調整したのですが、幅がかわりません。

Cherenkovさんのコメント
style.css元々の指定方法が、margin-bottomではなくmargin:0 0 20px 0;といったものだったので適用されなかったのですね。 以下のように読み替えて下さい。 >|| .leftmenu .col1 { margin:0 106px 0 586px; ←106の箇所 .entry-body { margin:20px 10px; ←20の箇所 .entry-body p { margin:1em 0; ←1の箇所 .col1wrap .entry { margin:0 0 20px 0; ←20の箇所 ||< もしくは指定方法が異なりスタイルが重複して効いてしまう場合は、値の後ろに!importantを付けると優先されます。 >|| .entry-body { margin-bottom: 20px !important; ←適用される } .entry-body { margin: 0 0 0 0; } ||<

Cherenkovさんのコメント
>右カラムのタイトルと、その下の本分の間の余白を小さく 回答1に追記しました。

Tomoさんのコメント
ありがとうございます。 ほぼ、上手く調整できたのですが、 下線と次の投稿タイトルとの間の余白が狭くなりません。 大変申し訳ないのですが、最後にこの点アドバイスいただけませんでしょうか? どうぞよろしくお願いします。

Cherenkovさんのコメント
.col1wrap .entry{ margin:0 0 10px 0; padding:0; } の10pxです。 firefoxのfirebugという拡張を使うと簡単に調べられます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ