解決済み

Bloggerの画面上下の余白を詰めたい

  • 困ってます
  • 質問No.7279659
  • 閲覧数1840
  • ありがとう数2
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 75% (6/8)

広告のないブログを求めて、GoogleのBloggerに行き着いたのですが、
スタイルシート記述がVariable nameという馴染みのない記述で手探り状態なので御知恵を拝借したいです。

目下ヘッダー上にあったツールバーを

#navbar-iframe {
display: none !important;
}

の記述で消したまでは良かったのですが、そのあとの余白がうまく詰まりません。
下の余白も然り。

marginやpadding記述を追加してもどうもうまくいきません。

余白の詰め方を教えていただければ言うことはないのですが
ひょっとして公式テンプレート改変だとここまでが限界なのでしょうか?


もしそうなら、比較的デザインのいじりやすいシンプルなテンプレートなどお教えいただければ幸いです。

製作中のブログアドレス
http://shitumonyou.blogspot.com/

ソースが編集段階とページ表示で変わってくるので編集時のものを
http://ll.la/a.7u
DLパス:okweb

質問者が選んだベストアンサー

  • 回答No.1

ベストアンサー率 52% (35/67)

上の余白は #navbar {height:0;} で。
下は body { にある padding: 0 40px 40px 40px; を padding: 0 40px; にするといけるはず。



https://plus.google.com/u/0/101745030911614729679/posts/dLs4PHYHzsG
補足コメント
mozzz

お礼率 75% (6/8)

どうもBloggerの仕様は相当クセモノですね。
まずは上の余白が消えただけでもよしとして、下の余白は諦めます・・・

皆様、回答有り難うございました。
投稿日時 - 2012-02-05 03:07:38
お礼コメント
mozzz

お礼率 75% (6/8)

上の入力は見事に消えました!ありがとうございます。

ただ、下の余白が変化なしです・・・

body{のpadding記述は編集画面では

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)

になっておりまして、そこを全て消してご教授通りに入れてもダメでした。
上書きされてしまうんでしょうか・・・?
投稿日時 - 2012-02-02 02:31:16

その他の回答 (全2件)

  • 回答No.3

ベストアンサー率 45% (5062/11035)

各要素の左側の+をクリックして広げていくと、そのようぞがどの部分かわかります。

たぶん、全体の高さを100%にしているのに、中身が短い・・
補足コメント
mozzz

お礼率 75% (6/8)

おぼろげながら、見えてきた、ような・・・

ただし、ページ表示されてる状態のソースと
Bloggerの編集ツールで出てくるソースとが違うので・・・
Bloggerもなんでこんな仕様にしているのか・・・?

このへんも言葉だけでは説明しづらいので、
よろしければ上の質問に付記してあるソースをご覧になって下さい
投稿日時 - 2012-02-03 03:16:13
  • 回答No.2

ベストアンサー率 45% (5062/11035)

どの部分かわからないのですが。
見出し部分と、本体の隙間なら
<div class="descriptionwrapper">

<p class="description">
・・
firefox + fireBug( https://addons.mozilla.jp/firefox/details/1843 )
でたちどころにわかります。firebugを使って、どの要素がどのように表示されているかを調べたり、スタイルシートやHTMLを修正してどう変わるかを試せます。

firefoxのアドオン( https://addons.mozilla.jp/firefox/ )の開発者向け( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )には、たくさんの便利なアドオンがあります。
補足コメント
mozzz

お礼率 75% (6/8)

説明ではわかりにくかったかもしれないので画像にて
http://4.bp.blogspot.com/-d3Q1V-oa24Y/Tyo92hNlxoI/AAAAAAAAAHI/mKbQ3UGqDR4/s320/setumei1.jpg

ファイヤーフォックス+ファイヤーバグで中央要素を選択すると全画面選択されますね
http://3.bp.blogspot.com/-fzsMexqK66g/Tyo98DsA6VI/AAAAAAAAAHQ/oaCvdoQP2Tg/s320/setumei2.jpg

この件についてファイヤーバグの有効な使い方はまだよくわかりません・・・
投稿日時 - 2012-02-02 16:48:46
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ