1364543253 wordpress3.5のレスポンシブウェブデザインに関して質問です。テーマはtewenty-elevenを使用しています。

対象サイトは
http://dca-labo.info/demo8
です。
PCのブラウザの横幅を調整してPC以外の表示確認をしています。
添付した画像を見て頂ければわかるのですが、ある横幅から右側にかなりの余白ができてしまいます。
この余白はstyle.cssのどの部分を変更する事によって調整可能なのでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/03/29 16:47:33
  • 終了:2013/04/02 11:12:56

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/03/30 23:38:41

ポイント180pt

Twenty Elevenのデフォルトの動作ですが、レスポンシブデザインによって800px幅以下の時はfloatが解除され、メインコンテンツとサイドバーの幅がそれぞれ自動で調整されます。(※「@media (max-width: 800px) { ~ }」内に指定されています。)
サイドバーの表示場所も上記の指定によって本来は無くなるのですが、余白としてそのまま残るのは、元々の原因が「#primary」に幅を指定した事ですので、元の100%に戻した方がいいと思います。
合わせて「#content」と「#secondary」を調整します。

#primary {
	float: left;
	margin: 0 -25.4% 0 0;
	width: 100%;
}

#content {
	margin: 0 29.4% 0 5.6%;
	width: auto;
}

#secondary {
	float: right;
	margin-right: 4.6%;
	width: 20.8%;
}

※上記の例では「#secondary」の幅として「25.4%」必要ですので、「#primary」の右余白として「-25.4%」を指定します。
※記事本文の余白は、「#content」の左右の余白で調整します。(※25.4%ではサイドバーと接触してしまいますので、少し値をプラスして調整します。)


※上にも書きましたが、「#primary」に幅を指定した事が原因ですので、800px以下の時には「#primary」の幅指定を解除して100%にする事でも対処可能です。(※ただし、テーマ本来の手法に沿って上記の方法で調整した方がいいと思います。)

@media (max-width: 800px) {
	#primary {
		width: 100%;
	}
}

他1件のコメントを見る
id:rouge_2008

固定ページや個別投稿などの「.singular」が付与されている「#primary」の余白が0になっている為です。
「style.css」の次の箇所(※114行目)の記述を無効にするか、そっくり削除してみてください。

.singular #primary {
margin: 0;
}

2013/03/31 19:50:30
id:mkusume

ご指導のおかげで解決しました。ありがとうございます。

2013/04/02 11:12:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません