スポンサーサイト

--/--/--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
comment (-) @ スポンサー広告

レス

2015/08/20
いただいたコメントへのお返事です。
○○ヨ○コ様

こんにちは、テンプレートのご利用ありがとうございます(*´Д`)
早速ですが、ご質問の件です。

サブメニュー側のグレーの幅をパーセントではなく ピクセル指定して固定しておきたい

との事ですね。

gray_ver2はシンプルにcssをまとめていた気がするので、簡単です。
まずはcss編集のボックスをご覧ください。

その中に、

/* メインボックス */

という表記はありませんでしたでしょうか?

その中にある、三つの設定を弄る必要があります。

サイドメニューだけをピクセル指定に変更にしても構わないのでしょうが、全体の表示の調整が難しいと思うので此方で全てピクセル設定してしまった方が最初は分かりやすいです。

さて、設定の詳細です。

/* メインボックス */
.wrap {
  width: 100%;
  margin:0 auto;
  text-align: left;
}

.contents {
  width: 65%;
  margin: 0 2%;
  float: right;
}

.side {
  width: 25%;
  margin: 0 2%;
  float: right;
}

こちらの内容は、

/* メインボックス */
.wrap {
width: 100%; ←全体を覆っている横幅の指定です。
margin:0 auto;
text-align: left;
}

※width:100%;は、ブラウザの表示の画面幅に合わせる、という事になります。

.contents {
width: 65%; ←コンテンツ側、右側の記事部分の横幅の指定です。
margin: 0 2%; ←auto(自動調整)ではないので、余白の調整も必要になります。
float: right; ←レイアウトを構成している要素 (※1)
}

.side { width: 25%; ←サイドメニュー側、左側の記事部分の横幅の指定です。
margin: 0 2%; ←こちらも余白の調整が必要になります。
float: right;
}

px指定は、この三つの箇所をお好みの横幅に変更して、%pxに変えて下さい。

ただその際に、全体の枠(wrap)の中に、箱が二つ入っているイメージ(contents、side)なので、はみ出さないように調整する必要があります。その際は、余白(margin)の事も頭に入れておく必要があります。

それから、※1についてですが、テンプレートgrayの2カラム構成は、floatによってボックスを浮かせています
サイドメニュー側、コンテンツ部分、どちらも右側に浮くように設定されているので、ボックスの位置を調整する必要があります

それとは別に、
単純にsideの横幅をpx指定にするだけでも構いませんが、contents側が%設定になるので、勝手に動いてしまいます。
ので、こちらだと調整がややこしくなりますが、見る側にとっては此方の方が親切なのかも知れません。

例として、私ならこんな風に指定すると思います。

/* メインボックス */
.wrap {
width: 100%;
margin:0 auto;
text-align: left;
}

.contents {
width: 850px;
margin: 0 2%;
float: right;
}

.side {
width: 350px;
margin: 0 2%;
float: left;
}
comment (0) @ Memo
ユラグ/ATOLS | res

comment

コメントを送る。

URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 

Girafe

日常。たまにテンプレート配布していたりします。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。